Bootstrap插件预览

来源:互联网 发布:拍卖系统源码 编辑:程序博客网 时间:2024/05/18 01:57

Bootstrap自带12种jQuery插件,可以给站点添加更多的互动。
站点引用Bootstrap插件的方式有两种
1.单独引用:使用个别的.js文件,一些插件和css组件依赖其他的插件。如果单独引用插件,请先确保这些插件之间的依赖关系。
2.编译引用:使用bootstrap.js或压缩版的bootstrap.min.js都包含了所有的插件
所有的插件依赖于jQuery,所以必须在插件文件之前引用jQuery。
data属性
解除以data-api为命名空间并绑定在文档上的事件

$(document).off('.data-api')

如果关闭一个特定的插件,只需要在data-api命名空间叫上该插件的名称作为命名空间即可

$(document).off('.alert.data-api')

编程方式的API
Bootstrap插件提供了纯javascript方式的API,所有公开的API都是支持单独或链式调用方式,并且但会其操作的元素集合。

$(".btn.danger").button("toggle").addClass("fat")

所有的方法都可以接受一个可选的选项对象作为参数,或者一个特定方法的字符串,或者不带任何参数

//初始化为默认的行为$("#myModal").modal()//初始化为不支持键盘$("#myModal").modal({keyboard:false})//初始化并立即调用show$("#myModal").modal('show')

避免命名空间冲突
某些时候Bootstrap插件可能需要与其他UI框架一起使用,这种情况下可能发生命名空间冲突。如果发生了,可以通过.noConflict方法恢复其原始值

// 返回 $.fn.button 之前所赋的值var bootstrapButton = $.fn.button.noConflict() // 为 $().bootstrapBtn 赋予 Bootstrap 功能                         $.fn.bootstrapBtn = bootstrapButton 

事件
Bootstrap为大多数插件独特行为提供了自定义事件。
动词不定式:show,时间开始时被触发
过去分词形式:动作执行完毕之后被触发。shown

0 0
原创粉丝点击