前言
氣泡組件在實(shí)際工作中非常普遍,無論是網(wǎng)頁中還是app中,比如:





我們這里所謂氣泡組件是指列表型氣泡組件,這里就其dom實(shí)現(xiàn),CSS實(shí)現(xiàn),js實(shí)現(xiàn)做一個(gè)討論,最后對一些細(xì)節(jié)點(diǎn)做一些說明,希望對各位有用
小釵最近初學(xué)CSS,這里做一個(gè)專題,便于自身CSS提升,文章有不少問題與可優(yōu)化點(diǎn),請各位指導(dǎo)
組件分類
單由氣泡組件來說,他仍然屬于“彈出層”類組件,也就是說其會(huì)具有這些特性:
① 布局為脫離文檔流
② 可以具有mask蒙版,并且可配置點(diǎn)擊蒙版是否關(guān)閉的特性
③ 可選的特性有點(diǎn)擊瀏覽器回退關(guān)閉組件以及動(dòng)畫的顯示與隱藏動(dòng)畫特性
其中比較不同的是:
① 不是居中定位
② 具有一個(gè)箭頭標(biāo)識(shí),并且可以設(shè)置再上或者在下
③ 因?yàn)榫哂屑^,而且這個(gè)箭頭是相對于一個(gè)元素的,一般意義上我們?nèi)蝿?wù)是相對某個(gè)按鈕,所以說具有一個(gè)triggerEL
所以單從這里論述來說,我們的組件名為BubbleLayer,其應(yīng)該繼承與一個(gè)通用的Layer
但是,就由Layer來說,其最少會(huì)具有以下通用特性:
① 創(chuàng)建——create
② 顯示——show
③ 隱藏——hide
④ 摧毀——destroy
而以上特性并不是Layer組件所特有的,而是所有組件所特有,所以在Layer之上還應(yīng)該存在一個(gè)AbstractView的抽象組件
至此繼承關(guān)系便出來了,拋開多余的接口不看,簡單來說是這樣的:

組件dom層面實(shí)現(xiàn)最簡單實(shí)現(xiàn)
單從dom實(shí)現(xiàn)來說,其實(shí)一個(gè)簡單的ul便可以完成任務(wù)
|
新聞熱點(diǎn)
疑難解答
圖片精選