Bootstrap中的JavaScript插件.docx

Bootstrap中的JavaScript本章内容和官方文档并不完全相同,我调整了部分内容. 独立的文件还是编译后的集成文件 每个插件都可以单独的引入到页面中（通过某些方式控制插件间的依赖关系），或者一次性引入。bootstrap.js?和?bootstrap.min.js?文件都将所有插件包含在一个文件中了。 数据属性 你可以仅仅使用data属性API就可以使用所有Bootstrap中的插件，而且不用写一行JavaScript代码。这是Bootstrap中的一等API，并且是你的首选方式。 特殊情况是，在某些情况下可能需要特意禁用这种默认动作。因此，我们特地提供了禁用data属性API的方式，通过解除绑定在body上的被命名为`data-api`的事件即可实现。如下所示： $(body).off(.data-api) 还可以解除特定插件的事件绑定，只要将插件名和data-api链接在一起作为参数使用。如下所示： $(body).off(.alert.data-api) 使用API 我们也相信你可以完全通过JavaScript API使用Bootstrap所有插件. 所有公共API都是单一, 可链接使用, 和在行为上返回集合. $(.btn.danger).button(toggle).addClass(fat) 所有方法都应该接受一个可选的对象, 一个字符串, 或什么也不传入(这样会使用插件的默认行为): $(#myModal).modal() //默认初始化 $(#myModal).modal({ keyboard: false }) // 初始化没有键盘 $(#myModal).modal(show) // 初始化立即显示 每个插件都在`Constructor`属性公开了其构造函数:?$.fn.popover.Constructor. 如果你想获得一个特定插件实例, 可直接从一个元素获取它:$([rel=popover]).data(popover). 没冲突 有时在使用Bootstrap插件, 还需要使用其他UI框架. 在这种情况下, 命名空间冲突的情况时有发生. 假如发生了冲突情况, 你可以在插件调用.noConflict. var bootstrapButton = $.fn.button.noConflict() // 返回 $.fn.button 之前指定的值 $.fn.bootstrapBtn = bootstrapButton // 给Bootstrap添加 $().bootstrapBtn 功能 事件 Bootstrap对大多数插件独有的行为提供自定义事件. 通常用不定式和过去分词, 如不定式(ex.?show)触发事件开始, 和过去分词(ex.?shown)触发事件完成. 所有不定式都提供了preventDefault功能. 这能在开始之前终止行为. $(#myModal).on(show, function (e) { if (!data) return e.preventDefault() // stops modal from being shown }) 过渡效果?bootstrap-transition.js 关于过渡效果 对于简单的过渡效果, 需要包含一个bootstrap-transition.js文件. 假如你使用完整(或精缩版)bootstrap.js, 就不需要再加入该文件, 因为bootstrap.js已经把该文件包含在里面. 使用例子 过渡效果插件的使用案例： 具有幻灯片或淡入效果的对话框 具有淡出效果的标签页 具有淡出效果的警告 具有幻灯片效果的轮播板 对话框?bootstrap-modal.js 例子 类似传统的javascript模态对话框，但更圆滑更灵活，带有最基本的功能和智能默认项。 静态的例子 下面就是一个静态渲染的模态对话框。有标题, 正文, 并且页脚还有可执行操作. × 对话框标题 欢迎光临…  HYPERLINK /javascript.html 关闭? HYPERLINK /javascript.html 保存更改 div class=modal hide fade div class=modal-header button type=button class=close data-dismiss=modal aria-hidden=truetimes;/button h3对话框标题/h3 /div div class=modal-body p欢迎光临…/p /div div class=moda