BootStrap3.0学习--JavaScript 插件

概览

1.单个还是全部引入：可以单个引入bootstrap.js?和?bootstrap.min.js，也可以全部引入，二者都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。

2.data属性：通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是你的首选方式。

?当需要关闭的时候$(document).off('.data-api')

3.编程的API

$('.btn.danger').button('toggle').addClass('fat');

? $('#myModal').modal() // 以默认值初始化
? $('#myModal').modal({ keyboard: false }) // initialized with no keyboard
? $('#myModal').modal('show') // 初始化后立即调用 show 方法

$.fn.modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 `keyboard` 默认选参数置为 false

4.避免命名空间冲突

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

5.事件：从 3.0.0 版本开始，所有 Bootstrap 事件的名称都采用命名空间方式。

$('#myModal').on('show.bs.modal',function (e) { if (!data) return e.preventDefault() // 阻止模态框的展示 })

6.未对禁用 JavaScript 的浏览器提供补救措施

Bootstrap 插件未对禁用 JavaScript 的浏览器提供补救措施。如果你对这种情况下的用户体验很关心的话，请添加<noscript>?标签向你的用户进行解释（并告诉他们如何启用 JavaScript），或者按照你自己的方式提供补救措施。

过渡效果

1.transition.js，bootstrap.js包含此插件。

模态框

1.可调用modal.js，bootstrap.js包含此插件。

2.实例

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   ="modal-dialog">
      ="modal-content">
         ="modal-header">
            button type="button" class="close" data-dismiss="modal" 
               aria-hidden>×
            </buttonh4 ="modal-title"="myModalLabel">
               模态框（Modal）标题
            h4div="modal-body">
            点击关闭按钮检查事件功能。
         ="modal-footer"="btn btn-default" 
               data-dismiss="modal">
               关闭
            ="btn btn-primary">
               提交更改
            > /.modal-content -->
    /.modal-dialog  /.modal script>
   $(function () { $('#myModal).modal(hide)})});
>
).on(hide.bs.modal, () {
      alert(嘿，我听说您喜欢模态框...);})
   });
>

3.选项

<a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>

4.方法

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

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

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

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

5.事件

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

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

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

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

?6.可选尺寸：模态框提供了两个可选尺寸，通过为?.modal-dialog?增加一个样式调整类实现。.bs-example-modal-lg和bs-example-modal-sm

<!-- Large modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> ... </div> </div> </div>

7.data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。

Dropdowns插件

1.dropdown.js

2.通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单

3.方法：下拉菜单切换有一个简单的方法用来显示或隐藏下拉菜单。

<script>
$(function(){
$(".dropdown-toggle").dropdown('toggle');
});?
</script>

4.带有标签页的下拉菜单

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!