bootstrap-modal 学习笔记 源码分析
|
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,怎么用直接官网 http://twitter.github.io/bootstrap/ 我博客的定位就是把这些年看过的源码给慢慢的总结出来,才疏学浅,不到位的见谅~
引入 <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() 现在好像被废弃掉了，至于那个版本去掉的，我就没注意了 ??? 简单的说下区别 ：
呵呵 考虑下 $('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
将click事件绑定在body对象上，页面上任何元素发生的click事件都冒泡到document对象上得到处理,发现捕获到p元素就执行了代码了 on最终还是用?? jQuery.event.add( this,types,fn,data,selector ); 为元素elem添加类型types的句柄handler，事实上所有的事件绑定最后都通过jQuery.event.add来实现。其执行过程大致如下：?
? 来看正文： 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) 让你指定的内容变成一个模态对话框。接受一个可选的参数 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: }
构建的代码被包装过 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |