bootstrap-modal 学习笔记 源码分析

前端开发 作者: 2024-08-21 10:30:01
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,怎么用直接官网 http://twitter.github.io/bootstrap/我博客的定位就是把这些年看过的源码给慢慢的
  • css部分呢Bootstrap由动态CSS语言Less写成,在很多方面类似CSS框架Blueprint
  • Bootstrap自带了13个jQuery插件,jquery这个东东,也是个版本帝,现在都10.1了…
  • 一直做移动app,都是用的自己的框架或者zepto,jquery就没正儿八经的用过,源码就看过1.42的后来改动太大了,具体慢慢分析看看源码吧
   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>

on方法

  • bind 是一对一的
  • live 是指默认绑定到document,通过冒泡过滤
  • delegate 则是直接绑定指定的content,然后通过冒泡过滤
   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>
  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事件句柄
   1:    $target
   2:          .modal(option)
   3:          .one('hide',function() {
   4:          $this.focus()
   5:        })

属性:

方法

   1:  $('#myModal').modal({  keyboard: false})
   1:  $('#myModal').modal('toggle')
   1:  $('#myModal').modal('show')
   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:    }
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_66041.html