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

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

bootstrap插件学习-bootstrap.dropdown.js的更多相关文章

  1. bootstrap插件学习-bootstrap.modal.js

    bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...

  2. bootstrap插件学习-bootstrap.scrollspy.js

    先看bootstrap.dropdown.js的结构 function ScrollSpy(){} //构造函数 ScrollSpy.prototype = {} //构造器的原型 $.fn.scro ...

  3. bootstrap插件学习-bootstrap.typehead.js

    先看bootstrap.typehead.js的结构 var Typeahead = function ( element, options ){} //构造器 Typeahead.prototype ...

  4. bootstrap插件学习-bootstrap.carousel.js

    先看bootstrap.carousel.js的结构 var Carousel = function (element, options){} //构造器 Carousel.prototype = { ...

  5. bootstrap插件学习-bootstrap.collapse.js

    先看bootstrap.collapse.js的结构 var Collapse = function ( element, options ){} // 构造器 Collapse.prototype ...

  6. bootstrap插件学习-bootstrap.alert.js

    我们先看bootstrap.alert.js的结构 var dismiss = '[data-dismiss="alert"]' //自定义属性 Alert = function ...

  7. bootstrap插件学习-bootstrap.button.js

    先看bootstrap.button.js的结构 var Button = function ( element, options ){} //构造器 Button.prototype = {} // ...

  8. bootstrap插件学习-bootstrap.popover.js

    先看bootstrap.popover.js的结构 var Popover = function ( element, options ){} //构造器 Popover.prototype = {} ...

  9. bootstrap插件学习-bootstrap.tooltip.js

    先看bootstrap-tooltip.js的结构 var Tooltip = function ( element, options ){} // 构造器 Tooltip.prototype ={} ...

随机推荐

  1. java中 sleep 与 wait 的区别

    1.所属类不同 sleep是Thread类的方法: wait是Object类的方法: 2.功能不同 sleep是线程用来控制自身流程的,在调用sleep()方法的过程中,线程不会释放对象锁: wait ...

  2. 预写式日志(Write-Ahead Logging (WAL))

    SQL Server中使用了WAL(Write-Ahead Logging)技术来保证事务日志的ACID特性.而且大大减少了IO操作. WAL的核心思想是:在数据写入到数据库之前,先写入到日志.再将日 ...

  3. javascript模仿php 函数 trim ltrim rtrim (原创)

    javascript模仿php 函数 trim  ltrim rtrim,去除字符串两边空格或其他符号 本文地址:js trim js php trim function trims(){ this. ...

  4. MVC项目实践,在三层架构下实现SportsStore-03,Ninject控制器工厂等

    SportsStore是<精通ASP.NET MVC3框架(第三版)>中演示的MVC项目,在该项目中涵盖了MVC的众多方面,包括:使用DI容器.URL优化.导航.分页.购物车.订单.产品管 ...

  5. wpf-DataTemplate应用

    在WPF中,决定数据外观的是DataTemplate,即DataTemplate是数据内容的表现形式,一条数据显示成什么样子,是简单的文本还是直观的图形,就是由DataTemplate决定的.下面通过 ...

  6. 反射,得到Type引用的三种方式

    1.使用System.Object.GetType()得到Type引用 使用一个SportsCar实例得到类型信息 SportsCar sc=new  SportsCar(); Type t=sc.G ...

  7. python安装pillow模块错误

    安装的一些简单步骤就不介绍了,可以去搜索一下,主要就记录下我在安装pillow这一模块遇到的问题 1:安装好pillow后,安装过程没有出错 2:但是在python的IDLE输入from PIL im ...

  8. day14 生成器迭代器

    迭代器(iterator) 可迭代对象: 可以使用迭代器取出数据的对象 判断一个对象是否是可迭代对象,就看这个对象有没有实现__iter__方法 所有的容器类型(包括字符串)都是可迭代的 迭代器的使用 ...

  9. 19-matlab知识点复习二

    %% function RandDisplayJiong axis off; %关闭坐标轴 %Menubar是菜单条 none就是不显示图上方的菜单条 set(gcf,'menubar','none' ...

  10. 【LeetCode-数组篇】 1 Two Sum

    1 前言 之所以开始刷 LeetCode 上的算法题,一是快面临秋招,第二点是因为提升自己的编程能力,坚持两个月,希望博友们监督. 这个系列打算用 C# 和 Java 编程,为什么用两门语言,因为经历 ...