怎样制作泡泡html页⾯,html5+css3⽓泡组件的实现
前⾔
⽓泡组件在实际⼯作中⾮常普遍，⽆论是⽹页中还是app中，⽐如：
我们这⾥所谓⽓泡组件是指列表型⽓泡组件，这⾥就其dom实现，css实现，js实现做⼀个讨论，最后对⼀些细节点做⼀些说明，希望对各位有⽤
⼩钗最近初学CSS，这⾥做⼀个专题，便于⾃⾝CSS提升，⽂章有不少问题与可优化点，请各位指导
组件分类
单由⽓泡组件来说，他仍然属于“弹出层”类组件，也就是说其会具有这些特性：
① 布局为脱离⽂档流
② 可以具有mask蒙版，并且可配置点击蒙版是否关闭的特性
③ 可选的特性有点击浏览器回退关闭组件以及动画的显⽰与隐藏动画特性
其中⽐较不同的是：
① 不是居中定位
② 具有⼀个箭头标识，并且可以设置再上或者在下
③ 因为具有箭头，⽽且这个箭头是相对于⼀个元素的，⼀般意义上我们任务是相对某个按钮，所以说具有⼀个triggerEL
所以单从这⾥论述来说，我们的组件名为BubbleLayer，其应该继承与⼀个通⽤的Layer
但是，就由Layer来说，其最少会具有以下通⽤特性：
① 创建——create
② 显⽰——show
③ 隐藏——hide
④ 摧毁——destroy
⽽以上特性并不是Layer组件所特有的，⽽是所有组件所特有，所以在Layer之上还应该存在⼀个AbstractView的抽象组件⾄此继承关系便出来了，抛开多余的接⼝不看，简单来说是这样的：
组件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
网页设计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度形成⼩三⾓，然后⼤家都知道了
复制代码代码如下:
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
不⾜与扩展
上⾯作为基本实现，没有什么问题，但是其实际应⽤场景会有以下不⾜：
① 基本的ul层级需要⼀个包裹层，包裹层具有⼀个up或者down的class，然后在决定那个箭头是向上还是向下
② 我们这⾥不能使⽤伪类，其原因是，我们的⼩三⾓标签并不是⼀定在中间，其具有⼀定滑动的特性，也就是说，这个⼩三⾓需要被js控制其左右位置，他需要是⼀个标签
根据以上所述，我们的结构似乎应该是这个样⼦滴：
复制代码代码如下:
价格：￥35
评分：80
级别：5
① 根元素上我们可以设置当前应该是up还是down的样式
② i标签根据根元素的up或者down选择是向上还是向下，并且该标签可被js操作
到此，似乎整个组件便⽐较完全了，但是真实的情况却不是如此，怎么说了，上⾯的结构太局限了
该组件需要⼀个容器，这个容器标签应该位于ul之上，这个时候容器内部所装载的dom结构便可以不是ul⽽是其他什么结构了
其次，在⼿机上，我们可视项⽬在4S⼿机上不会超过5个，往往是4个，所以我们应该在其容器上设置类似overflow之类的可滚动属性
组件回归·最终结构
由上所述，基于其是继承⾄Layer的事实，我们可以形成这样的结构：
复制代码代码如下:
价格：￥35
评分：80
级别：5
这个也可以是我们整个弹出层类的基本结构，我们可以在此上做很多扩展，但是这⾥我们不扯太多，单就⽓泡组件做论述
就⽓泡组件，其结构是：
复制代码代码如下:
价格：￥35
评分：80
级别：5
js层⾯的实现
这⾥仍然是采⽤的blade中的那⼀套继承机制，如果有不明⽩⼜有点兴趣的同学请移步：【blade的UI设计】理解前端MVC与分层思想关于模板
因为我们这⼀部分的主题为重构相关，所以我们这⾥的关注点是CSS，我们⾸先⽣成我们的模板：
复制代码代码如下:
这⾥给出了⼏个关键的定制化点：
① 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.datamodel = {
data: [],
wrapperClass: 'cui-bubble-layer',
upClass: 'cui-pop--triangle-up',
downClass: 'cui-pop--triangle-down',
curClass: 'active',
itemStyleClass: '',

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。