bootstrap插件思路整理

知识有时也需温故知新嘛,本次做一次bs插件梳理。

$.support.transition

通过判断自定义元素是否支持WebkitTransition、MozTransition、OTransition和transition来判断当前浏览器是否支持transition这个css3属性

Modal

  1. 从UI功能角度来说,点击某个元素来触发弹出一个对话框。在插件第一次加载的时候,用body监听所有data-toggle="modal"属性元素。一来达到事件绑定的目的,而来为后续异步加入同属性元素做准备。
  2. 一个对话框就对应需要将其关闭的功能,modal实现是将改方法放在构造器中去实现,一来每个modal都有自己独立的关闭系统,互相不冲突。二来对于原型继承的方式,如何能让每个实例拥有属于自己的一片天。选用构造器而不是原型中为他们布置,提供了一套不错的思路。

scrollspy

  1. 页面加载完成之后为当前页面上面所有拥有data-spy="scroll"属性的元素执行scrollspy方法,实际是进行初始化构建。
  2. 从UI功能角度来说,scrollspy分为两个部分:其一、点击上面导航栏里面的元素,能够快速链接到对应的内容;其二、滚动侧边栏,可以让对应的导航栏标题高亮。直观感受这两者必须要存在某种联系,制作这类UI插件则需要从这两者联系出发。
  3. scrollspy提供了一种关联思路:通过html属性关联,导航栏里面拥有内容部分头部的id哈希值。而内容框则拥有导航栏的id哈希值。其他解析工作交给插件去完成。
  4. 在scrollspy的构造器部分依然为导航栏绑定click事件,为侧边栏绑定了scroll事件。滚动侧边栏,则是让滚动的高度与内容框内具体内容距离父元素的高度进行比较,进而得出让导航栏的哪个元素高亮。
  5. 我们可以看到其中一个问题,就是采用a标签链接的方式,会对scroll造成两次触发。同时也会修改url。撇开修改url,这也是如此关联的一种通病了。

tab

  1. tab和scrollspy的UI展现类似,对于导航栏和内容框的关联关系也是使用html属性id哈希值进行关联。
  2. 高亮部分有两个:导航栏;内容框。
  3. 让之前高亮的元素(拥有active类)去掉高亮,让需要高亮的元素进行高亮操作(添加active类)。

tooltip

  1. 作为一种小型UI插件,tooltip没有默认初始化步骤,要使用的时候需要开发人员自行调用。
  2. 在Tooltip构造器中可以看出此时的构造器已经充当了一个原型方法init的启动器。对于更多事件的绑定与监听则放在原型init方法里面。较之modal和scrollspy,传入实例中独立的元素来达到在原型方法里绑定自己独立的事件,可以看到这种写法,相当于将构造器的绑定方法进行了一层封装,并将封装内容塞在原型里面,使得构造器更加苗条。
  3. 此插件另外一个核心内容就是让提示定位到具体元素上面。从定位元素获取offsetWidth、offsetHeight和相对视口的top和left再去定位提示元素。

collapse

  1. 从UI功能来讲,折叠的使用时非常广泛地,折叠方式也是多种多样的。bs一系列插件在关联关系的处理上基本一致。
  2. 使用高度判断是否添加类,相当繁琐,推荐collapse的做法跟tab基本是一致的。

carousel

  1. 轮播插件式比较依赖结构和样式的。
  2. 构造器中为元素绑定mouseenter和mouseleave事件。
  3. 轮播存在prev、next、to等操作。carousel将三种操作抽出公共的slide方法进行处理。
  4. 关于pause和cycle操作,基本采用清除定时器和重启定时器的方式完成。

其他bs的插件并不常用,这里没有列出。

读源码,角度不同,获取收获也不同吧。

上一篇:meso-四(4-N十四胺基磺酰苯基)四苯并卟啉及其铁TTASPTBPFe、钴TTASPTBPCo、镍TTASPTBPNi、锌TTASPTBPZn的配合物-化学试剂


下一篇:SpringCloud断路器(Hystrix)和服务降级案列