正文
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原型，导致调用方法，实例化两次构造器，使得我们走代码的流程比较多，有点耐心，应该没问题。
内容不多，时间刚好，以上是我的一点读码体会，如有错误，请指出，大家共通学习。
