详解Bootstrap插件


Posted in Javascript onApril 25, 2016

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

站点引用 Bootstrap 插件的方式有两种

单独引用:使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。如果您单独引用插件,请先确保弄请这些插件之间的依赖关系。
编译(同时)引用:使用 bootstrap.js 或压缩版的 bootstrap.min.js。
“不要尝试同时引用这两个文件,因为 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。”

所有的插件依赖于 jQuery。所以必须在插件文件之前引用 jQuery。请访问 bower.json 查看 Bootstrap 当前支持的 jQuery 版本。

1、data 属性
你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API,也应该是你的首选方式。
话又说回来,在某些情况下可能需要将此功能关闭。因此,我们还提供了关闭 data 属性 API 的方法,即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样:
$(document).off('.data-api')
如需关闭一个特定的插件,只需要在 data-api 命名空间前加上该插件的名称作为命名空间即可,如下所示:
$(document).off('.alert.data-api')

2、编程方式的 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').

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

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

4、事件
Bootstrap 为大多数插件的独特行为提供了自定义事件。一般来说,这些事件有两种形式:

动词不定式:这会在事件开始时被触发。例如 ex: show。动词不定式事件提供了 preventDefault 功能。这使得在事件开始前可以停止操作的执行。

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

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

以上就是Bootstrap插件的简单概述,希望对大家了解Bootstrap插件有所帮助。

Javascript 相关文章推荐
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
vue-router 按需加载 component: () => import() 报错的解决
Sep 22 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
javascript对象3个属性特征
Nov 17 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 #Javascript
第六章之辅组类与响应式工具
Apr 25 #Javascript
第七章之菜单按钮图标组件
Apr 25 #Javascript
第九章之路径分页标签与徽章组件
Apr 25 #Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 #Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 #Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 #Javascript
You might like
MYSQL环境变量设置方法
2007/01/15 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
围观tangram js库
2010/12/28 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
vue.js表格分页示例
2016/10/18 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
vue之延时刷新实例
2019/11/14 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
django在开发中取消外键约束的实现
2020/05/20 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
学校招生宣传广告词
2014/03/19 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
高考学习决心书
2015/02/04 职场文书
2015年派出所工作总结
2015/04/24 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android