Bootstrap3 插件的调用方式

插件的调用方式

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 上开源。

Bootstrap3 插件的调用方式相关推荐

Bootstrap3 轮番插件的调用方式
轮番插件的调用方式 1.JavaScript调用 JavaScript调用轮番其实很简单,只需在脚本中调用 carousel() 方法即可.格式为: $('.carousel').carousel() ...
Bootstrap3 折叠插件的调用方式
折叠插件的调用方式折叠插件的结构相对复杂,但调用比较简单,可以通过data属性调用,也可以通过JavaScript调用. 1.data 属性调用要激活折叠插件的激活行为,首先为标题部分的链接定义 ...
Bootstrap3 滚动监听插件的调用方式
滚动监听插件的调用方式无论何种实现方式,滚动监听都需要被监听的组件是position: relative;即相对定位方式.大多数时候是监听<body>元素. 1.data属性调用只需给 ...
Bootstrap 轮番插件Collapse 调用方式
调用方式 1.JavaScript调用 JavaScript调用轮番其实很简单,只需在脚本中调用 carousel() 方法即可.格式为: $('.carousel').carousel(); Boo ...
Bootstrap 折叠插件Collapse 调用方式
调用方式 Bootstrap折叠插件Collapse的结构相对复杂,但调用比较简单,可以通过data属性调用,也可以通过JavaScript调用. 1.data 属性调用要激活折叠插件的激活行为,首 ...
Bootstrap3 下拉菜单及其调用方式
下拉菜单 Bootstrap中,你可以为任何组件(如,导航条.胶囊式导航.标签导航.按钮等)添加下拉菜单.下拉菜单组件负责外观,下拉菜单插件(dropdown.js)负责交互行为,即控制下拉菜单组件的 ...
Bootstrap3 模态对话框的调用方式
模态对话框的调用方式可以通过 data 属性或 JavaScript,让模态框动态显示或隐藏.Bootstrap会为<body>元素添加.modal-open类来覆盖页面默认的滚动行为, ...
Bootstrap 模态框插件modal的调用方式
调用方式 1.data属性调用使用 data 属性调用模态对话框时,一般要设置两个属性,一个是 data-toggle 属性,另一个是 data-target 属性. data-toggle 属性定 ...
mysql plugin 调用_MySQL插件接口的调用方式
author:sufei 版本:8.0.16 一.简介首先简单说明一下插件的实现原理在程序的合适位置(挂钩处)安插相应的函数指针,相应的结构类似:if (fun_ptr != null) fun_ ...

Bootstrap3 插件的调用方式

插件的调用方式

Bootstrap3 插件的调用方式相关推荐

最新文章

热门文章