无码帝 阅读(85) 评论(0)

先看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属性。

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