Bootstrap2用户指南
5.1.2 调用插件
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

Bootstrap组件

Bootstrap插件

概述

导入插件

调用插件

Bootstrap的所有插件,都支持两种调用方式,一种是 data 属性调用,一种是JavaScript调用,可以根据需要选择其中一种使用。

1、data属性调用

使用 data 属性调用,只需为HTML元素添加相应的 data-* 属性,而无需再添加额外的JavaScript代码。在加载网页时,Bootstrap的JavaScript插件会自动检测这些元素,并自动绑定相应的事件。

data-* 属性是HTML5新支持的语法,它允许开发人员元素添加一些自定义属性,通过这些属性来存储页面或应用程序的私有数据,然后通过JavaScript获取数据并加以使用。

比如,Bootstrap中的 data-toggle 属性,用来存储要激活插件的类型。在脚本中,只要获取它的值,就知道要激活什么插件。如,取值“dropdown”,就表示激活下拉菜单:

<a class="btn" data-toggle="dropdown" href="#">Dropdown</a>

这种方法无需添加额外的JavaScript代码,它是最简单实用、最实用的方法,对于没有JavaScript基础的用户来说,建议首选这种调用方式。

说明:

在某些特殊情况下,可能需要解除对 data-* 属性的绑定。只需将 body 元素上,命名空间为 '.data-api' 的事件全部禁用即可。代码如下:

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

如果只想解除特定插件的 data-* 属性绑定,只需禁用该插件所在命名空间下的事件即可。如,只解除 alert 插件的 data-* 属性绑定:

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

2、JavaScript调用

Bootstrap为所有插件都提供了JavaScript API,可以使用这些API来调用相应的插件,而不必为元素定义 data-* 属性。

JavaScript的这些API跟jQuery的API用法相同,都支持单独调用和链式调用,并返回操作对象的集合。如:

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

所有的API,都可以接受一个可选的对象参数、或一个有特定意义的字符串、或不传递任何参数(即,使用默认默认值)。如:

$("#myModal").modal({ keyboard: false })   // 初始化时,keyboard 选项的值为 false
$("#myModal").modal('show')                // 初始化,并立即调用 show 方法
$("#myModal").modal()                      // 所有选项,均使用默认值进行初始化

所有的插件,都允许使用Constructor属性访问插件的构造函数。如:

$.fn.modal.Constructor

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验