- 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>
- 先调用jQuery._data从$.cache中取出已有的事件缓存如果是第一次在DOM元素上绑定该类型事件句柄,在DOM元素上绑定jQuery.event.handle,作为统一的事件响应入口
- 将封装后的事件句柄放入缓存中
- 传入的事件句柄,会被封装到对象handleObj的handle属性上,此外handleObj还会填充guid、type、namespace、data属性;DOM事件句柄elemData.handle指向jQuery.event.handle,即jQuery在DOM元素上绑定事件时总是绑定同样的DOM事件句柄jQuery.event.handle。
- 事件句柄在缓存$.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: }