日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 

  
  

  
  
價(jià)格：￥35
  
  
評(píng)分：80
  
  
級(jí)別：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, 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; }
  
  
  
  
  

  
  

  
  
  
  
  
    價(jià)格：￥35
  
  
    評(píng)分：80
  
  
    級(jí)別：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, 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;
  
  

  
  

  
  
  
  
  
    價(jià)格：￥35
  
  
    評(píng)分：80
  
  
    級(jí)別：5
  
  
  
  
  

  
  

 
 

 
 

  
  

  
  
  
  
  
  

  
  
    價(jià)格：￥35
  
  
    評(píng)分：80
  
  
    級(jí)別：5
  
  
  
  
  

 
 

 
 

  
  

  
  
  
  
  
  
  
  
    

  
  
      價(jià)格：￥35
  
  
      評(píng)分：80
  
  
      級(jí)別：5
  
  
    
  
  
  

 
 

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

這里給出了幾個(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)用的，便可做簡(jiǎn)單實(shí)現(xiàn)：

 
 

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

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

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

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

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

  
 

   
  
this.checkHeightOverflow();
  
 

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

***個(gè)接口為檢測(cè)可視區(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();
   
  
  });
   
  
}
  
 

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

結(jié)語(yǔ)

今天的學(xué)習(xí)到此為止，因?yàn)樾♀Ocss也算是初學(xué)，若是文中有誤，請(qǐng)?zhí)岢?/p>

該組件的動(dòng)畫以來(lái)我準(zhǔn)備做到Layer基類上，而是會(huì)介紹css3的動(dòng)畫技術(shù)，這里便不介紹了

下一期，我們就mobile的整體布局，以及header組件的實(shí)現(xiàn)做說(shuō)明學(xué)習(xí)

代碼地址：https://github.com/yexiaochai/cssui/tree/gh-pages

demo地址：http://yexiaochai.github.io/cssui/demo/debug.html#bubble.layer