8.1.1 使用插件的两种方式
Bootstrap提供了两种使用插件的方式。
- 使用
data-*属性:data-*属性是HTML 5的一个新特性,data-*属性用于存储页面或应用程序的自定义数据,这些自定义数据可以被JS读取、利用,用于创建更好的用户体验。Bootstrap会负责读取这些data-*属性的值,并根据这些属性的值来启用JS插件的功能。 - 使用
JS代码:使用类似前端框架的方式调用JS方法来使用JS插件。
两种方式的区别
事实上,使用data-*属性和JS代码两种方式的本质是一样的:当开发者在HTML标签上指定大量data-*属性之后,Bootstrap的JS插件会读取这些data-*属性,然后调用JS代码来启用JS插件的功能。由此可见,这两种方式的本质依然是通过JS脚本来提升用户体验。
区别之处在于
- 使用
data-*属性时由Bootstrap负责生成JS脚本来启用插件功能; - 使用JS脚本则可直接启用插件功能。
正因为使用data-*属性启用插件功能开发者无须书写任何JS代码,所以Bootstrap推荐通过这种方式来使用JS插件。
关闭插件的data属性
在某些特殊的时候,开发者可能需要通过JS方式来使用Bootstrap插件,此时就需要关闭插件的data-*属性。
如果需要关闭Bootstrap插件的data API功能,可调用如下代码:
1 | $(document).off('.data-api') |
上面代码关闭document及其所有子元素上绑定的data-*属性的功能。
另外,如果只是想关闭某个特定插件的功能,只需在data API前面添加那个插件的名称作为命名空间即可。例如如下代码关闭document 及其所有子元素上绑定的data-*属性和关于警告框的属性:
1 | $(document).off('.alert.data-api') |
当开发者打算使用JS代码来启用插件时,Bootstrap都提供了单独调用或链式调用的方式,方法返回所操作的元素集合(注:和jQuery的调用形式一致)。例如如下代码:
1 | $('.btn.danger')button('toggle').addClass('fat') |
Bootstap方法调用方式
Bootstrap提供的方法可支持3种调用方式。
- 无参数调用:例如
$('#myModal').modal();,启用默认初始化 - 传入字符串参数:例如
$('#myModal').modal('show');,初始化后立即调用show方法 - 传入JS对象指定选项:例如
$('#myModal').modal({keyboard:false});
原文链接: 8.1.1 使用插件的两种方式