• 网站建设
• 网站制作
• 建站案例
• 解决方案
• 建站资讯
• 关于我们
• 联系小谭

 价格：￥35 评分：80 级别：5 

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

                         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; }             价格：￥35     评分：80     级别：5     

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

                         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;          价格：￥35     评分：80     级别：5     

      
     价格：￥35     评分：80     级别：5   
 

这个也可以是我们整个弹出层类的基本结构，我们可以在此上做很多扩展，但是这里我们不扯太多，单就气泡组件做论述

就气泡组件，其结构是：

           
       价格：￥35       评分：80       级别：5     
    

js层面的实现

这里仍然是采用的blade中的那一套继承机制，如果有不明白又有点兴趣的同学请移步：【blade的UI设计】理解前端MVC与分层思想

关于模板

因为我们这一部分的主题为重构相关，所以我们这里的关注点是CSS，我们首先生成我们的模板：

 <%if(dir == 'up'){ %> <%=upClass %> <% } else { %> <%=downClass %> <% } %>">           ">     <% for(var i = 0, len = data.length; i < len; i++) { %>       <% var itemData = data[i]; %>       " data-flag="c" class="<% if(index == i){ %><%=curClass %><%} %>" >         <%if(typeof itemFn == 'function') { %><%=itemFn.call(itemData) %> <% } else { %><%=itemData.name%><%} %>     <% } %>         

这里给出了几个关键的定制化点：

① wrapperClass用以添加业务团队定制化的class以改变根元素的class，如此的好处是便于业务团队定制化气泡组件的样式

② 给出了项目列表Ul的可定制化className，通用单单只是方便业务团队做样式改变

③ 默认情况下返回的是传入项目的name字段，但是用户可传入一个itemFn的回调，定制化返回

以上模板基本可满足条件，如果不满足，便可把整个模板作为参数传入了

关于js实现

由于继承的实现，我们大部分工作已经被做了，我们只需要在几个关键地方编写代码即可

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'  //箭头方向默认值       };        this.events = {         'click .cui-pop-list>li': 'clickAction'       };        this.onClick = function (data, index, el, e) {         console.log(arguments); //        this.setIndex(index);       };        this.width = null;        //三角图标偏移量       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改变引起整个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);       });     }    });  });

这里开始调用的，便可做简单实现：

'click .demo1': function (e) {   if (!this.demo1) {     var data = [{ name: '普通会员' },     { name: 'vip' },     { name: '高级vip' },     { name: '钻石vip'}];     this.list = new UIBubbleLayer({       datamodel: {         data: data       },       triggerEl: $(e.currentTarget),       width: '150px',       triangleLeft: '20px'     });   }   this.list.show(); }

稍作修改便可形成另一种样子：

只不过我们还得考虑这个场景的发生，在项目过多过长时我们仍需要做处理：

这里有很多办法可以处理，***个是直接传入maxHeight，如果高度超出的话便出现滚动条，第二个是动态在组件内部计算，查看组件与可视区域的关系

我们这里还是采用可视区域计算吧，于是对原组件做一些改造，加一个接口：

this.checkHeightOverflow();

就这一简单接口其实可分为几个段落的实现

***个接口为检测可视区域，这个可以被用户重写

isSizeOverflow

第二个接口是如果可视区域超出，也就是***个接口返回true时的处理逻辑

handleSizeOverflow

考虑到超出的未必是高度，所以这里height改为了Size

当然，这里会存在资源销毁的工作，所以会新增一个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%' });    //调用前需要重置位置   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 () {      //检查可视区域是否超出;     this.checkSizeOverflow();     this.setzIndexTop(this.el);   });   this.on('onHide', function () {     if (this.scroll) this.scroll.destroy();   }); }

到此，我们的功能也基本结束了，***实现一个定制化一点的功能，将我们的气泡组件变成黑色：

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。