Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,怎么用直接官网 http://twitter.github.io/bootstrap/

我博客的定位就是把这些年看过的源码给慢慢的总结出来,才疏学浅,不到位的见谅~

  • css部分呢Bootstrap由动态CSS语言Less写成，在很多方面类似CSS框架Blueprint
  • Bootstrap自带了13个jQuery插件，jquery这个东东，也是个版本帝，现在都10.1了…
  • 一直做移动app,都是用的自己的框架或者zepto,jquery就没正儿八经的用过,源码就看过1.42的后来改动太大了,具体慢慢分析看看源码吧

引入

<script src="src/jquery.js"></script>

<script src="src/bootstrap-transition.js"></script>

<script src="src/bootstrap-modal.js"></script>

<!-- Bootstrap -->

<link href="css/bootstrap.css" rel="stylesheet" media="screen">

   1:  <!-- Button to trigger modal -->
   2:  <a href="#myModal" role="button" class="btn" data-toggle="modal">查看演示案例</a>
   3:   
   4:  <!-- Modal -->
   5:  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   6:      <div class="modal-header">
   7:          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   8:          <h3 id="myModalLabel">Modal header</h3>
   9:      </div>
  10:      <div class="modal-body">
  11:          <p>One fine body…</p>
  12:      </div>
  13:      <div class="modal-footer">
  14:          <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
  15:          <button class="btn btn-primary">Save changes</button>
  16:      </div>
  17:  </div>

从所周知，javascript 采用事件驱动(event-driven)。它是在用形界面的环境下，使得一切输入变化简单化。通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event Driver）。而对事件进行处理程序或函数，我们称之为事件处理程序（Event Handler）

Bootstrap是13个jquery插件，自然事件也是基于jquery处理的

我们先看看Bootstrap插件源码中常用的绑定机制

on方法

     jQuery1.7开始，jQuery引入了全新的事件绑定机制，on()和off()两个函数统一处理事件绑定 ，因为在此之前有bind(), live(), delegate()等方法来处理事件绑定，jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法，老版本还有live() 现在好像被废弃掉了，至于那个版本去掉的，我就没注意了

简单的说下区别 ：

  • bind 是一对一的
  • live 是指默认绑定到document,通过冒泡过滤
  • delegate 则是直接绑定指定的content,然后通过冒泡过滤

呵呵 考虑下 $('a').live() == $(document).delegate('a') ?

live废弃的原因,估计也是效率,然后不够灵活吧,尤其要提出来zepto的移动事件默认就绑定到document上,给项目带来不便……

on的处理机制也很简单,

看官方给的API的一个demo

   1:  <p>Click me!</p>
   2:  <span></span>
   3:   
   4:  <script>
   5:      var count = 0;
   6:      $("body").on("click", "p", function(){
   7:        $(this).after("<p>Another paragraph! "+(++count)+"</p>");
   8:      });
   9:  </script>

给body绑定一个点击事件, p元素可以响应，绑定事件的元素跟响应事件的元素其实不是同一个dom

<!DOCTYPE html><script type="text/javascript" src="http://code.jquery.com/jquery-1.7rc2.js" data-mce-src="http://code.jquery.com/jquery-1.7rc2.js"></script><p>Click me!</p><script type="text/javascript">
var count = 0;
$("body").on("click", "p", function(){
$(this).after("<p>Another paragraph! "+(++count)+"</p>");
});
</script>

将click事件绑定在body对象上，页面上任何元素发生的click事件都冒泡到document对象上得到处理,发现捕获到p元素就执行了代码了

on最终还是用   jQuery.event.add( this, types, fn, data, selector ); 为元素elem添加类型types的句柄handler，事实上所有的事件绑定最后都通过jQuery.event.add来实现。其执行过程大致如下：

  1. 先调用jQuery._data从$.cache中取出已有的事件缓存如果是第一次在DOM元素上绑定该类型事件句柄，在DOM元素上绑定jQuery.event.handle，作为统一的事件响应入口
  2. 将封装后的事件句柄放入缓存中
  3. 传入的事件句柄，会被封装到对象handleObj的handle属性上，此外handleObj还会填充guid、type、namespace、data属性；DOM事件句柄elemData.handle指向jQuery.event.handle，即jQuery在DOM元素上绑定事件时总是绑定同样的DOM事件句柄jQuery.event.handle。
  4. 事件句柄在缓存$.cache中的数据结构如下，事件类型和事件句柄都存储在属性events中，属性handle存放的执行这些事件句柄的DOM事件句柄

来看正文：

bootstrap-modal.js中 240行

   1:    $target
   2:          .modal(option)
   3:          .one('hide', function() {
   4:          $this.focus()
   5:        })

就是具体的执行调用了

Modal是一个很标准的js类的写法

通过$.fn.modal 扩展到了jquery的原型上了,返回this引用从而实现链式了

jquery是数组形式，所以扩展的时候需要 this.each

看看Modal提供的API

属性：

backdrop ：包括一个模态的背景元素

keyboard：按退出键关掉模态对话框

show: 是否初始化就显示模态

remote：如果是远程地址,用jquery加载内容注入

方法

.modal(options)

让你指定的内容变成一个模态对话框。接受一个可选的参数object.

   1:  $('#myModal').modal({  keyboard: false})

.modal('toggle')

手动打开或隐藏一个模态对话框。

   1:  $('#myModal').modal('toggle')

.modal('show')

手动打开一个模态对话框。

   1:  $('#myModal').modal('show')

.modal('hide')

手动隐藏一个模态对话框。

   1:  $('#myModal').modal('hide')

   1:    $.fn.modal = function(option) {
   2:      return this.each(function() {
   3:        var $this = $(this),
   4:          data = $this.data('modal'),
   5:          options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
   6:          if (!data) $this.data('modal', (data = new Modal(this, options)))
   7:          if (typeof option == 'string') data[option]()
   8:          else if (options.show) data.show()
   9:      })
  10:    }

构建的代码被包装过

bootstrap-modal 学习笔记 源码分析的更多相关文章

  1. DotNetty网络通信框架学习之源码分析

    DotNetty网络通信框架学习之源码分析 有关DotNetty框架,网上的详细资料不是很多,有不多的几个博友做了简单的介绍,也没有做深入的探究,我也根据源码中提供的demo做一下记录,方便后期查阅. ...

  2. Bootstrap导航栏navbar源码分析

    1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...

  3. 树莓派学习笔记—— 源码方式安装opencv

    0.前言     本文介绍怎样在树莓派中通过编译源码的方式安装opencv,并通过一个简单的样例说明怎样使用opencv.     很多其它内容请參考--[树莓派学习笔记--索引博文] 1.下载若干依 ...

  4. Vue2.x源码学习笔记-源码目录结构整理

    先从github上下载或者clone一个vue分支项目 https://github.com/vuejs/vue 查看下目录结果 先列出一些目录 Vue |— build 打包相关的配置文件,其中最重 ...

  5. 并发编程原理学习-reentrantlock源码分析

    ReentrantLock基本概念 ​ ReentrantLock是一个可重入锁,顾名思义,就是支持重进入的锁,它表示该锁能够支持一个线程对资源的重复加锁,并且在获取锁时支持选择公平模式或者非公平模式 ...

  6. Android FM模块学习之四源码分析（3）

    接着看FM模块的其他几个次要的类的源码.这样来看FM上层的东西不是太多. 请看android\vendor\qcom\opensource\fm\fmapp2\src\com\caf\fmradio\ ...

  7. Java基础系列--07_Object类的学习及源码分析

    Object: 超类 (1)Object是类层次结构的顶层类,是所有类的根类,超类.   所有的类都直接或者间接的继承自Object类.   所有对象(包括数组)都实现这个类的方法 (2)Object ...

  8. mybatis 学习四 源码分析 mybatis如何执行的一条sql

    总体三部分,创建sessionfactory,创建session,执行sql获取结果 1,创建sessionfactory      这里其实主要做的事情就是将xml的所有配置信息转换成一个Confi ...

  9. golang学习笔记----源码文件

    GO源码文件

随机推荐

  1. 2016-1-30 Servlet中Session管理(Sesssion追踪)

    Session管理(Sesssion追踪)是Web应用程序开发中非常重要的一个主题.这是因为HTTP是无状态的,在默认情况下,Web服务器不知道一个HTTP请求是来自初次用户,还是来自之前已经访问过的 ...

  2. content相关属性

    content属性值 :      width:可视区域的宽度,值可为数字或关键词device-width      height:同width      intial-scale:页面首次被显示是可 ...

  3. Drawing in Singapore

    说到画画,其实很多人都会画.只是很多人都把这种潜能给埋起来了,没有特意的去开发出来.且不论画的好与不好,好看与不好看.自己把自己所想的东西方式表达出来,画画是一种方式.我不是科班出身,全凭自己感觉来的 ...

  4. ZeroMQ(ZMQ)函数接口英汉直译

    找了好多地方都找不到ZMQ接口函数的中文文档,就厚着脸皮自己翻译了下.但因为作者本人涉世未深,翻译有错误的地方还请大家不吝赐教,在下感激不尽. 因为时间有限,只能一点一点翻译了. ZMQ接口文档的官方 ...

  5. Python之路第一课Day7--随堂笔记(面向对象编程进阶...未完待续 )

    本节内容: 面向对象高级语法部分 静态方法.类方法.属性方法 类的特殊方法 反射 异常处理 Socket开发基础 作业:开发一个支持多用户在线的FTP程序 面向对象高级语法部分 一.静态方法 通过@s ...

  6. pythonchallenge 解谜 Level 2

    好吧,赶紧贴一下. #-*- coding:utf-8 -*- #代码版本均为python 3.5.1 #Level 2 import re file = open("Level 2.txt ...

  7. C\C++ 1A2B小游戏源码

    学了一段时间,心血来潮写了一个1A2B小游戏,很多人应该玩过,是一个挺有意思的益智小游戏,之前用易语言写过,现在又用C++重写了一下. 编译运行无错,整体程序设计思路为:进入循环,初始化游戏,读入一个 ...

  8. 百度编辑器ueditor的简单使用

    最近刚被分配了以个消息发布的任务,其中用到了富文本编辑器.以前也用过,不过这次我选择的是百度富文本编辑器ueditor1_4_3-utf8-jsp版的. 其实看ueditor功能很强大,不过百度的设计 ...

  9. 浏览器调试js技巧总结

    一.控制台console的运用 console.log(aa|'aa'): 将需要打印的东西输出的控制台,在调试的时候很有用,可以知道aa是否是自己想要的数据类型,或者可以知道程序是否执行到了这一步, ...

  10. ps 实例部分

    实例篇1:将不同图片通过阀值转换成黑白色人物头像 图像-黑白-曲向-阀值 本图像-复制-粘贴