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

3.选项

选项名称	类型/默认值	Data 属性名称	描述
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，则会加载其中的内容。如下面的实例所示： <a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>

4.方法

方法	描述	实例
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')

5.事件

事件	描述	实例
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 () {// 执行一些动作... })

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 属性。在这里它被用于关闭模态窗口。

1.dropdown.js

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

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

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

<ul class="nav nav-tabs"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li><a href="#">VB.Net</a></li><li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Java <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Swing</a></li><li><a href="#">jMeter</a></li><li><a href="#">EJB</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li></ul></li><li><a href="#">PHP</a></li>
</ul>

5.导航条内的下拉菜单

<nav class="navbar navbar-default" role="navigation"><div class="navbar-header"><a class="navbar-brand" href="#">W3Cschool</a></div><div id="myexample"><ul class="nav navbar-nav"><li class="active"><a href="#">iOS</a></li><li><a href="#">SVN</a></li><li class="dropdown"><a href="#" class="dropdown-toggle">Java <b class="caret"></b></a><ul class="dropdown-menu"><li><a id="action-1" href="#">jmeter</a></li><li><a href="#">EJB</a></li><li><a href="#">Jasper Report</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li><li class="divider"></li><li><a href="#">另一个分离的链接</a></li></ul></li></ul></div></nav>
</div>

滚动监听（Scrollspy）插件

1.scrollspy.js

2.滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。

3.实例

<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation"><div class="navbar-header"><button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">教程名称</a></div><div class="collapse navbar-collapse bs-js-navbar-scrollspy"><ul class="nav navbar-nav"><li class="active"><a href="#ios">iOS</a></li><li><a href="#svn">SVN</a></li><li class="dropdown"><a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"><li><a href="#jmeter" tabindex="-1">jmeter</a></li><li><a href="#ejb" tabindex="-1">ejb</a></li><li class="divider"></li><li><a href="#spring" tabindex="-1">spring</a></li></ul></li></ul></div>
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0" style="height:200px;overflow:auto; position: relative;"><div class="section"><h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);">&times; 删除该部分</a></small></h4><p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p></div><div class="section"><h4 id="svn">SVN<small></small></h4><p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。</p></div><div class="section"><h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">&times; 删除该部分</a></small></h4><p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p></div><div class="section"><h4 id="ejb">EJB</h4><p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p></div><div class="section"><h4 id="spring">Spring</h4><p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。</p><p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。</p></div>
</div>
<span id="activeitem" style="color:red;"></span>
<script type="text/javascript">$(function(){removeSection = function(e) {$(e).parents(".section").remove();$('[data-spy="scroll"]').each(function () {var $spy = $(this).scrollspy('refresh')});}$("#myScrollspy").scrollspy();$('#myScrollspy').on('activate.bs.scrollspy', function () {var currentItem = $(".nav li.active > a").text();$("#activeitem").html("目前您正在查看 - " + currentItem);})
});
</script>

标签页（Tab）插件

1.bootstrap.js

2.如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容。

3.实例

<hr><p class="active-tab"><strong>激活的标签页</strong>：<span></span></p><p class="previous-tab"><strong>前一个激活的标签页</strong>：<span></span></p>
<hr>
<ul id="myTab" class="nav nav-tabs"><li class="active"><a href="#home" data-toggle="tab">W3Cschool Home</a></li><li><a href="#ios" data-toggle="tab">iOS</a></li><li class="dropdown"><a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"><li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li><li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li></ul></li>
</ul>
<div id="myTabContent" class="tab-content"><div class="tab-pane fade in active" id="home"><p>W3Cschoool菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p></div><div class="tab-pane fade" id="ios"><p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p></div><div class="tab-pane fade" id="jmeter"><p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p></div><div class="tab-pane fade" id="ejb"><p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p></div>
</div>
<script>$(function(){$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {// 获取已激活的标签页的名称var activeTab = $(e.target).text(); // 获取前一个激活的标签页的名称var previousTab = $(e.relatedTarget).text(); $(".active-tab span").html(activeTab);$(".previous-tab span").html(previousTab);});
});
</script>

BootStrap3.0学习--JavaScript 插件

概览

过渡效果

模态框

Dropdowns插件

滚动监听（Scrollspy）插件

标签页（Tab）插件