Bootstrap每天必学之js插件


Posted in Javascript onNovember 30, 2015

1、Bootstrap 插件概览

在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员,您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API(Bootstrap Data API),大部分的插件可以在不编写任何代码的情况被触发。

Bootstrap每天必学之js插件

2、导入JavaScript插件

Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。

Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入之前必须先导入jQuery库。

一次性导入:

Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js)。

<!—导入jQuery版本库,因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有Bootstrap的JavaScript插件(压缩版本) -->
<script src="js/bootstrap.min.js"></script>

单独导入:

为方便单独导入特效文件,Bootstrap V3.2中提供了12种JavaScript插件,他们分别是:

☑ 动画过渡(Transitions):对应的插件文件“transition.js”

☑ 模态弹窗(Modal):对应的插件文件“modal.js”

☑ 下拉菜单(Dropdown):对应的插件文件“dropdown.js”

☑ 滚动侦测(Scrollspy):对应的插件文件“scrollspy.js”

☑ 选项卡(Tab):对应的插件文件“tab.js”

☑ 提示框(Tooltips):对应的插件文件“tooltop.js”

☑ 弹出框(Popover):对应的插件文件“popover.js”

☑ 警告框(Alert):对应的插件文件“alert.js”

☑ 按钮(Buttons):对应的插件文件“button.js”

☑ 折叠/手风琴(Collapse):对应的插件文件“collapse.js”

☑ 图片轮播Carousel:对应的插件文件“carousel.js”

☑ 自动定位浮标Affix:对应的插件文件“affix.js”

3、data 属性

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

话又说回来,在某些情况下可能需要将此功能关闭。因此,我们还提供了关闭 data 属性 API 的方法,即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样:

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

如需关闭一个特定的插件,只需要在 data-api 命名空间前加上该插件的名称作为命名空间即可,如下所示:

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

4、编程方式的 API

我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式,并且返回其所操作的元素集合(注:和jQuery的调用形式一致)。例如:

$(".btn.danger").button("toggle").addClass("fat")

所有的方法都可以接受一个可选的选项对象作为参数,或者一个代表特定方法的字符串,或者不带任何参数(这种情况下,将会初始化插件为默认行为),如下所示:

// 初始化为默认行为
$("#myModal").modal() 
 // 初始化为不支持键盘 
$("#myModal").modal({ keyboard: false }) 
// 初始化并立即调用 show
$("#myModal").modal('show')

每个插件在 Constructor 属性上也暴露了其原始的构造函数:$.fn.popover.Constructor。如果您想获取某个特定插件的实例,可以直接通过页面元素获取:

 $('[rel=popover]').data('popover').

5、避免命名空间冲突

某些时候 Bootstrap 插件可能需要与其他 UI 框架一起使用。在这种情况下,可能会发生命名空间冲突。如果不幸发生了这种情况,你可以通过调用插件的 .noConflict 方法恢复其原始值。

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

6、事件

Bootstrap 为大多数插件的独特行为提供了自定义事件。一般来说,这些事件有两种形式:
动词不定式:这会在事件开始时被触发。例如 ex: show。动词不定式事件提供了 preventDefault 功能。这使得在事件开始前可以停止操作的执行。

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

过去分词形式:这会在动作执行完毕之后被触发。例如 ex: shown。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery学习基础知识小结
Nov 25 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
Bootstrap每天必学之面板
Nov 30 #Javascript
Bootstrap每天必学之媒体对象
Nov 30 #Javascript
javascript针对cookie的基本操作实例详解
Nov 30 #Javascript
javascript闭包(Closure)用法实例简析
Nov 30 #Javascript
详解JavaScript的流程控制语句
Nov 30 #Javascript
详解JavaScript的表达式与运算符
Nov 30 #Javascript
Bootstrap每天必学之进度条
Nov 30 #Javascript
You might like
用PHP生成静态HTML速度快类库
2007/03/18 PHP
PHP 身份验证方面的函数
2009/10/11 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
php提高网站效率的技巧
2015/09/29 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
Ext 今日学习总结
2010/09/19 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
webpack 处理CSS资源的实现
2019/09/27 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
python中reload(module)的用法示例详解
2017/09/15 Python
python队列queue模块详解
2018/04/27 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
python编写猜数字小游戏
2019/10/06 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
python和go语言的区别是什么
2020/07/20 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
数据库面试要点基本概念
2013/10/31 面试题
小学生家长评语集锦
2014/01/30 职场文书
5s推行计划书
2014/05/06 职场文书
消防宣传口号
2014/06/16 职场文书
公司踏青活动方案
2014/08/16 职场文书
授权委托书(完整版)
2014/09/10 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书