5.8.2　JavaScript用法

5.8.2　JavaScript用法

警告框插件，在JavaScript手工用法上提供了如下几种用法：

1）当页面容器全部禁用了警告框之后，如何恢复该功能？通过第2章的内容可以得知，禁用一个插件很容易，只需禁用该插件所在命名空间的触发事件即可。示例如下：

$(document).off('.alert.data-api');        // 禁用所有的警告框功能

这样就禁用了整个警告框alert插件的功能了。要恢复该插件有两种形式，一种是使用jQuery中fn上的alert函数进行恢复。示例如下：

$('[data-dismiss="alert"]').alert();       // 恢复所有的警告框功能

还有一种复杂一点的用法如下：

$(document).on('click.bs.alert.data-api', '[data-dismiss="alert"]', 
$.fn.alert.Constructor.prototype.close)
// 恢复所有的警告框功能

上述方法是alert插件的原始绑定方法，即绑定整个DOM元素上所有的警告框事件，并使用bs.alert.data-api命名空间。

2）某些时候，可能不需要恢复所有的警告框功能，这时候需要开启警告框的那个按钮元素（或x号，或a链接）值的一个特殊的id值即可，然后针对该id选择器进行绑定。示例代码如下：

$('#btnClose').alert();                    // 开启id为btnClose元素上的警告框功能

注意，以上所有的警告框恢复（或开启）功能，需要在“关闭”按钮元素上设置自定义属性data-dismiss="alert"，否则不会触发关闭功能。读者可能要问了，不设置自定义属性，如何触发警告框事件？可利用插件传递可选参数这一特性来实现这一功能。示例如下：

$("#btnClose").on("click", function () {
   $(this).alert('close');      // 单击时，关闭警告框
});

上述代码是在“关闭”按钮元素被单击时，直接调用alert插件的close方法进行关闭。这种方式是直接的关闭方法，我们会在下一小节源码分析的时候讲述关闭原理。

最后，alert插件还提供了两个自定义事件，以便开发人员可以在此事件上进行绑定，进行特殊代码的处理，事件内容如表5-15所示。

5.8.2　JavaScript用法 - 图1

警告框的事件用法如下：

$('#btnClose').on('close.bs.alert', function () {
    // alert("即将关闭");
})
 
$('#btnClose').on('closed.bs.alert', function () {
    // alert("关闭成功");
})

5.8.2 JavaScript用法