Tenie Blog

Bootstrap的js给组件赋予了"生命".可以一次引入所有插件,或者逐个引入页面中

第一部分概览

1. 单个还是全部引入

js插件可以单个引入(*.js文件), 一次全部引入(bootstrap.js或压缩版bootstrap.min.js)

提示:

1.建议使用压缩版bootstrap.min.js文件

2.插件之间的依赖, 有些插件和CSS组件依赖其他插件,如果引入单个插件要自己检查插件之间的依赖关系,

所有插件都依赖jQuery(也就是说jQuery必须在所有插件之前引入页面).bower.json文件中列出来BootStrap所支持的jQuery版本

2. data属性

可以通过data属性API就能使用所以的Bootstrap插件,无需写一行js代码, 它是Bootstrap中的一等API,

但是,有些特色情况需要关闭此功能,因此提供了关闭data属性API的方法,即解除data-api 为命名空间并绑定在文档上的事件,如下:

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

另外,如果是针对某个特定的插件, 只需要在data-pai前面添加那个插件的名称作为命名空间,如下:

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

提示:

一个data属性只用在一个元素上, 如一个按钮想要提示和切换模式, 那么只能给其包裹一层父元素即可,分别作用在父元素上和本身上.

3. 编程方式的API(Bootstrap的方法)

Bootstrap插件提供了纯js方式的API,所以公开的API都支持单独或链式调用,并返回其所操作的元素集合(是jQuery的用法,本事就是依赖于jQuery),

$('.dtn.danger').button('toggle').addClass('fat')

所以方法都可以接受一个可选的option对象作为参数,或者一个代表特定方法的字符串,或者什么也不提供(在这种情况下,插件将会一默认值初始化)

$('#myModel').modal(); //以默认值初始化

$('#myModel').modal({keyboard: false}) //初始化为不支持键盘

$('#myModel').modal('show') //初始化并立即调用show方法

每个插件还可以通过构造器属性Constructor 暴露其原始的构造函数: $.fn.popver.Constructor.

如果想获取某插件实例,可以直接通过页面元素获取: $('rel="popover"').data('popver') //获取插件这个对象

默认设置:

每个插件对象都可以通过修改其自身的Costructor.DEFAULTS对象从而改变插件的默认设置:

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

4. 避免命名空间冲突

有时候可能会将Bootstrap插件与其他UI框架共同使用,可能会造成命名空间冲突,如果发生了,可以调用插件的.noConfilict 方法恢复其原始值.如下:

var bootstrapButton = $.fn.button.noConflict(); //获取插件的原始值

$.fn.bootstrapBtn = bootstrapButton ; //再给插件赋值回去,接下来可以正常调用这个插件了

5. 事件

Bootstrap为大部分插件所具有的动作提供了自定义事件, 一般来说, 这些事件都有不定式和过去式2种动词的命名形式.

例如:

不定式动词 show : 就是在时间开始的时候触发

过去式动词 shown : 在时间动作执行完毕后被触发

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

所以以不定式形式的动词命名的事件都提供了 preventDefault功能. 这就赋予你的动作开始执行前将其停止的功能.(就是触发了事件,要执行动作了还能让动作不执行),如下:

$('#myModel').on('show.bs.modal',function(e){

if(!data) return e.preventDefault(); //阻止模态框的展示

})

6. 版本信息

每个Bootstrap插件也就是jQuery插件,可以通过VERSION属性获取,如下:

$.fn.tooltip.Constructor.VERSION

7. 对禁用JS的浏览器没有提供补救措施

需要自己解决补救措施,如提供<noscript>标签,像用户解释或引导用户开启js

提示:

Bootstrap 不提供对第三方js工具库的支持.除了 noConflict()方法来补救名称冲突后解决方法

**** Bootstrap插件部分 ***

第一过渡效果 transition.js

1. 关于过渡效果

对于简单的过渡效果,只需引入 transition.js 和其他js文件一起引入,如果已经引入bootstrap.js 就不用单独引入了

2. 包含的内容

Transition.js 是针对 transitionEnd 事件的一个基本辅助工具, 也是对CSS过渡效果的模拟(如果浏览器不支持CSS的过渡就用这个插件实现的),

它被其他插件用来检测浏览器是否支持css的过渡效果.

3. 禁用过渡效果

通过下面代码可以在全局范围禁用过渡效果, 但该代码必须放在 transition.js引入代码后面.

$.support.transition = false

第二个模态框 modal.js

模态框以弹出对话框的形式出现, 具有最实用的功能集

提示:

1.不支持同时打开多个模态框, 千万别在一个模态框中重叠另一个模态框, 要想实现在功能也自己写代码

2.模态框的代码尽量放在<body>的直接子元素中, 以避免其他组件的样式对模态框的样式产生影响

3.模态框显示的时候给其中的组件焦点,可以自己写下面的代码:

$('#myinput').on('shown.bs.modal',function(){

$('#myinout').focus()

})

1. 实列

静态实例: 下面例子,以模态框包含了模态框头,体和底部一组按钮

<h4 class="modal-title">Modal title</h4>

</div>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

</div>

</div>

</div>

动态实列

点击按钮来触发模态框,此模态框是从上到下,逐渐浮现到页面前的.

Launch demo modal

</button>

提示:

1. 增强模态框的可访问性: 务必为 .modal元素添加 role="dialog" 和aria-labelledby="组件注释"

为 .modal-dialg添加 aria-hidden="true" 默认隐藏着的? 还有使用aria-describedby="..." 为.modal添加描述性信息

2. 在模态框中如果嵌入视频(youtube视频), 要自动停止,播放等功能要自己写代码,Bootstrap没提供

2. 可选尺寸

模态框组件提供了俩个可选尺寸,通过作用在 .modal-dialog元素上增加样式类(.bs-example-modal-lg)即可

3. 禁止动画效果

如果你不需要模态框弹出时的动画效果(淡入淡出效果), 只要删掉.fade类即可

4. 使用栅格系统

在 .modal-body容器内使用.row 和 .col-*-* 来利用栅格系统布局

<h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>

</div>

<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>

</div>

<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

</div>

</div>

</div>

5. 不同的按钮,触发同一个模态框, 并动态显示内容

需要写js,来动态显示不同按钮的内容, 使用的是事件的一个属性找到触发事件的按钮(event.relatedTarget属性),

找到了这个按钮后, 通过html 的data-* 属性,获取属性中的之.代码如下:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>

...

</div>

$('#exampleModal').on('show.bs.modal', function (event) {

var button = $(event.recipientelatedTarget) // 事件对象中获取那个元素触发的事件

var recipient = button.data('whatever') // 获取元素中的data-whatever熟悉的值

var modal = $(this)

modal.find('.modal-title').text('New message to ' + recipient) //给模态框中的元素动态赋值,

modal.find('.modal-body input').val(recipient)

})

</script>

6. 用法

模态框弹出时会给<body> 添加 .modal-open类的样式,覆盖页面默认的滚动行为, 还会生成一个 .modal-backdrop 元素(阴影遮盖层),提供了可点击的事件,点击就能关闭模态框

1) 通过data属性调用

不需要写js,就能使用模态框, 只要在按钮<button>(或<a>) 上添加一个 data-toggle="modal"属性, 然后在加一个 data-target="#模态框的id" (<a>的可以用href='#模态框id')

就能激活模态框了

2) 通过js调用

$('#myModal').modal('show'); //modal方法有多个参数; 可以向下面那样使用

$('#exampleModal').modal({backdrop:true,keyboard:false,show:true})

参数:

backdrop : 值有3个:true(默认) -- 主界面上有一个阴影遮住, 点击阴影层能关闭模态框

false -- 主界面没有阴影遮住, 点击空白处不会关闭模态框　　

'static' -- 　主界面上有一个阴影遮住,　点击阴影层不会关闭模态框　

keyboard : 值为boolean; true(默认) -- 按esc可以关闭模态框

false -- 按esc没反应

show: 值为boolean ; true(默认) -- 显示模态框

false -- 不显示

remote: 值为path ; 在4.0版本已经抛弃, 可以结合 jQuery.load 自己来加载内容

7. 方法

.modal(options); 用法里已经提到过一些了, 下面,还有几种用法

.modal('toggle'); 手动打开关闭, 在模态框显示或隐藏之前返回到主函数中,也就是说,调用这个方法的函数本身执行完了才会显示模态框(在触发shown.bs.modal或hidden.bs.modal事件之前)

.modal('show'); 手动打开,显示之前返回到主函数中

.modal('hide'); 隐藏

8. 事件

模态框类提供了一些事件,可以结果jQuery的.on()来监听事件,并执行自己的逻辑代码

1) show.bs.modal : show方法调用之后立即触发该事件(模态框还没显示出来)

2) shown.ba.modal : 模态框显示在界面上后,被触发

3) hide.bs.modal : hide方法调用之后立即触发,(还没隐藏)

4) hiden.ba.modal : 隐藏好后,被触发

5) loaded.bs.modal : 从远端的数据源加载完数据后触发

$('#myModal').on('hidden.bs.modal', function (e) {

// do something...

})

第三个下拉菜单 Dropdowns (dropdown.js)

1. 用法

两种方式显示菜单, 使用data属性,和js

1) 同过给按钮或链接添加data-toggle="dropdown" ; 如果您需要保持链接完整（在浏览器不启用 JavaScript 时有用），请使用 data-target 属性代替 href="#"：

<a data-toggle="dropdown" href="#"> 下拉菜单触发按钮</a>

...

</ul>

</div>

2) js的方式就一个dropdown()方法,来显示菜单

$(".dropdown-toggle").dropdown();

2. 方法

显示或隐藏菜单的方法

$().dropdown("toggle")

3. 实列,导航中的下拉菜单

<a class="navbar-brand" href="#">W3Cschool</a>

</div>

</a>

<li> <a id="action-1" href="#">jmeter</a> </li>

<li> <a href="#">Jasper Report</a> </li>

<li> <a href="#">分离的链接</a> </li>

<li> <a href="#">另一个分离的链接</a> </li>

</ul>

</li>

</ul>

</div>

</nav>

$(function() {

$(".dropdown-toggle").dropdown('toggle');

});

</script>

第四个滚动监听插件(scrollspy.js)

当一个单页面的应用时, 滚动条的位置自动对于导航栏的按钮,也就是,当滚动条滚动到导航按钮的内容时该导航按钮激活(.active)

1. 用法

1) 通过data属性: 在要监听的元素(通常是body), 添加data-spy="scroll" 然后在 .nav组件的夫元素添加属性data-traget="导航组件的id或class"

...

</div>

...

</body>

2) 通过Js: 通过js调用滚动监听, 选取要监听的元素, 然后调用.scrollspy()函数

$('body').scrollspy({ target: '.navbar-example' });

$("#idname").scrollspy(); //此时的id元素必须有 data-spy="scroll" 这个属性

2. 选项

offset : 默认值10, 当滚动的内容块距离顶部还有10px时,激活对应导航按钮

...

</div>

3. 方法

scrollspy()方法, 还有个用法, 传入'refresh' ,可以刷新当前的激活按钮,(应用场景是,如果当前的内容块被删除了, 会被下面的内容块替换位置,用其刷新导航按钮)

$(function(){

removeSection = function(e) {

$(e).parents(".section").remove();

$('[data-spy="scroll"]').each(function () {

var $spy = $(this).scrollspy('refresh')

});

}

$("#myScrollspy").scrollspy();

});

4. 事件

activate.bs.scrollspy : 当一个新项目被滚动监听激活时,触发该事件

$('#myScrollspy').on('activate.bs.scrollspy', function () {

// 执行一些动作...

})

5. 实列

</button>

</div>

Java <b class="caret"></b>

</a>

<li><a href="#jmeter" tabindex="-1">jmeter</a></li>

<li><a href="#spring" tabindex="-1">spring</a></li>

</ul>

</li>

</ul>

</div>

</nav>

× 删除该部分</a></small>

</h4>

<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple

TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>

</div>

<p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。</p>

</div>

<h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">

× 删除该部分</a></small>

</h4>

<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>

</div>

<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p>

</div>

<h4 id="spring">Spring</h4>

<p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。</p>

<p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。</p>

</div>

$(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.js)

在组件已经讲过一些,但没有涉及到, 标签对内容的一个结合使用

1. 用法

启用标签页组件有2中方式,

一种事使用data属性,给元素添加data-toggle="tab" 或 data-toggle="pill", 其中的<a>必须使用href指向内容块的id 或使用data-target="#id" 回顾标签的使用代码:

<ul>

</ul>

另一种js调用:

$("#myTab a").click(function(e){

e.preventDefault();

$this.tab('show')

})

还有几种激活标签页的方式:

$('#myTab a[href="#profile"]').tab('show') // 通过名称选取标签页

$('#myTab a:first').tab('show') // 选取第一个标签页

$('#myTab a:last').tab('show') // 选取最后一个标签页

$('#myTab li:eq(2) a').tab('show') // 选取第三个标签页（索引从 0 开始）

2. 淡入淡出效果

给内容块(.tab-pane), 添加 .fade 类,第一个标签页内容块必要添加 .in类,不然内容不显示

</div>

3. 实例

</li>

<a href="#" id="myTabDrop1" class="dropdown-toggle"

data-toggle="dropdown">Java

</a>

<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>

</ul>

</li>

</ul>

<p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>

</div>

<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>

</div>

</div>

4. 方法

$().tab("show"),用法里已经很详细了

页面初始化时,js激活某个标签页例子:

$(function () {

$('#myTab li:eq(1) a').tab('show');

});

5. 事件

标签页插件中的事件, 这些事件可以当钩子使用

show.bs.tab : 在内容显示之前触发,可以使用event.target和 event.relatedTarget来定位激活的标签页,和前一个激活的标签页

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

e.target // 激活的标签页

e.relatedTarget // 前一个激活的标签页

})

shown.bs.tab : 内块显示完毕后触发, 用法和上面类同

6. 实例

<hr>

<p class="active-tab"><strong>激活的标签页</strong>：<span></span></p>

<p class="previous-tab"><strong>前一个激活的标签页</strong>：<span></span></p>

<hr>

菜鸟教程</a></li>

<a href="#" id="myTabDrop1" class="dropdown-toggle"

data-toggle="dropdown">

Java <b class="caret"></b></a>

<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>

</ul>

</li>

</ul>

</div>

<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple

TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>

</div>

<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>

</div>

<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。

</p>

</div>

$(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>

第六个提示工具插件 (tooltip.js)

当用户去点一个链接或按钮的时候, 可以出现一个提示框(对链接做更进一步的描述), 该插件的启发来自jQuery.tipsy插件.但Bootstrap的使用更简单,样式效果是纯css的

1. 用法

1) 通过data属性 : 只需要在<a>(或<button>)标签上添加 data-toggle="tooltip" title就是要提示的文本,默认情况下,提示的小窗在<a>元素的顶部

<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>

2) js : 的触发方式

$('#identifier').tooltip(["参数"])

提示:

该插件不是存css插件因此在页面夹在好后需要使用js来激活

$(function () {

$("[data-toggle='tooltip']").tooltip();

});

2. 选项

可以使用Data-* 来设置下面选项的值, 也可以使用js调用

选项名 : 值类型/默认值 ; data属性名称 ; 说明

1) animation : boolean/true ; data-animation ; 提示工具使用css渐变效果

2) html : boolean/false ; data-html ; 向提示工具插入HTML(能识别title中的html标签,默认把html标签当文本输出),如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。

3) placement : string|function/top ; data-placement ; 提示工具显示的位置(top, bottom, left, right, auto);当值为auto时,会动态调整, 还可以"auto left" 经可能在左显示,实在不行就自己调整了

4) selector : string/false ; data-selector ; 如果提供了一个选择器, 提示工具对象将被委派到指定的目标

5) title : string|function/'' ; data-title ; 如果未指定元素的title, 那么会使用data-title的值

6) trigger : string/'hover focus'; data-trigger ; 定义触发的事件 : click , hover , focus , manual , 可以联合使用空格分割即可

7) content : string|function/'' ; data-content ; 不指定的话,使用默认值''

8) delay : number|object/0 ; data-delay ; 延迟显示/隐藏毫秒数,如果提供一个数字,那么显示和隐藏的延迟一样, 提供一个对象的可以不同的设置delay:{ show: 500, hide: 100 }

9)container : string|false/false ; data-container ; 向指定元素追加提示工具. 实例： container: 'body'

3. 方法

tooltip("参数"),参数如下:

1) toggle ; 切换显示/隐藏 ; $('#element').tooltip('toggle')

2) show ; 显示 ; $('#element').tooltip('show')

3) hide ; 隐藏 ; $('#element').tooltip('hide')

4) destroy ; 隐藏并销毁 ; $('#element').tooltip('destroy')

4. 事件

show.bs.tooltip : 当调用 show 实例方法时立即触发该事件。

shown.bs.tooltip : 当提示工具对用户可见时触发该事件（将等待 CSS 过渡效果完成）。

hide.bs.tooltip 当调用 hide 实例方法时立即触发该事件。

hidden.bs.tooltip 当提示工具对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。

$('#myTooltip').on('***.bs.tooltip', function () {

// 执行一些动作...

})

5. 实例

这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip"

title="show">Tooltip 方法 show

</a>.

这是一个 <a href="#" class="tooltip-hide" data-toggle="tooltip"

data-placement="left" title="hide">Tooltip 方法 hide

</a>.

这是一个 <a href="#" class="tooltip-destroy" data-toggle="tooltip"

data-placement="top" title="destroy">Tooltip 方法 destroy

</a>.

这是一个 <a href="#" class="tooltip-toggle" data-toggle="tooltip"

data-placement="bottom" title="toggle">Tooltip 方法 toggle

</a>.

这是一个 <a href="#" data-toggle="tooltip" title="<h2>'am Header2

</h2>">Tooltip 方法 options

</a>.

</p>

$(function () {

$('.tooltip-show').tooltip('show');});

$(function () { $('.tooltip-hide').tooltip('hide');});

$(function () { $('.tooltip-destroy').tooltip('destroy');});

$(function () { $('.tooltip-toggle').tooltip('toggle');});

$(function () { $(".tooltip-options a").tooltip({html : true });

});

</script>

<div>

第七个弹出框(popover.js)

和tooltip(提示工具)类似,比它大一点,有标题和内容2部分组成的一个提示工具

1. 用法

1) data属性 : 给<a>/<button>添加data-toggle="popover", 标签的title是弹出框的文本,默认情况会在元素顶部弹出

请悬停在我的上面

</a>

2) js :

$('#identifier').popover("...")

提示:

该插件也需要在页面载入后, 进行激活,毕竟不是存css样式

$(function () {

$("[data-toggle='popover']").popover();

});

2. 选项

可以在元素上以 data-* 的方式使用,或js调用

选项名 : 值类型/默认值 ; data属性名称 ; 说明

animation : boolean/true ; data-animation ; 显示/隐藏的过渡效果

html : boolean/false ; data-html ; 能够识别title中的html标签并渲染, 默认直接输出

...

(属性和tooltip插件类似, 不展开了...)

3. 方法

.popover('toggle') : 切换显示/隐藏弹出框 $('#element').popover('toggle')

...

(属性和tooltip插件类似, 不展开了...)

4. 事件

show.bs.popover : 当show被调用后理解触发事件,此时弹出框还没被渲染

...

(属性和tooltip插件类似, 不展开了...)

5. 实例

左侧的 Popover

</button>

顶部的 Popover

</button>

底部的 Popover

</button>

右侧的 Popover

</button>

<a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>" data-container="body" data-toggle="popover" data-content="<h4>Popover 中的一些内容 —— options 方法</h4>">

Popover

</a>

</p>

$(function () { $('.popover-show').popover('show');});

$(function () { $('.popover-hide').popover('hide');});

$(function () { $('.popover-destroy').popover('destroy');});

$(function () { $('.popover-toggle').popover('toggle');});

$(function () { $(".popover-options a").popover({html : true });});

</script>

</div>

第八个警告框插件(Alert)

就是把一些提示信息放在一个盒子元素中,加上一些醒目的颜色样式, 起到警告的作用,和页面上的其他元素是共存的,是静态的,当然可以是动态来触发,

有个小特色就是可以关闭这个盒子.

1. 用法

1) data属性 : 给元素添加 data-dismiss="alert"属性, 就能为警告框添加关闭功能

×d

</a>

<strong>警告！</strong>您的网络连接有问题。

</div>

2) js : 通过 JavaScript 添加可取消功能：

$(".alert").alert()

2. 方法

.alert() : 让警告框都带有关闭功能 ; $('#identifier').alert();

.alert('close') : 关闭警告框 ; $('#identifier').alert('close');

提示:

如果在关闭时启用动画效果, 可以给组件添加 .fade和.in 类

3. 事件

close.bs.alert : 调用close时触发,元素还在界面上

closed.bs.alert : 元素已经不在界面上,触发

4. 实例

<strong>成功！</strong>结果是成功的。

</div>

<strong>警告！</strong>您的网络连接有问题。

</div>

$(function(){

$(".close").click(function(){

$("#myAlert").alert();

});

</script>

第九个按钮插件(button.js)

可以给按钮添加一些交互

1. 加载状态

如需向按钮添加加载状态, 只需要简单的像<button> 添加data-loading-text="Loading..."作为其属性

加载状态

</button>

2. 单个切换

按钮点击一下被按下去的效果, 再点击一下就弹出来的效果, 只需给button 添加 data-toggle="button"

单个切换

</button>

3. 按钮组样式的复选框

一个按钮组(.btn-group的元素) 添加属性data-toggle="buttons"来实现效果

<input type="checkbox"> 选项 1

</label>

<input type="checkbox"> 选项 2

</label>

<input type="checkbox"> 选项 3

</label>

</div>

4. 按钮组样式的单选框

<input type="radio" name="options" id="option1"> 选项 1

</label>

<input type="radio" name="options" id="option2"> 选项 2

</label>

<input type="radio" name="options" id="option3"> 选项 3

</label>

</div>

5. 方法

方法的调用:　$("#id").button(["***"]);

button('toggle') :切换按压状态,赋予按钮被激活的外观

button('loading') : 当加载时,按钮是禁用的, 且<button>的文本是元素的data-loading-text属性的值.

button('reset') : 重置按钮状态, 恢复到最初状态

button(string) : 该方法中的字符串是指由用户声明的任何字符串, 使用该方法,重置按钮状态,并添加新的内容

例子:

</div>

<h4>演示 .button('loading') 方法</h4>

<button type="button" class="btn btn-primary"

data-loading-text="Loading...">原始

</button>

</div>

<h4>演示 .button('reset') 方法</h4>

<button type="button" class="btn btn-primary"

data-loading-text="Loading...">原始

</button>

</div>

<h4>演示 .button(string) 方法</h4>

<button type="button" class="btn btn-primary" id="myButton4"

data-complete-text="Loading finished">请点击我

</button>

$(function () {

$("#myButtons1 .btn").click(function(){

$(this).button('toggle');

});

$(function() {

$("#myButtons2 .btn").click(function(){

$(this).button('loading').delay(1000).queue(function() {

});

$(function() {

$("#myButtons3 .btn").click(function(){

$(this).button('loading').delay(1000).queue(function() {

$(this).button('reset');

});

$(function() {

$("#myButton4").click(function(){

$(this).button('loading').delay(1000).queue(function() {

$(this).button('complete');

});

</script>

第十个折叠插件 (collapse.js)

该插件可以很容易的让页面区域折叠起来, 无论用它来创建折叠导航还是内容面板,它都允许很多内容选项

1. 用法

1) 通过data属性 : 向元素添加data-toggle="collapse" 和data-target="#id" (他可以当css选择器一样使用);

在内容块上需要使用 .collapse类, 如果默认是打开的话还要额外添加 .in类;

为了向可折叠控件添加类似折叠面板的分组管理, 请添加属性 data-parent="#selector"

2) 通过js 使用:

$('.collapse').collapse()

2. 选项

选项名 : 值类型/默认值 : data属性名称 : 说明

parent : selector/false : data-parent : 如果提供了一个选择器,但可折叠项目显示时,指定父元素下的所有可折叠的元素将被关闭.依赖于accordion-group类

toggle : boolean/true : data-toggle : 切换调用可折叠元素

3. 方法

js函数的调用 $('#identifier').collapse(['***']);

.collapse(options) : 激活内容为可折叠元素, 接受一个可选的options对象 :　$('#identifier').collapse({toggle:false})

.collapse('toggle') : 切换显示/隐藏可折叠元素 ; $('#identifier').collapse('toggle')

.collapse('show') :　显示

.collapse('hide') : 隐藏

4. 事件`

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

shown.bs.collapse 当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）。

hide.bs.collapse 当调用 hide 实例方法时立即触发该事件。

hidden.bs.collapse 当折叠元素对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。

5. 实例

面板折叠js 触发

点击我进行展开，再次点击我进行折叠。第 1 部分--hide 方法

</a>

</h4>

</div>

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred

nesciunt sapiente ea proident. Ad vegan excepteur butcher vice

lomo.

</div>

点击我进行展开，再次点击我进行折叠。第 2 部分--show 方法

</a>

</h4>

</div>

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred

nesciunt sapiente ea proident. Ad vegan excepteur butcher vice

lomo.

</div>

$(function () { $('#collapseFour').collapse({

toggle: false

})});

$(function () { $('#collapseTwo').collapse('show')});

$(function () { $('#collapseThree').collapse('toggle')});

$(function () { $('#collapseOne').collapse('hide')});

</script>

面板折叠没js的

点击我进行展开，再次点击我进行折叠。第 1 部分

</a>

</h4>

</div>

Nihil anim keffiyeh helvetica, craft beer labore wes anderson

cred nesciunt sapiente ea proident. Ad vegan excepteur butcher

vice lomo.

</div>

<a data-toggle="collapse" data-parent="#accordion"

href="#collapseTwo">

点击我进行展开，再次点击我进行折叠。第 2 部分

</a>

</h4>

</div>

Nihil anim keffiyeh helvetica, craft beer labore wes anderson

cred nesciunt sapiente ea proident. Ad vegan excepteur butcher

vice lomo.

</div>

简单的折叠内容块:

<button type="button" class="btn btn-primary" data-toggle="collapse"

data-target="#demo">

简单的可折叠组件

</button>

Nihil anim keffiyeh helvetica, craft beer labore wes anderson

cred nesciunt sapiente ea proident. Ad vegan excepteur butcher

vice lomo.

</div>

第十一个轮播插件(carousel.js)

是显示一个循环播放元素的通用组件(类时幻灯片的效果), 其中内容也是灵活的多样的, 可以是图像, 内嵌框架, 视频或其他任何类型的内容

1. 用法

1) 通过data属性 :

data-slide 接受关键字prev或next,用来改变幻灯片相对于当前位置的位置

data-slide-to 来想轮播传递一个原始滑动索引,如: data-slide-to="2" 将吧滑块移动到一个特定的索引(索引从0开始)

data-ride="carousel" 用于标记轮播在页面加载时就可以开始动画播放(就是自己切换幻灯片)

2) 通过 js :

$('.carousel').carousel()

2. 选项

选项可以通过data 或js来设置,js中是命名一个对象来传递的

选项名 : 值类型/默认值 : data属性名称 : 说明

interval : number/5000 : data-interval : 自动循环每个项目的延迟时间, 如果为false,轮播组件将不会自动循环

pause : string/hover : data-pause : 鼠标进入时暂停轮播循环,鼠标离开恢复轮播循环

wrap : boolean/false : data-warp : 轮播是否连续循环

3. 方法

.carousel(options) : 初始化轮播组件,并开始循环项目可以有一个可选的options对象 $('#identifier').carousel( {interval: 2000} )

.carousel('cycle') : 从左到右循环轮播项目 $('#identifier').carousel('cycle')

.carousel('pause') : 停止轮播循环项目

.carousel(number) : 循环轮播到某个特定的项目,(从0开始记数)

.carousel('prev') : 循环轮播到上一个项目

.carousel('next') : 循环轮播到下一个项目

4. 事件

slide.bs.carousel : 当调用slide实例方法时立即触发 (幻灯片切换前触发)

slid.bs.carousel : 当轮播完成幻灯片过渡效果时触发该事件

5. 实例

基本例子(存data-* api实现),第二个标签页有标题

</ol>

</div>

</div>

<a class="carousel-control left" href="#myCarousel"

data-slide="prev">&lsaquo;</a>

<a class="carousel-control right" href="#myCarousel"

data-slide="next">&rsaquo;</a>

</div>

js调用例子

<li data-target="#myCarousel" data-slide-to="0"

class="active"></li>

</ol>

</div>

</div>

</div>

<a class="carousel-control left" href="#myCarousel"

data-slide="prev">&lsaquo;</a>

<a class="carousel-control right" href="#myCarousel"

data-slide="next">&rsaquo;</a>

</div>

$(function(){

// 初始化轮播

$(".start-slide").click(function(){

$("#myCarousel").carousel('cycle');

});

// 停止轮播

$(".pause-slide").click(function(){

$("#myCarousel").carousel('pause');

});

// 循环轮播到上一个项目

$(".prev-slide").click(function(){

$("#myCarousel").carousel('prev');

});

// 循环轮播到下一个项目

$(".next-slide").click(function(){

$("#myCarousel").carousel('next');

});

// 循环轮播到某个特定的帧

$(".slide-one").click(function(){

$("#myCarousel").carousel(0);

});

$(".slide-two").click(function(){

$("#myCarousel").carousel(1);

});

$(".slide-three").click(function(){

$("#myCarousel").carousel(2);

});

</script>

第十六个附加导航插件(affix.js)

该组件允许某一个<div>固定在页面的某个位置,不会因为滚动条的滚动而滚动消失,应用如很多网站的回到顶部的按钮.

1. 用法

1) 通过data属性 : 只需在元素上添加 data-spy="affix" ;

请配合偏移属性data-offset-top="**" 来一起使用(该元素初始化时是根据父元素的相对定位,

当滚动页面会马上变为绝对定位了, offset属性设置了,在页面滚动多少偏移量后让其便为绝对定位)

</ul>

</div>

...

</div>

2) 通过js使用: 通过js手动为某元素添加affix,代码如下:

$('#myAffix').affix({

offset: {

top: 100, bottom: function () { //底部偏移的值是函数动态计算的

return (this.bottom =

$('.bs-footer').outerHeight(true))

}

})

实例:

$(document).ready(function(){

$("#myNav").affix({

offset: {

top: 125

}

});

</script>

</ul>

</div>

...

</div>

...

</div>

2. 通过css定位

该插件的原理是使用3个bootstrap的 css样式来动态定位组件位置的, 分别是.affix .affix-top .affix-bottom ;

1) 初始时, 组件会被设置 .affix-top类(定义的是offset-bottom就是 .affix-bottom类); 这个时候没有定位设置就是在其父元素的内部的相对位置

2) 当滚动经过添加了affix的组件时, 此时.affix-top类被替换为 .affix类; 同时设置position:fixed样式

3) 果定义了底部偏移，当滚动到达该位置时，应把 .affix 替换为 .affix-bottom。由于偏移是可选的，假如设置了该偏移，则要求同时设置适当的 CSS。在这种情况下，请在必要的时候添加 position: absolute;。

3. 选项

可通过data属性或js传递

offset : 类型: number|function|object 默认值:10 ; data属性名: data-offset | data-offset-top | data-offset-bottom

说明: 当计算滚动位置时, 距离顶部的偏移像素,如果给data-offset 设置了一个数字, 则该偏移量的值将被应用到顶部和底部; js中对象的使用是offet:{top:10} 或offset:{top:10,bottom:5}

如果需要动态计算偏移, 就是使用函数来返回数字(js用法中的示例代码中有函数的使用)

喜欢