bootstrapプラグイン学習-bootstrap.tab.js

まずbootstrap-tabを見てみましょう.jsの構造

var Tab = function ( element ) {} //   
Tab.prototype ={} //      
$.fn.tab = function ( option ){} //jQuery         
$.fn.tab.Constructor = Tab //  jQuery              
$(function () {}) //   

HTML構造

<ul class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab" >  </a></li>
      <li><a href="#profile" data-toggle="tab">  </a></li>
      <li><a href="#messages" data-toggle="tab">  </a></li>
      <li><a href="#settings" data-toggle="tab">  </a></li>

</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">1</div>
  <div class="tab-pane" id="profile">2</div>
  <div class="tab-pane" id="messages">3</div>
  <div class="tab-pane" id="settings">4</div>
</div>

初期化から開始

/*
  *    
  *    data-toggle='tab'       click  
  * */
  $(function () {
    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
      e.preventDefault()
      $(this).tab('show')// jQuery    tab    show，    show  。this   data-toggle   a    
    })
  })

bodyにaタグのclickイベントを傍受させ,その泡立ちを阻止させ,jQueryのプロトタイプメソッドtabを呼び出した.

 /*
  * jQuery         
  * */
  $.fn.tab = function ( option ) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('tab')
      if (!data) $this.data('tab', (data = new Tab(this)))//      
      if (typeof option == 'string') data[option]()//  option   
    })
  }

この構造は以前のいくつかのプラグインとあまり差がありませんが、最後にshowメソッドを実行し、コンストラクタに入ります.

var Tab = function ( element ) {
    this.element = $(element)
  }

オブジェクトをコンストラクタインスタンスのプロパティにカプセル化します.次にshowメソッドを実行します

show: function () {
      var $this = this.element
        , $ul = $this.closest('ul:not(.dropdown-menu)')//       dropdown  ul  
        , selector = $this.attr('data-target')
        , previous
        , $target
      //   a       id
      if (!selector) {
        selector = $this.attr('href')
        selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
      }
      //        ，           
      if ( $this.parent('li').hasClass('active') ) return

      previous = $ul.find('.active a').last()[0]//    active    a    ，         

      $this.trigger({
        type: 'show'
      , relatedTarget: previous
      })

      $target = $(selector)//       jQueryDOM  

      this.activate($this.parent('li'), $ul)//tab   


      this.activate($target, $target.parent(), function () {
        $this.trigger({
          type: 'shown'
        , relatedTarget: previous
        })

      })

ラベルaのdata-targetプロパティまたはhrefに基づいて、対応するidのdomノードが見つかります.最後にactivateメソッドを2回実行しましたが、実際にはaラベルのハイライト表示を制御する方法とdomノードの表示と非表示を制御する方法が推測されます.

/*
    *        
    *           ，       active    ，       。
    *            active    ，     active，      ，          active 。
    *
    * */
  , activate: function ( element, container, callback) {

      var $active = container.find('> .active')
        , transition = callback
            && $.support.transition//      js  ，      。
            && $active.hasClass('fade')
      console.log($active[0])
      function next() {
        $active
          .removeClass('active')
          .find('> .dropdown-menu > .active')
          .removeClass('active')

        element.addClass('active')

        if (transition) {
          element[0].offsetWidth // reflow for transition
          element.addClass('in')
        } else {
          element.removeClass('fade')
        }

        if ( element.parent('.dropdown-menu') ) {
          element.closest('li.dropdown').addClass('active')
        }

        callback && callback()
      }

      transition ?
        $active.one($.support.transition.end, next) :
        next()

      $active.removeClass('in')
    }

論理は比較的に簡単で、一般的に他の同類が表示されない場合に遭遇し、基本的にはこの方法で、classを削除して要求を達成します.しかし、jQuery操作cssでclass切り替えを完了するにはjavascriptのオリジナルメソッドに比べて、どの効率が良いのでしょうか.経験のある園友にも答えてほしい.
また一部cssは,2つのactiveクラスの役割を示している.

/*tab     active  */
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
  color: #555555;
  cursor: default;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;//        
}

/*dom*/

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none; //     
}

.tab-content > .active,
.pill-content > .active {
  display: block; //  active ，    
}

内容は多くなくて、时間はちょうど良くて、以上は私の少しのコードを読む体得で、もし间违いがあれば、指摘して、みんなは共通して学びます.