Twitter Bootstrap的Tab插件中"data-api"的含义是什么？

Question

有一段代码

/* TAB DATA-API
 * ============ */

 $(function () {
   $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
     e.preventDefault()
     $(this).tab('show')
   })
 })

在文件Bootstrap - 选项卡 我不明白'click.tab.data-api'和'[data-toggle="tab"], [data-toggle="pill"]'

谁能为我解释一下？谢谢~~

Answer 1

这click.tab.data-api是一个带有命名空间'tab.data-api'的click事件.你可以在这里查看文档(事件和命名空间部分).

如果我没记错的话,data-*是Html5标准中的一个新的自定义数据属性,当你想要定义自己的属性或数据时它很方便.看看约翰的帖子解释数据属性.

Answer 2

Bootstrap开发人员标记他们的点击事件以避免触及您的点击事件.

它实际上是一个普通的单击事件处理程序,但添加了一个jQuery命名空间,对解除绑定非常有用.

$('body').on('click', handler1)是一样的$('body').on('click.something', handler2) 既将绑定和处理单击事件.您通常会在事件上绑定一个处理程序,但有时您需要更多同时响应.

稍后如果要解除绑定,可以使用$('body').off('click')删除两个处理程序,或$('body').off('.something')仅删除第二个处理程序.

http://api.jquery.com/on/#event-names