【HTML5&CSS3进阶学习01】气泡组件的实现

气泡组件在实际工作中非常普遍，无论是网页中还是app中，比如：

成都创新互联服务项目包括神木网站建设、神木网站制作、神木网页制作以及神木网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，神木网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到神木省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

我们这里所谓气泡组件是指列表型气泡组件，这里就其dom实现，css实现，js实现做一个讨论，***对一些细节点做一些说明，希望对各位有用

小钗最近初学CSS，这里做一个专题，便于自身CSS提升，文章有不少问题与可优化点，请各位指导

组件分类

单由气泡组件来说，他仍然属于“弹出层”类组件，也就是说其会具有这些特性：

① 布局为脱离文档流

② 可以具有mask蒙版，并且可配置点击蒙版是否关闭的特性

③ 可选的特性有点击浏览器回退关闭组件以及动画的显示与隐藏动画特性

其中比较不同的是：

① 不是居中定位

② 具有一个箭头标识，并且可以设置再上或者在下

③ 因为具有箭头，而且这个箭头是相对于一个元素的，一般意义上我们任务是相对某个按钮，所以说具有一个triggerEL

所以单从这里论述来说，我们的组件名为BubbleLayer，其应该继承与一个通用的Layer

但是，就由Layer来说，其最少会具有以下通用特性：

① 创建——create

② 显示——show

③ 隐藏——hide

④ 摧毁——destroy

而以上特性并不是Layer组件所特有的，而是所有组件所特有，所以在Layer之上还应该存在一个AbstractView的抽象组件

至此继承关系便出来了，抛开多余的接口不看，简单来说是这样的：

#p#

组件dom层面实现

最简单实现

单从dom实现来说，其实一个简单的ul便可以完成任务

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

当然这里要有相关的css

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

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

 
 
  
  
  
  
  
  
  
    
  
    Blade Demo
  
    
  
    
  
    
  
    
  
      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; }
  
    
  
  
  
  
  
    
  
      价格：￥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;
  
  }

这里设置了一个绝对定位的矩形框，为其两个边框设置了值，然后变形偏斜45度形成小三角，然后大家都知道了

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

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

不足与扩展

上面作为基本实现，没有什么问题，但是其实际应用场景会有以下不足：

① 基本的ul层级需要一个包裹层，包裹层具有一个up或者down的class，然后在决定那个箭头是向上还是向下

② 我们这里不能使用伪类，其原因是，我们的小三角标签并不是一定在中间，其具有一定滑动的特性，也就是说，这个小三角需要被js控制其左右位置，他需要是一个标签

根据以上所述，我们的结构似乎应该是这个样子滴：

① 根元素上我们可以设置当前应该是up还是down的样式

② i标签根据根元素的up或者down选择是向上还是向下，并且该标签可被js操作

到此，似乎整个组件便比较完全了，但是真实的情况却不是如此，怎么说了，上面的结构太局限了

该组件需要一个容器，这个容器标签应该位于ul之上，这个时候容器内部所装载的dom结构便可以不是ul而是其他什么结构了

其次，在手机上，我们可视项目在4S手机上不会超过5个，往往是4个，所以我们应该在其容器上设置类似overflow之类的可滚动属性

组件回归·最终结构

由上所述，基于其是继承至Layer的事实，我们可以形成这样的结构：

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

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

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