热门关键字:
jquery > jquery教程 > jquery教程 > html css3 向上气泡,html5+css3气泡组件的实现

html css3 向上气泡,html5+css3气泡组件的实现

354
作者:管理员
发布时间:2021/8/12 19:12:40
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=5278
  前言


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


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


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


  组件分类


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


  ① 布局为脱离文档流


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


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


  其中比较不同的是:


  ① 不是居中定位


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


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


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


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


  ① 创建——create


  ② 显示——show


  ③ 隐藏——hide


  ④ 摧毁——destroy


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




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐