bootstrap插件学习-bootstrap.collapse.js
先看bootstrap.collapse.js的结构
var Collapse = function ( element, options ){} // 构造器 Collapse.prototype = {} //构造器的原型 $.fn.collapse = function ( option ){} //jQuery原型上自定义的方法 $.fn.collapse.defaults = {} // 默认参数 $.fn.collapse.Constructor = Collapse // 重写jQuery原型自定义方法的构造器名 $(function (){}) // 初始化
HTML结构
<div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 国土问题 </a> </div> <div id="collapseOne" class="accordion-body collapse" style="height: 0px;"> <div class="accordion-inner"> 前一段时间一个段子说，某国的网民在因国土问题与中国网民争吵时说，我要打到北京，中国的网民非常淡然地回应，就你那经济水平，交得起过路费吗？这两天新的段子说，李白要是活在今天的话，估计一大半以上他的诗根本写不出来，因为名山大川的门票他根本买不起。 </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 门票问题 </a> </div> <div id="collapseTwo" class="accordion-body collapse" style="height: 0px;"> <div class="accordion-inner"> 目前，中国半数5A级景区门票达到100元，黄山门票10年来由80元涨至230元。山东曲阜称，与同类景区相比收费较低，仅收150元，不涨票价就丢身价。曲阜的孔庙、孔府和孔林，年收入1.5亿元左右，全部上缴了地方财政，但景区维护成本从未公开。 </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> 超生罚款 </a> </div> <div id="collapseThree" class="accordion-body in" style="height: auto;"> <div class="accordion-inner"> 学者杨支柱因生二胎被取消公职，并罚款24万余元。他称，计生罚款以前直接叫超生罚款，入世后改成"社会抚养费"。根据9省市超生罚款的平均数，全国31个省市每年征收的超生罚款可高达279亿元。其中大城市将该收入上缴财政，而地方则分配混乱，部分罚款去向成谜。 </div> </div> </div> </div>
我们先从初始化开始
/* * 初始化 * */ $(function () { $('body').on('click.collapse.data-api', '[data-toggle=collapse]', function ( e ) { var $this = $(this), href , target = $this.attr('data-target')//标题没有data-target属性，阻止冒泡 || e.preventDefault() || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7 //根据点击的标题，获取相对应内容的id , option = $(target).data('collapse') ? 'toggle' : $this.data()//初次执行时$(target)没有collapse属性 $(target).collapse(option) }) })
body监听了所有拥有data-toggle='collapse'属性的标签，为它们绑定了click事件，在HTML中由于标签上都没有data-target属性，所以该事件被阻止冒泡，最后获得点击标题框所对应的内容div的id。
当我们刷新页面，第一次点击时，由于$(target).data('collapse')为空，所以option为$this.data()的内容，主要有{parent:'#accordion2',toggle:'collapse'}，下面执行jQuery对象上的collapse方法
/* * jQuery原型上自定义的方法 * */ $.fn.collapse = function ( option ) { return this.each(function () { var $this = $(this) , data = $this.data('collapse') , options = typeof option == 'object' && option if (!data) $this.data('collapse', (data = new Collapse(this, options)))//实例化构造器 if (typeof option == 'string') data[option]()//支持传入方法名，执行该方法 }) }
此时调用collapse方法的是你点击标题框所对应的内容div，这里我们需要初始化构造器。因为option此时为对象，所以最后一句不执行。
/* * 构造器 * */ var Collapse = function ( element, options ) { this.$element = $(element) this.options = $.extend({}, $.fn.collapse.defaults, options) if (this.options["parent"]) { this.$parent = $(this.options["parent"])//获取整个控件的jQuery对象 } this.options.toggle && this.toggle()//实例化执行原型上的toggle方法 }
这里this.$parent指的是整个控件的div，id为'#accordion2'，执行原型上的toggle方法
toggle: function () { this[this.$element.hasClass('in') ? 'hide' : 'show']()//实例化初次执行show方法 }
这里，查看内容div上是否有in类，其实bootstrap.collapse插件，在显示的内容上，会有in类，不显示的内容上会collapse类，不过，之前我们先了解。这个插件刷新时，第三块内容显示，ok，我们点击第一块试一试。，那么第一块对应的内容div就没有in类，所以我们执行show方法，在进入方法之前，我们可以想想下面插件需要完成的步骤：1。将之前显示的隐藏了 2.显示被点击的
/* * 显示方法 * */ , show: function () { var dimension = this.dimension() , scroll = $.camelCase(['scroll', dimension].join('-')) //'scrollHeight' , actives = this.$parent && this.$parent.find('.in')//刷新时，显示内容的div，默认设置的 , hasData if (actives && actives.length) { //console.log(actives.data('collapse')); hasData = actives.data('collapse') actives.collapse('hide')//将开始显示的内容隐藏了，调用hide方法。 hasData || actives.data('collapse', null) } this.$element[dimension](0)//将高度清0，完成隐藏效果 this.transition('addClass', 'show', 'shown') this.$element[dimension](this.$element[0][scroll])//将当前点击的标签相关联的内容的高度恢复，结果显示效果 }
查看show方法之前，我们先看dimension方法
dimension: function () { var hasWidth = this.$element.hasClass('width') return hasWidth ? 'width' : 'height' }
主要返回字符串，这个插件主要是上下显示隐藏，也可以左右隐藏。这里我们返回height
scroll = $.camelCase(['scroll', dimension].join('-')) //'scrollHeight'
目的将scroll与height两个字符串合并成scrollHeight。这种方式，我们可以了解一下。
actives = this.$parent && this.$parent.find('.in')//刷新时，显示内容的div，默认设置的
找到页面上目前显示的内容对象，经过if判断之后，这个内容对象调用了jQuery原型上的collapse方法。参数为hide，我们再次进入jQuery原型方法
/* * jQuery原型上自定义的方法 * */ $.fn.collapse = function ( option ) { return this.each(function () { var $this = $(this) , data = $this.data('collapse') , options = typeof option == 'object' && option if (!data) $this.data('collapse', (data = new Collapse(this, options)))//实例化构造器 if (typeof option == 'string') data[option]()//支持传入方法名，执行该方法 }) }
这里的$this.data('collapse')是没有，这个跟之前的要区分开来，之前的是你点击的想让它显示的内容，而现在这个是页面上原来就显示的内容。所以再一次的实例化。options内容为false。别忘了，执行完初始化之后再执行data[option]，先看构造器
/* * 构造器 * */ var Collapse = function ( element, options ) { this.$element = $(element) this.options = $.extend({}, $.fn.collapse.defaults, options) if (this.options["parent"]) { this.$parent = $(this.options["parent"])//此时已经没有该对象了 } this.options.toggle && this.toggle()//实例化执行原型上的toggle方法 }
记住此时实例化的对象是当前显示的div内容。假如我们点击的是第一个标题对应的div，默认显示是第三个div，那这时实例化的对象就是第三个div。下面的代码分析，我们就这套看。
toggle: function () { this[this.$element.hasClass('in') ? 'hide' : 'show']()//实例化初次执行show方法 }
此时的this.$element上已经拥有了in类，毕竟它是默认显示的嘛，执行原型上的hide方法。
/* * 隐藏方法 * */ , hide: function () { var dimension = this.dimension() this.reset(this.$element[dimension]()) this.transition('removeClass', 'hide', 'hidden') this.$element[dimension](0)//将高度清0 }
dimension这个就不重复说了，进入reset方法
reset: function ( size ) { var dimension = this.dimension() this.$element.removeClass('collapse')[dimension](size || 'auto')[0].offsetWidth//这句蛋疼 this.$element[size ? 'addClass' : 'removeClass']('collapse')//给要隐藏的内容div加上collapse样式 return this }
想一想之前我们点击第一个div，目的是让它显示，隐藏其他div。这边调用reset方法的是div3，根据它的高度，增加collapse，前面我们也说了，bootstrap.collapse插件在隐藏的div上都加有collapse类，显示的div上都有in类，因为reset方法是根据高度来判断是否要添加class，所以在代码后面也肯定会将高度清0的，为的是依靠判断再次删去class，但是感觉这个方式太繁琐，通过高度判断，删减css让div隐藏，在将div的高度清0，再通过高度判断，向div上删减css样式，使其显示，最后在恢复div的高度。如此反复。
不多废话，进入transition方法
transition: function ( method, startEvent, completeEvent ) { //'removeClass','hide','hidden' var that = this , complete = function () { if (startEvent == 'show') that.reset() that.$element.trigger(completeEvent) } this.$element .trigger(startEvent) [method]('in')//隐藏内容，并去掉in类 $.support.transition && this.$element.hasClass('collapse') ? this.$element.one($.support.transition.end, complete) : complete() }
果不其然，就是如此实现的。
此时hide方法执行完毕，下面执行jQuery原型上的最后一句代码
if (typeof option == 'string') data[option]()//支持传入方法名，执行该方法
如果你们还记得，这个data，依旧是与div3有关的实例化对象。再次执行原型上的hide方法，这是这个插件我认为蛋疼的一个地方，插件的API没有很好的跟jQuery原型绑定上，仅仅依靠调用jQuery原型方法，实例化构造器去调用原型方法。导致jQuery队形不能直接使用原型上的方法，作者这样做的原因也有可能是防止自己在原型上定义的方法名和jQuery方法重名。遭到覆盖。不过换个名字，可能就解决了么。。。
再执行一遍hide，就不演示了，ok整个actives.collapse('hide')执行完毕，继续看show方法。
hasData || actives.data('collapse', null)//将data的collapse再次重新清空
将所有与actives有关的记忆全部删除。
this.$element[dimension](0)//将高度清0，
this.transition('addClass', 'show', 'shown') this.$element[dimension](this.$element[0][scroll])//将当前点击的标签相关联的内容的高度恢复，结果显示效果
上面的代码，先清空div1的高度，在通过transition方法加入in类，最后恢复div1的高度，蛋疼。。
上述主要描述了div3显示，点击div1的情景，如果我们要点击div3，让它自己隐藏，让我们来看看代码过程。
我们点击div3，进入jQuery的collapse方法
/* * jQuery原型上自定义的方法 * */ $.fn.collapse = function ( option ) { return this.each(function () { var $this = $(this) , data = $this.data('collapse') , options = typeof option == 'object' && option if (!data) $this.data('collapse', (data = new Collapse(this, options)))//实例化构造器 if (typeof option == 'string') data[option]()//支持传入方法名，执行该方法 }) }
进入构造器
/* * 构造器 * */ var Collapse = function ( element, options ) { this.$element = $(element) this.options = $.extend({}, $.fn.collapse.defaults, options) if (this.options["parent"]) { this.$parent = $(this.options["parent"])//获取整个控件的jQuery对象 } this.options.toggle && this.toggle()//实例化执行原型上的toggle方法 }
好吧，进入toggle方法
toggle: function () { this[this.$element.hasClass('in') ? 'hide' : 'show']()//实例化初次执行show方法 }
此时对象本身拥有in类，所以执行hide方法，ok，搞定。
其实这个插件还有几种情况，这里就不一一演示了。
没有很好的绑定jQuery原型，导致调用方法，实例化两次构造器，使得我们走代码的流程比较多，有点耐心，应该没问题。
内容不多，时间刚好，以上是我的一点读码体会，如有错误，请指出，大家共通学习。
