怎樣進(jìn)行HTML5及CSS3氣泡組件的實(shí)現(xiàn)

怎樣進(jìn)行HTML5及CSS3氣泡組件的實(shí)現(xiàn)，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、四子王ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的四子王網(wǎng)站制作公司

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

我們這里所謂氣泡組件是指列表型氣泡組件，這里就其dom實(shí)現(xiàn)，css實(shí)現(xiàn)，js實(shí)現(xiàn)做一個(gè)討論，***對(duì)一些細(xì)節(jié)點(diǎn)做一些說明，希望對(duì)各位有用

小釵最近初學(xué)CSS，這里做一個(gè)專題，便于自身CSS提升，文章有不少問題與可優(yōu)化點(diǎn)，請(qǐng)各位指導(dǎo)

組件分類

單由氣泡組件來說，他仍然屬于“彈出層”類組件，也就是說其會(huì)具有這些特性：

① 布局為脫離文檔流

② 可以具有mask蒙版，并且可配置點(diǎn)擊蒙版是否關(guān)閉的特性

③ 可選的特性有點(diǎn)擊瀏覽器回退關(guān)閉組件以及動(dòng)畫的顯示與隱藏動(dòng)畫特性

其中比較不同的是：

① 不是居中定位

② 具有一個(gè)箭頭標(biāo)識(shí)，并且可以設(shè)置再上或者在下

③ 因?yàn)榫哂屑^，而且這個(gè)箭頭是相對(duì)于一個(gè)元素的，一般意義上我們?nèi)蝿?wù)是相對(duì)某個(gè)按鈕，所以說具有一個(gè)triggerEL

所以單從這里論述來說，我們的組件名為BubbleLayer，其應(yīng)該繼承與一個(gè)通用的Layer

但是，就由Layer來說，其最少會(huì)具有以下通用特性：

① 創(chuàng)建——create

② 顯示——show

③ 隱藏——hide

④ 摧毀——destroy

而以上特性并不是Layer組件所特有的，而是所有組件所特有，所以在Layer之上還應(yīng)該存在一個(gè)AbstractView的抽象組件

至此繼承關(guān)系便出來了，拋開多余的接口不看，簡單來說是這樣的：

怎樣進(jìn)行HTML5及CSS3氣泡組件的實(shí)現(xiàn)

組件dom層面實(shí)現(xiàn)

最簡單實(shí)現(xiàn)

單從dom實(shí)現(xiàn)來說，其實(shí)一個(gè)簡單的ul便可以完成任務(wù)

<ul class="cui-bubble-layer" style="position: absolute; top: 110px; left: 220px;"> <li data-index="0" data-flag="c">價(jià)格：￥35</li> <li data-index="1" data-flag="c">評(píng)分：80</li> <li data-index="2" data-flag="c">級(jí)別：5</li> </ul>

當(dāng)然這里要有相關(guān)的css

.cui-bubble-layer {     background: #f2f2f2;     border: #bcbcbc 1px solid;     border-radius: 3px }

至此形成的效果是醬紫滴：

怎樣進(jìn)行HTML5及CSS3氣泡組件的實(shí)現(xiàn)

<!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, h2, h3, h4, h5, h6, h7, 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">價(jià)格：￥35</li>     <li data-index="1" data-flag="c">評(píng)分：80</li>     <li data-index="2" data-flag="c">級(jí)別：5</li>   </ul> </body> </html>

這個(gè)時(shí)候在為其加一個(gè)偽類，做點(diǎn)樣式上的調(diào)整，便基本實(shí)現(xiàn)了，這里用到了偽類的知識(shí)點(diǎn)：

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; }

這里設(shè)置了一個(gè)絕對(duì)定位的矩形框，為其兩個(gè)邊框設(shè)置了值，然后變形偏斜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, h2, h3, h4, h5, h6, h7, 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">價(jià)格：￥35</li>     <li data-index="1" data-flag="c">評(píng)分：80</li>     <li data-index="2" data-flag="c">級(jí)別：5</li>   </ul> </body> </html>

怎樣進(jìn)行HTML5及CSS3氣泡組件的實(shí)現(xiàn)

http://sandbox.runjs.cn/show/9ywitfn8

不足與擴(kuò)展

上面作為基本實(shí)現(xiàn)，沒有什么問題，但是其實(shí)際應(yīng)用場景會(huì)有以下不足：

① 基本的ul層級(jí)需要一個(gè)包裹層，包裹層具有一個(gè)up或者down的class，然后在決定那個(gè)箭頭是向上還是向下

② 我們這里不能使用偽類，其原因是，我們的小三角標(biāo)簽并不是一定在中間，其具有一定滑動(dòng)的特性，也就是說，這個(gè)小三角需要被js控制其左右位置，他需要是一個(gè)標(biāo)簽

根據(jù)以上所述，我們的結(jié)構(gòu)似乎應(yīng)該是這個(gè)樣子滴：

<section class="cui-bubble-layer up-or-down-class">   <i class="cui-icon-triangle"></i>   <ul>     <li data-index="0" data-flag="c">價(jià)格：￥35</li>     <li data-index="1" data-flag="c">評(píng)分：80</li>     <li data-index="2" data-flag="c">級(jí)別：5</li>   </ul> </section>

① 根元素上我們可以設(shè)置當(dāng)前應(yīng)該是up還是down的樣式

② i標(biāo)簽根據(jù)根元素的up或者down選擇是向上還是向下，并且該標(biāo)簽可被js操作

到此，似乎整個(gè)組件便比較完全了，但是真實(shí)的情況卻不是如此，怎么說了，上面的結(jié)構(gòu)太局限了

該組件需要一個(gè)容器，這個(gè)容器標(biāo)簽應(yīng)該位于ul之上，這個(gè)時(shí)候容器內(nèi)部所裝載的dom結(jié)構(gòu)便可以不是ul而是其他什么結(jié)構(gòu)了

其次，在手機(jī)上，我們可視項(xiàng)目在4S手機(jī)上不會(huì)超過5個(gè)，往往是4個(gè)，所以我們應(yīng)該在其容器上設(shè)置類似overflow之類的可滾動(dòng)屬性

組件回歸·最終結(jié)構(gòu)

由上所述，基于其是繼承至Layer的事實(shí)，我們可以形成這樣的結(jié)構(gòu)：

<section class="cui-pop cui-bubble-layer">   <i class="cui-pop-triangle"></i>   <div class="cui-pop-head">   </div>   <div class="cui-pop-body">     <ul>       <li data-index="0" data-flag="c">價(jià)格：￥35</li>       <li data-index="1" data-flag="c">評(píng)分：80</li>       <li data-index="2" data-flag="c">級(jí)別：5</li>     </ul>   </div>   <div class="cui-pop-footer">   </div> </section>

這個(gè)也可以是我們整個(gè)彈出層類的基本結(jié)構(gòu)，我們可以在此上做很多擴(kuò)展，但是這里我們不扯太多，單就氣泡組件做論述

就氣泡組件，其結(jié)構(gòu)是：

<section class="cui-pop cui-bubble-layer">   <i class="cui-pop-triangle"></i>   <div class="cui-pop-body">     <ul>       <li data-index="0" data-flag="c">價(jià)格：￥35</li>       <li data-index="1" data-flag="c">評(píng)分：80</li>       <li data-index="2" data-flag="c">級(jí)別：5</li>     </ul>   </div> </section>

js層面的實(shí)現(xiàn)

這里仍然是采用的blade中的那一套繼承機(jī)制，如果有不明白又有點(diǎn)興趣的同學(xué)請(qǐng)移步：【blade的UI設(shè)計(jì)】理解前端MVC與分層思想

關(guān)于模板

因?yàn)槲覀冞@一部分的主題為重構(gòu)相關(guān)，所以我們這里的關(guān)注點(diǎn)是CSS，我們首先生成我們的模板：

<section class="cui-pop <%=wrapperClass %> <%if(dir == 'up'){ %> <%=upClass %> <% } else { %> <%=downClass %> <% } %>">   <i class="cui-pop-triangle"></i>   <div class="cui-pop-body">     <ul class="cui-pop-list <%=itemStyleClass %>">     <% for(var i = 0, len = data.length; i < len; i++) { %>       <% var itemData = data[i]; %>       <li data-index="<%=i%>" data-flag="c" class="<% if(index == i){ %><%=curClass %><%} %>" >         <%if(typeof itemFn == 'function') { %><%=itemFn.call(itemData) %> <% } else { %><%=itemData.name%><%} %>     <% } %>     </ul>   </div> </section>

這里給出了幾個(gè)關(guān)鍵的定制化點(diǎn)：

① wrapperClass用以添加業(yè)務(wù)團(tuán)隊(duì)定制化的class以改變根元素的class，如此的好處是便于業(yè)務(wù)團(tuán)隊(duì)定制化氣泡組件的樣式

② 給出了項(xiàng)目列表Ul的可定制化className，通用單單只是方便業(yè)務(wù)團(tuán)隊(duì)做樣式改變

③ 默認(rèn)情況下返回的是傳入項(xiàng)目的name字段，但是用戶可傳入一個(gè)itemFn的回調(diào)，定制化返回

以上模板基本可滿足條件，如果不滿足，便可把整個(gè)模板作為參數(shù)傳入了

關(guān)于js實(shí)現(xiàn)

由于繼承的實(shí)現(xiàn)，我們大部分工作已經(jīng)被做了，我們只需要在幾個(gè)關(guān)鍵地方編寫代碼即可

define(['UILayer', getAppUITemplatePath('ui.bubble.layer')], function (UILayer, template) {   return _.inherit(UILayer, {     propertys: function ($super) {       $super();       //html模板       this.template = template;       this.needMask = false;        this.datamodel = {         data: [],         wrapperClass: 'cui-bubble-layer',         upClass: 'cui-pop--triangle-up',         downClass: 'cui-pop--triangle-down',         curClass: 'active',         itemStyleClass: '',         needBorder: true,         index: -1,         dir: 'up'  //箭頭方向默認(rèn)值       };        this.events = {         'click .cui-pop-list>li': 'clickAction'       };        this.onClick = function (data, index, el, e) {         console.log(arguments); //        this.setIndex(index);       };        this.width = null;        //三角圖標(biāo)偏移量       this.triangleLeft = null;       this.triangleRight = null;        this.triggerEl = null;      },      initialize: function ($super, opts) {       $super(opts);     },      createRoot: function (html) {       this.$el = $(html).hide().attr('id', this.id);     },      clickAction: function (e) {       var el = $(e.currentTarget);       var i = el.attr('data-index');       var data = this.datamodel.data[i];       this.onClick.call(this, data, i, el, e);     },      initElement: function () {       this.el = this.$el;       this.triangleEl = this.$('.cui-pop-triangle');       this.windowWidth = $(window).width();     },      setIndex: function (i) {       var curClass = this.datamodel.curClass;       i = parseInt(i);       if (i < 0 || i > this.datamodel.data.length || i == this.datamodel.index) return;       this.datamodel.index = i;        //這里不以datamodel改變引起整個(gè)dom變化了，不劃算       this.$('.cui-pop-list li').removeClass(curClass);       this.$('li[data-index="' + i + '"]').addClass(curClass);     },      //位置定位     reposition: function () {       if (!this.triggerEl) return;       var offset = this.triggerEl.offset();       var step = 6, w = offset.width - step;       var top = 0, left = 0, right;       if (this.datamodel.dir == 'up') {         top = (offset.top + offset.height + 8) + 'px';       } else {         top = (offset.top - this.el.offset().height - 8) + 'px';       }        left = (offset.left + 2) + 'px';        if (offset.left + (parseInt(this.width) || w) > this.windowWidth) {         this.el.css({           width: this.width || w,           top: top,           right: '2px'         });       } else {         this.el.css({           width: this.width || w,           top: top,           left: left         });       }        if (this.triangleLeft) {         this.triangleEl.css({ 'left': this.triangleLeft, 'right': 'auto' });       }       if (this.triangleRight) {         this.triangleEl.css({ 'right': this.triangleRight, 'left': 'auto' });       }     },      addEvent: function ($super) {       $super();       this.on('onCreate', function () {         this.$el.removeClass('cui-layer');         this.$el.css({ position: 'absolute' });       });       this.on('onShow', function () {         this.setzIndexTop(this.el);       });     }    });  });

這里開始調(diào)用的，便可做簡單實(shí)現(xiàn)：

'click .demo1': function (e) {   if (!this.demo1) {     var data = [{ name: '<span class="center">普通會(huì)員</span>' },     { name: '<span class="center">vip</span>' },     { name: '<span class="center">高級(jí)vip</span>' },     { name: '<span class="center">鉆石vip</span>'}];     this.list = new UIBubbleLayer({       datamodel: {         data: data       },       triggerEl: $(e.currentTarget),       width: '150px',       triangleLeft: '20px'     });   }   this.list.show(); }

稍作修改便可形成另一種樣子：

怎樣進(jìn)行HTML5及CSS3氣泡組件的實(shí)現(xiàn)

只不過我們還得考慮這個(gè)場景的發(fā)生，在項(xiàng)目過多過長時(shí)我們?nèi)孕枰鎏幚恚?/p>

怎樣進(jìn)行HTML5及CSS3氣泡組件的實(shí)現(xiàn)

這里有很多辦法可以處理，***個(gè)是直接傳入maxHeight，如果高度超出的話便出現(xiàn)滾動(dòng)條，第二個(gè)是動(dòng)態(tài)在組件內(nèi)部計(jì)算，查看組件與可視區(qū)域的關(guān)系

我們這里還是采用可視區(qū)域計(jì)算吧，于是對(duì)原組件做一些改造，加一個(gè)接口：

this.checkHeightOverflow();

就這一簡單接口其實(shí)可分為幾個(gè)段落的實(shí)現(xiàn)

***個(gè)接口為檢測可視區(qū)域，這個(gè)可以被用戶重寫

isSizeOverflow

第二個(gè)接口是如果可視區(qū)域超出，也就是***個(gè)接口返回true時(shí)的處理邏輯

handleSizeOverflow

考慮到超出的未必是高度，所以這里height改為了Size

當(dāng)然，這里會(huì)存在資源銷毀的工作，所以會(huì)新增一個(gè)hide接口

isSizeOverflow: function () {   if (!this.el) return false;   if (this.el.height() > this.windowHeight * 0.8) return true;   return false; },  handleSizeOverflow: function () {   if (!this.isSizeOverflow()) return;    this.listWrapper.css({     height: (parseInt(this.windowHeight * 0.8) + 'px'),     overflow: 'hidden',     position: 'relative'   });    this.listEl.css({ position: 'absolute', width: '100%' });    //調(diào)用前需要重置位置   this.reposition();    this.scroll = new UIScroll({     wrapper: this.listWrapper,     scroller: this.listEl   }); },  checkSizeOverflow: function () {   this.handleSizeOverflow(); },  addEvent: function ($super) {   $super();   this.on('onCreate', function () {     this.$el.removeClass('cui-layer');     this.$el.css({ position: 'absolute' });   });   this.on('onShow', function () {      //檢查可視區(qū)域是否超出;     this.checkSizeOverflow();     this.setzIndexTop(this.el);   });   this.on('onHide', function () {     if (this.scroll) this.scroll.destroy();   }); }

怎樣進(jìn)行HTML5及CSS3氣泡組件的實(shí)現(xiàn)

到此，我們的功能也基本結(jié)束了，***實(shí)現(xiàn)一個(gè)定制化一點(diǎn)的功能，將我們的氣泡組件變成黑色：

怎樣進(jìn)行HTML5及CSS3氣泡組件的實(shí)現(xiàn)

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

分享名稱：怎樣進(jìn)行HTML5及CSS3氣泡組件的實(shí)現(xiàn)
標(biāo)題網(wǎng)址：http://m.rwnh.cn/article28/igpocp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、App設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、搜索引擎優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

怎樣進(jìn)行HTML5及CSS3氣泡組件的實(shí)現(xiàn)