bootstrap插件思路整理

标签：style   io   ar   color   使用   sp   on   问题   bs   

  知识有时也需温故知新嘛，本次做一次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的插件并不常用，这里没有列出。

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

bootstrap插件思路整理

标签：style   io   ar   color   使用   sp   on   问题   bs   

原文地址：http://www.cnblogs.com/wumadi/p/4130670.html