首页 >web前端 >js教程 >Bootstrap插件的介绍与使用

Bootstrap插件的介绍与使用

零下一度
零下一度原创
2017-07-21 09:22:391551浏览

Bootstrap插件概览
在前面布局组件章节中所讨论的组件仅仅是个开始。Bootstrap自带的12种jQuery插件,扩展了功能,可以给站点添加更多的互动。即使您不是一名高级的js开发人员,
你也可以学习Bootstrap的js插件。利用Bootstrap数据api(Bootstrap Data API),大部分的插件可以在不编写任何代码的情况被触发。
站点引用bootstrap插件的方式有两种:
单独引用:使用Bootstrap的个别的*.js文件。一些插件和css组件依赖于其他插件。如果您单独引用插件,请先确保弄清楚这些插件之间的依赖关系。
编译(同时)引用:使用Bootstrap.js或压缩版的bootstrap.min.js
不要尝试同时引用这两个文件,因为bootstrap.js和bootstrap.min.js都包含了所有的插件。
所有的插件依赖于jQuery。所以必须在插件文件之前引用jQuery.请访问bower.json.查看boostrap当前支持的jQuery版本。
data属性
你可以仅仅通过data属性API就能使用所有的bootstap插件,无需写一行javascript代码。这是bootstrap中的一等api,也应该是你的首选方式。
话又说回来,在某些情况下可能需要将功能关闭。因此,我们还提供了关闭data属性API的方法,即解除以data-api为命名空间并绑定在文档上的事件。就像下面这样:
$(document).off('.data-api')
如需关闭一个特定的插件,只需要在data-api命名空间前加上该插件的名称作为命名空间即可,如下所示:
$(document).off('.alert.data-api')
编程方式的API
我们为所有Bootstrap插件提供纯javascript方式的API。所有公开的api都支持单独或链式调用方式,并且返回其所有操作的元素集合(注:和jQuery的调用形式一致)。
$('.btn.danger').button('toggle').addClass('fat')

导入

【一次性导入】

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

【单独导入】

  为方便单独导入特效文件,Bootstrap提供了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”

data属性

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

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

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

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

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

 

API

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

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

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

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

  每个插件还通过 Constructor 属性暴露了其原始的构造函数:$.fn.popover.Constructor。如果想获取某个插件的实例,可以直接通过页面元素获取:$('[rel="popover"]').data('popover')

【默认设置】

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

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

【避免命名空间冲突】

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

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

【事件】

  Bootstrap 为大部分插件所具有的动作提供了自定义事件。一般来说,这些事件都有不定式和过去式两种动词的命名形式,例如,不定式形式的动词(例如 show)表示其在事件开始时被触发;而过去式动词(如shown)表示在动作执行完毕之后被触发。

  所有 Bootstrap 事件的名称都采用命名空间方式。所有以不定式形式的动词命名的事件都提供了 preventDefault 功能。这就赋予在动作开始执行前将其停止的能力

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

 

过渡效果

  Bootstrap框架默认给各个组件提供了基本动画的过渡效果,如果要使用,有两种方法:

  ☑ 调用统一编译的bootstrap.js;

  ☑ 调用单一的过渡动画的JavaScript插件文件transition.js

  transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是,这些过渡动画都是采用CSS3来实现的,所以IE6-8浏览器是不具备这些过渡动画效果

  默认情况之下,Bootstrap框架中以下组件使用了过渡动画效果:

  ☑ 模态弹出窗(Modal)的滑动和渐变效果;

  ☑ 选项卡(Tab)的渐变效果;

  ☑ 警告框(Alert)的渐变效果;

  ☑ 图片轮播(Carousel)的滑动效果

  transition.js 是针对 transitionEnd 事件的一个基本辅助工具,也是对 CSS 过渡效果的模拟。它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果

  通过下面的代码可以在全局范围禁用过渡效果,并且必须将此代码放在transition.js(bootstrap.jsbootstrap.min.js)后面,确保在js文件加载完毕后再执行下面代码

$.support.transition = false

以上是Bootstrap插件的介绍与使用的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn