深入Bootstrap中data属性

学了Bootrap有一段时间了，突然想到了一个问题，就是有关于data属性。

有心的人都会发现，Bootstrap许多的效果都有class=””来实现的，而这个data属性在这里就显得比较的特别。

首先，这里的data属性是什么？是属于Bootstrap的吗？data属性有什么用？

这里的data属性是HTML5允许开发者自由为其标签添加属性，这种自定义属性一般以“data-”开头。

关于data-*的定义和用法：

data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

   data-*属性包括两部分：

• 属性名不应该包含任何大写字母，并且在前缀“data-”之后必须有至少一个字符。
• 属性值可以是任意字符串

所以说，这里的data属性不属于Bootstrap的，是属于HTML5中的，这里只是Bootstrap开发者自定义的一个自定义属性，方便于用户调用。

让我们来看看Bootstrap api是怎么解释data属性的作用的：

你可以仅仅通过data属性API就能使用所有的Bootstrap插件，无需写一行JavaScript代码。这是Bootstrap中的一等API，也应该是你的首选方式。

话又说回来，在某些情况下可能需要将此功能关闭。因此，我们还提供了关闭data属性API的方式，即解除绑定到文档命名空间上的所有事件data-api。就像下面这样： 

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

另外，如果是针对某个特定的插件，只需在data-api前面添加那个插件的名称作为命名空间，如下：

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

总结一下，bootstrap中的data-api是方便我们调用bootstrap.js中各种包括JQuery.js在内的丰富的插件。
需要注意的是，JQuery插件为Bootstrap的组件赋予了“生命”。可以简单地一次性引入所有插件，或单个引入到你的页面。插件的单个引用（使用Bootstrap提供的单个*.js文件），或一次性全部引入（使用bootstrap.js或压缩版的bootstrap.min.js）。

下面总结一下常见的Bootstrap中的data-属性。

（1）、data-toggle

data-toggle主要用于标签选择器，参见其于bootstrap.css中的部分源码：

[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

例如：

  
  

    ...
  

这里data-toggle=”dropdown”设置为a的属性，用于切换下拉菜单。

data-toggle非常常用，常见的有下拉菜单，配合data-target一起使用。data-toggle，用于告诉 JavaScript 需要对按钮做什么。data-target，指示要切换到哪一个元素。

（2）、data-target

data-target主要用于配合data-toggle使用，常用于模态窗口、轮播图，作用是指定加载以及切换的目标。

在模态窗口中配合data-toggle一起使用：

 在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框（带有 id="identifier"）。

bootstrap.js中关于data-toggle与data-target的部分源码：

var Collapse = function (element, options) {
    this.$element      = $(element)
    this.options       = $.extend({}, Collapse.DEFAULTS, options)
    this.$trigger      = $('[data-toggle="collapse"][href="#' + element.id + '"],' +
                           '[data-toggle="collapse"][data-target="#' + element.id + '"]')
this.transitioning = null

下拉菜单示例：

  
    下拉菜单（Dropdown） 
  
  

    ...
  

模态窗口示例：

开始演示模态框


                                                                                                                                   

轮播图示例：

  
    

        

        …
    
  
 
 

 

（3）、data-dismiss

常见的是在模态窗口中用于关闭模态窗口  data-dismiss="modal"

（4）、data-slide-to、data-slide、data-ride

data-slide-to、data-slide、data-ride用于轮播图carousel。

• 属性 data-slide接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
• 使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to="2"将把滑块移动到一个特定的索引，索引从 0开始计数。
• data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放

在bootstrap.js中关于data-slide-to、data-slide、data-ride的部分源码：

// CAROUSEL DATA-API
// =================

  var clickHandler = function (e) {
    var href
    var $this   = $(this)
    var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
    if (!$target.hasClass('carousel')) return
    var options = $.extend({}, $target.data(), $this.data())
    var slideIndex = $this.attr('data-slide-to')
    if (slideIndex) options.interval = false

    Plugin.call($target, options)

    if (slideIndex) {
      $target.data('bs.carousel').to(slideIndex)
    }

    e.preventDefault()
  }

  $(document)
    .on('click.bs.carousel.data-api', '[data-slide]', clickHandler)
    .on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)

  $(window).on('load', function () {
    $('[data-ride="carousel"]').each(function () {
      var $carousel = $(this)
      Plugin.call($carousel, $carousel.data())
    })
  })

}(jQuery);