html5+css3气_泡组件的实现

前言

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

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

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

组件分类

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

① 布局为脱离文档流

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

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

其中比较不同的是：

① 不是居中定位

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

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

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

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

① 创建——create

② 显示——show

③ 隐藏——hide

④ 摧毁——destroy

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

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

组件dom层面实现最简单实现

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

当然这里要有相关的css

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

代码如下:

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。