bootstrap源码学习与示例:bootstrap-collapse

这次说的是手风琴组件,但是bootstrap的实现有点奇怪,CSS中的类名以accordion为前缀,JS里面的处理组件与相关方法为collapse。

HTML结构以下:类名accordion的DIV包含N个类名为accordion-group的DIV,每组又分两部分accordion-heading与accordion-body。accordion-heading包含触发用的accordion-toggle,accordion-body里的accordion-inner才是用于放内容的。

       <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>

与其他组件一样,只要引用它就能使用了。但绑定回调时,要绑定.accordion-body之上。感觉bootstrap的官方教程做得不太好,没有统一要绑定事件的类名,让人一看就知道绑在那里。不过要用户写HTML感觉不太好。

!function ($) {

    "use strict"; // jshint ;_;


    /* COLLAPSE PUBLIC CLASS DEFINITION
  * ================================ */

    var Collapse = function (element, options) {
        this.$element = $(element)//对应 accordion-body
        this.options = $.extend({}, $.fn.collapse.defaults, options)

        if (this.options.parent) {
            this.$parent = $(this.options.parent)
        }

        this.options.toggle && this.toggle()
    }

    Collapse.prototype = {

        constructor: Collapse

        ,
        dimension: function () {
            var hasWidth = this.$element.hasClass('width')
            return hasWidth ? 'width' : 'height'
        }

        ,
        show: function () {
            var dimension
            , scroll
            , actives
            , hasData

            if (this.transitioning) return

            dimension = this.dimension()
            //如果没有指明width类名
            scroll = $.camelCase(['scroll', dimension].join('-'))//求得scrollWidth 或scrollHeight
            //找到这个手风琴组件的所有展开的面板
            actives = this.$parent && this.$parent.find('> .accordion-group > .in')
            //然后合上它们
            if (actives && actives.length) {
                hasData = actives.data('collapse')
                if (hasData && hasData.transitioning) return
                actives.collapse('hide')//合上它们,并削去它们的实例
                hasData || actives.data('collapse', null)
            }
            //让当前面板的高度或宽度为零
            this.$element[dimension](0)
            //开始动画与触发事件
            this.transition('addClass', $.Event('show'), 'shown')

            $.support.transition && this.$element[dimension](this.$element[0][scroll])
        }

        ,
        hide: function () {
            var dimension
            if (this.transitioning) return
            dimension = this.dimension()
            this.reset(this.$element[dimension]())
            this.transition('removeClass', $.Event('hide'), 'hidden')
            this.$element[dimension](0)
        }

        ,
        reset: function (size) {
            var dimension = this.dimension()

            this.$element
            .removeClass('collapse')
            [dimension](size || 'auto')//还原为原来的大小
            [0].offsetWidth

            this.$element[size !== null ? 'addClass' : 'removeClass']('collapse')

            return this
        }

        ,
        transition: function (method, startEvent, completeEvent) {
            var that = this
            , complete = function () {
                if (startEvent.type == 'show') that.reset()
                that.transitioning = 0
                that.$element.trigger(completeEvent)
            }

            this.$element.trigger(startEvent)

            if (startEvent.isDefaultPrevented()) return

            this.transitioning = 1
            //添加或移除类名in
            this.$element[method]('in')

            $.support.transition && this.$element.hasClass('collapse') ?
            this.$element.one($.support.transition.end, complete) :
            complete()
        }

        ,
        toggle: function () {//最重要的方法
            this[this.$element.hasClass('in') ? 'hide' : 'show']()
        }

    }


    /* COLLAPSE PLUGIN DEFINITION
  * ========================== */

    var old = $.fn.collapse

    $.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]()
        })
    }

    $.fn.collapse.defaults = {
        toggle: true
    }

    $.fn.collapse.Constructor = Collapse


    /* COLLAPSE NO CONFLICT
  * ==================== */

    $.fn.collapse.noConflict = function () {
        $.fn.collapse = old
        return this
    }


    /* COLLAPSE DATA-API
  * ================= */

    $(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) {
        var $this = $(this), href
        , target = $this.attr('data-target') //取得它要展开或折叠的区域,1通过'data-target'
        || e.preventDefault() //2通过href
        || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
        , option = $(target).data('collapse') ? 'toggle' : $this.data()
        $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed')//?在CSS中没有看到此类名
        $(target).collapse(option)//初始化手风琴 bootstrap有个特点,都是点击时才开始初始化组件
    })

}(window.jQuery);

引入的less文件为accordion.less

bootstrap的手风琴只能以垂直形式出现。

你可能感兴趣的:(bootstrap)