Bootstrap3实用教程
4.1.5 插件的选项
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Bootstrap插件

概述

插件防止冲突

插件的调用方式

引入插件

插件的原理

插件的选项

为了对插件提供更多的控制,Bootstrap为插件提供了一些选项。所有的插件的所有选项都可以通过 data 属性或JavaScript进行设置。

如果使用 data 属性,则要将选项名称放在 data- 的后面。比如,模态对话框的 keyboard 属性,就要写成类似于 data-keyboard="" 的形式。如:

<a data-toggle="modal" data-target="#myModal" data-keyboard="false">Demo</a>

如果使用JavaScript代码,直接使用选项名称即可。如:

<script>
$('#myModal').modal({
  keyboard: false
})
</script>

Bootstrap中的所有插件,都可以通过 $(selector).data() 方法来获取这些 data-* 属性,它会收集指定元素上以 data- 开头的自定义属性,并合并为一个对象字面量。假设以下HTML代码片段:

<a id="launch" data-toggle="modal" data-target="#myModal">Launch Modal</a>

如果要获取某个data-* 属性的值,则要将选项名称作为 data() 方法的参数。如,要获取data-toggle 属性的值,要将 toggle作为 data() 方法的参数:

$('#launch').data('toggle')

在调用 data() 方法时,如果没有传递任何参数,则表示一次性收集所有以 data- 开头的属性的值,并返回一个对象字面量。假设这样调用:

$('#launch').data()

其结果就跟使用以下方式声明一个 value 变量是一样的:

var value = {
  toggle: 'modal',
  target: 'target'
}

Bootstrap中的很多插件都是利用这个特性,在HTML元素上自定义一些必要的参数,然后在脚本中通过 data() 方法来收集这些参数,并加以使用。

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验