bootstrap插件学习-bootstrap.dropdown.js

bootstrap插件学习-bootstrap.dropdown.js

先看bootstrap.dropdown.js的结构

var toggle = '[data-toggle="dropdown"]'//属性标记
Dropdown = function(){} //构造器
Dropdown.prototype = {} // 构造器的原型
function clearMenus() // 自定义方法
$.fn.dropdown = function ( option ){}//jQuery原型上的自定义方法
$.fn.dropdown.Constructor = Dropdown //重写方法的构造函数名
$(function(){}) //默认初始化执行

HTML结构

<ul class="nav nav-pills">
      <li><a href="#">规则的链接</a></li>
      <li class="dropdown" id="menutest1">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#menutest1">
          下拉项
          <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">动作</a></li>
          <li><a href="#">另一个动作</a></li>
          <li><a href="#">其他</a></li>
          <li class="divider"></li>
          <li><a href="#">被间隔的链接</a></li>
        </ul>
      </li>
      <li class='active'>
        <a data-toggle="dropdown" href="#menutest1">点击我看看</a>
      </li>
    </ul>

从初始化即时函数开始

/*
  * 默认初始化执行
  * 初始化时，给html和body分别加入监听事件click，html这触发clearMenus方法，body则让toggle对象触发Dropdown原型上的方法
  * */
  $(function () {
    $('html').on('click.dropdown.data-api', clearMenus)
    $('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
  })

这里需要注意事件的冒泡，一般我们点击页面上的一个按钮(或者一个可见的标签时)时，现在你点击的这个标签上先触发事件，如果你这个标签上有事件的话，触发完之后，它会继续向上冒泡，到其父节点，看是否有绑定事件，接着依次向上冒泡，直到文档节点，拿上面的代码讲，我们如果点击了页面中的按钮，先是body上的事件触发，然后则是html上的事件触发。

我们先从body的事件开始，body的监听事件绑定到拥有data-toggle='dropdown'属性的标签上，根据HTML的结构，我们可以清楚的看到有两个标签拥有事件，下面进入该事件Dropdown原型上的toggle方法

//构造器的原型
  Dropdown.prototype = {

    constructor: Dropdown

  , toggle: function ( e ) {
      var $this = $(this)
        , selector = $this.attr('data-target')
        , $parent
        , isActive;
      /*
      * 如果没有data-target属性，则使用a标签的href属性，根据正则取到其#和#以后的字符串，放入jQuery容器中，
      * 变为jQuery对象。
      * */
      if (!selector) {
        selector = $this.attr('href')
        selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
      }

      $parent = $(selector)
      //console.log($parent);
      //如果没写，则自动去获取其父节点
      $parent.length || ($parent = $this.parent())

      isActive = $parent.hasClass('open')

      clearMenus()
      /*
      * 如果li标签上没有open类则加上open类
      * */
      !isActive && $parent.toggleClass('open')

      return false//阻止冒泡
    }

  }

这里，方法先判断点击标签是否拥有data-target属性，如果没有则需要正则去解析href，两种方法的目的就是为了得到与这个标签相关联控制下拉框的li，为什么不直接找到下拉框信息的ul，原因在bootstrap.css里，在此之前，我们先进入clearMenus方法看一下。

  //自定义方法
    /*
    * 根据HTML结构，我们举例，$(toggle)为a标签的jQuery对象，
    * */
  function clearMenus() {
    $(toggle).parent().removeClass('open')//如果点击文档，则执行将li标签去除open类，其实这个open类也是个标记，我们可以利用，便于扩展
  }

清除两个按钮的父节点的open类，这里的逻辑是这样的。

如果页面有两个按钮控制下拉框显示和隐藏，先判断我们所点的按钮的父节点是否有open属性，然后清空所有按钮的父节点属性，然后在给所点按钮的父节点加上open属性。至于为啥呢么加上open就能达到效果，看bootstrap.css

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;/*dropdown-menu开始为隐藏的*/
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.open {
  *z-index: 1000;
}

.open > .dropdown-menu {
  display: block;/*加入open类，之后变为显示*/
}

这种根据css规则去渲染页面，而不通过js查询style属性修改css样式，感觉前者的效率会更高一些。在bootstrap插件中，很多情况都是采用这种方式，到时候看到我们还需要留意。

之后，你可以选择点击本身按钮(或者是其他按钮)关闭，或者点击文档关闭，都是可以的。两种方法本身都是执行了clearMenus方法。清除了open属性。

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