8.1.1 使用插件的两种方式

发表于 更新于 分类于 ， ， Waline： 本文字数： 1.2k 阅读时长 ≈ 1 分钟

8.1.1 使用插件的两种方式

Bootstrap提供了两种使用插件的方式。

  1. 使用data-*属性:data-*属性是HTML 5的一个新特性,data-*属性用于存储页面或应用程序的自定义数据,这些自定义数据可以被JS读取、利用,用于创建更好的用户体验。Bootstrap会负责读取这些data-*属性的值,并根据这些属性的值来启用JS插件的功能。
  2. 使用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种调用方式。

  1. 无参数调用:例如$('#myModal').modal();,启用默认初始化
  2. 传入字符串参数:例如$('#myModal').modal('show');,初始化后立即调用show方法
  3. 传入JS对象指定选项:例如$('#myModal').modal({keyboard:false});