html5+css3气泡组件的实现
摘要:前言气泡组件在实际工作中非常普遍,无论是网页中还是app中,比如:我们这里所谓气泡组件是指列表型气泡组件,这里就其dom实现,css实现,j...
前言
气泡组件在实际工作中非常普遍,无论是网页中还是app中,比如:
我们这里所谓气泡组件是指列表型气泡组件,这里就其dom实现,css实现,js实现做一个讨论,最后对一些细节点做一些说明,希望对各位有用
小钗最近初学CSS,这里做一个专题,便于自身CSS提升,文章有不少问题与可优化点,请各位指导
组件分类
单由气泡组件来说,他仍然属于“弹出层”类组件,也就是说其会具有这些特性:
① 布局为脱离文档流
② 可以具有mask蒙版,并且可配置点击蒙版是否关闭的特性
③ 可选的特性有点击浏览器回退关闭组件以及动画的显示与隐藏动画特性
其中比较不同的是:
① 不是居中定位
② 具有一个箭头标识,并且可以设置再上或者在下
③ 因为具有箭头,而且这个箭头是相对于一个元素的,一般意义上我们任务是相对某个按钮,所以说具有一个triggerEL
所以单从这里论述来说,我们的组件名为BubbleLayer,其应该继承与一个通用的Layer
但是,就由Layer来说,其最少会具有以下通用特性:
① 创建——create
② 显示——show
③ 隐藏——hide
④ 摧毁——destroy
而以上特性并不是Layer组件所特有的,而是所有组件所特有,所以在Layer之上还应该存在一个AbstractView的抽象组件
至此继承关系便出来了,抛开多余的接口不看,简单来说是这样的:
组件dom层面实现最简单实现
单从dom实现来说,其实一个简单的ul便可以完成任务
代码如下:
【html5+css3气泡组件的实现】相关文章:
上一篇:
HTML5中drawImage用法分析
相关阅读
网友关注
网友最新关注视频
- 六年级英语下册上海牛津版教材讲解 U1单词
- 沪教版牛津小学英语(深圳用) 四年级下册 Unit 7
- 外研版英语七年级下册module1unit3名词性物主代词讲解
- 【部编】人教版语文七年级下册《过松源晨炊漆公店(其五)》优质课教学视频+PPT课件+教案,辽宁省
- 【部编】人教版语文七年级下册《逢入京使》优质课教学视频+PPT课件+教案,安徽省
- 【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案,湖北省
- 七年级英语下册 上海牛津版 Unit5
- 第五单元 民族艺术的瑰宝_15. 多姿多彩的民族服饰_第二课时(市一等奖)(岭南版六年级上册)_T129830
- 北师大版数学四年级下册3.4包装
- 北师大版小学数学四年级下册第15课小数乘小数一
精品推荐