bootstrap插件学习-bootstrap.collapse.js

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原型，导致调用方法，实例化两次构造器，使得我们走代码的流程比较多，有点耐心，应该没问题。

内容不多，时间刚好，以上是我的一点读码体会，如有错误，请指出，大家共通学习。