Bootstrap3实用教程
4.1.3 插件的调用方式
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Bootstrap插件

概述

引入插件

插件的原理

插件的调用方式

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

1、data属性API调用

使用 data 属性API调用,你只需按照Bootstrap的约定,为HTML元素添加相应的 data-* 属性,而无需再编写任何JavaScript代码。因此,这是最简单、最实用的方法,建议首选这种调用方式。

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

Bootstrap 中的每个插件,都有一些约定的 data-* 属性,插件会根据 data-* 属性的名称和取值,来完成特定的功能。如,data-toggle 属性,当取值“dropdown”时,就表示激活下拉菜单:

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

为HTML元素添加相应的 data-* 属性后,在加载网页时,Bootstrap插件会检测这些属性,并自动绑定相应的事件。而在某些特殊情况下,可能需要关闭data 属性API调用方式。因此,Bootstrap还提供了关闭 data 属性 API 的方法,即解除绑定在文档上并以data-api为命名空间的事件:

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

如果只想解除特定插件的 data-* 属性API,只需在 data-api 前面添加那个插件的名称作为命名空间即可。如,只解除 alert 插件的 data-* 属性API:

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

2、JavaScriptAPI调用

Bootstrap还为插件提供了纯 JavaScript 方式的API,你可以使用这些API来调用相应的插件。如果使用这种方式,则不必为元素定义 data-* 属性。

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

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

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

$("#myModal").modal({ keyboard: false })   // 初始化时,keyboard 选项的值为 false
$("#myModal").modal('show')              // 初始化后立即调用 show 方法
$("#myModal").modal()                   // 以默认值初始化

每个插件,都通过Constructor属性暴露了其原始的构造函数。如,以下代码可以获取模态框插件的构造函数:

$.fn.modal.Constructor

你也可以直接通过页面元素获取某个插件的实例。如:

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

每个插件,都可以通过修改其自身的Constructor.DEFAULTS对象,来改变插件的默认设置。例如,以下代码将模态框插件的 `keyboard` 参数的默认值设置为 false:

$.fn.modal.Constructor.DEFAULTS.keyboard = false

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验