Bootstrap插件

 

Bootstrap插件概览 站点引用 Bootstrap 插件的方式有两种： 单独引用：使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。如果您单独引用插件，请先确保弄清这些插件之间的依赖关系。 编译（同时）引用：使用 bootstrap.js 或压缩版的 bootstrap.min.js。 （API:应用程序接口） data 属性： 通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。首选方式 关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。`(document).off(‘.data−api′)‘关闭一个特定的插件，只需要在data−api命名空间前加上该插件的名称作为命名空间即可。‘(document).off(‘.data−api′)‘关闭一个特定的插件，只需要在data−api命名空间前加上该插件的名称作为命名空间即可。‘(document).off(‘.alert.data-api’)` 编程方式的 API 避免命名空间冲突：可以通过调用插件的 .noConflict 方法恢复其原始值。

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

事件两种形式： 动词不定式：这会在事件开始时被触发。动词不定式事件提供了 preventDefault 功能。这使得在事件开始前可以停止操作的执行。

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() 
})

过去分词形式：这会在动作执行完毕之后被触发。例如 ex: shown。 一、过渡效果（Transition）插件 1、模态框（Modal）插件 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 切换模态框（Modal）插件的隐藏内容： 通过 data 属性： 在控制器元素（比如按钮或者链接）上设置属性 data-toggle=”modal”，同时设置 data-target=”#identifier” 或 href=”#identifier” 来指定要切换的特定的模态框（带有 id=”identifier”）。 通过 JavaScript： 使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id=”identifier” 的模态框：

$('#identifier').modal(options)

选项 backdrop boolean 或 string ‘static’ 默认值：true data-backdrop 指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。 keyboard boolean 默认值：true data-keyboard 当按下 escape 键时关闭模态框，设置为 false 时则按键无效。 show boolean 默认值：true data-show 当初始化时显示模态框。 remote path 默认值：false data-remote 使用 jQuery .load 方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。 方法：与 modal() 一起使用的有用的方法。 Options: .modal(options) 把内容作为模态框激活。接受一个可选的选项对象。

$('#identifier').modal({
keyboard: false
})

Toggle: .modal(‘toggle’) 手动切换模态框。

$('#identifier').modal('toggle')

Show: .modal(‘show’) 手动打开模态框。

$('#identifier').modal('show')

Hide: .modal(‘hide’) 手动隐藏模态框。

$('#identifier').modal('hide')

事件 show.bs.modal 在调用 show 方法后触发。

$('#identifier').on('show.bs.modal', function () {
  // 执行一些动作...
})

shown.bs.modal 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。

$('#identifier').on('shown.bs.modal', function () {
  // 执行一些动作...
})

hide.bs.modal 当调用 hide 实例方法时触发。

$('#identifier').on('hide.bs.modal', function () {
  // 执行一些动作...
})

hidden.bs.modal 当模态框完全对用户隐藏时触发。

$('#identifier').on('hidden.bs.modal', function () {
  // 执行一些动作...
})

2、标签页（Tab）插件 启用标签页： 通过 data 属性：您需要添加 data-toggle=”tab” 或 data-toggle=”pill” 到锚文本链接中。 添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。

<ul class="nav nav-tabs">
    <li><a href="#identifier" data-toggle="tab">Home</a></li>
    ...
</ul>

通过 JavaScript：您可以使用 Javscript 来启用标签页 淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容 方法 `.$().tab`：该方法可以激活标签页元素和内容容器。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的 href。 事件 show.bs.tab 该事件在标签页显示时触发，但是必须在新标签页被显示之前。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

shown.bs.tab 该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。