萬盛學電腦網 >> 網頁制作 >> Html5 >> html5+css3氣泡組件的實現
html5+css3氣泡組件的實現
前言
氣泡組件在實際工作中非常普遍，無論是網頁中還是app中，比如：
我們這裡所謂氣泡組件是指列表型氣泡組件，這裡就其dom實現，css實現，js實現做一個討論，最後對一些細節點做一些說明，希望對各位有用
小钗最近初學CSS，這裡做一個專題，便於自身CSS提升，文章有不少問題與可優化點，請各位指導
組件分類
單由氣泡組件來說，他仍然屬於“彈出層”類組件，也就是說其會具有這些特性：
① 布局為脫離文檔流
② 可以具有mask蒙版，並且可配置點擊蒙版是否關閉的特性
③ 可選的特性有點擊浏覽器回退關閉組件以及動畫的顯示與隱藏動畫特性
其中比較不同的是：
① 不是居中定位
② 具有一個箭頭標識，並且可以設置再上或者在下
③ 因為具有箭頭，而且這個箭頭是相對於一個元素的，一般意義上我們任務是相對某個按鈕，所以說具有一個triggerEL
所以單從這裡論述來說，我們的組件名為BubbleLayer，其應該繼承與一個通用的Layer
但是，就由Layer來說，其最少會具有以下通用特性：
① 創建——create
② 顯示——show
③ 隱藏——hide
④ 摧毀——destroy
而以上特性並不是Layer組件所特有的，而是所有組件所特有，所以在Layer之上還應該存在一個AbstractView的抽象組件
至此繼承關系便出來了，拋開多余的接口不看，簡單來說是這樣的：
組件dom層面實現最簡單實現
單從dom實現來說，其實一個簡單的ul便可以完成任務
代碼如下:
<ul class="cui-bubble-layer" style="position: absolute; top: 110px; left: 220px;">
<li data-index="0" data-flag="c">價格：￥35</li>
<li data-index="1" data-flag="c">評分：80</li>
<li data-index="2" data-flag="c">級別：5</li>
</ul>
當然這裡要有相關的css
代碼如下:
.cui-bubble-layer {
background: #f2f2f2;
border: #bcbcbc 1px solid;
border-radius: 3px
}
至此形成的效果是醬紫滴：
代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Blade Demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="telephone=no" name="format-detection" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
body, button, input, select, textarea { font: 400 14px/1.5 Arial, "Lucida Grande" ,Verdana, "Microsoft YaHei" ,hei; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; }
body { background: #f5f5f5; }
ul, ol { list-style: none; }
.cui-bubble-layer { background: #f2f2f2; border: #bcbcbc 1px solid; border-radius: 3px; }
</style>
</head>
<body>
<ul class="cui-bubble-layer" style="position: absolute; top: 110px; left: 220px;">
<li data-index="0" data-flag="c">價格：￥35</li>
<li data-index="1" data-flag="c">評分：80</li>
<li data-index="2" data-flag="c">級別：5</li>
</ul>
</body>
</html>
這個時候在為其加一個偽類，做點樣式上的調整，便基本實現了，這裡用到了偽類的知識點：
代碼如下:cui-bubble-layer:before {
position: absolute; content: ""; width: 10px; height: 10px; -webkit-transform: rotate(45deg);
background: #f2f2f2;
border-top: #bcbcbc 1px solid;
border-left: #bcbcbc 1px solid;
top: -6px; left: 50%; margin-left: -5px; z-index: 1;
}
這裡設置了一個絕對定位的矩形框，為其兩個邊框設置了值，然後變形偏斜45度形成小三角，然後大家都知道了
代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Blade Demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="telephone=no" name="format-detection" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
body, button, input, select, textarea { font: 400 14px/1.5 Arial, "Lucida Grande" ,Verdana, "Microsoft YaHei" ,hei; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; }
body { background: #f5f5f5; }
ul, ol { list-style: none; }
.cui-bubble-layer { background: #f2f2f2; border: #bcbcbc 1px solid; border-radius: 3px; }
.cui-bubble-layer > li { padding: 5px 10px; }
.cui-bubble-layer:before { position: absolute; content: ""; width: 10px; height: 10px; -webkit-transform: rotate(45deg); background: #f2f2f2; border-top: #bcbcbc 1px solid; border-left: #bcbcbc 1px solid; top: -6px; left: 50%; margin-left: -5px; z-index: 1;</style>
</head>
<body>
<ul class="cui-bubble-layer" style="position: absolute; top: 110px; left: 220px;">
<li data-index="0" data-flag="c">價格：￥35</li>
<li data-index="1" data-flag="c">評分：80</li>
<li data-index="2" data-flag="c">級別：5</li>
</ul>
</body>
</html>
不足與擴展
上面作為基本實現，沒有什麼問題，但是其實際應用場景會有以下不足：
① 基本的ul層級需要一個包裹層，包裹層具有一個up或者down的class，然後在決定那個箭頭是向上還是向下
② 我們這裡不能使用偽類，其原因是，我們的小三角標簽並不是一定在中間，其具有一定滑動的特性，也就是說，這個小三角需要被js控制其左右位置，他需要是一個標簽
根據以上所述，我們的結構似乎應該是這個樣子滴：
代碼如下:
<section class="cui-bubble-layer up-or-down-class">
<i class="cui-icon-triangle"></i>
<ul>
<li data-index="0
