Bootstrap 警告框和按钮插件

一、警告框插件

1. 用法

有以下两种方式启用警告框的可取消（dismissal）功能：
（1）通过 data 属性：通过数据 API 添加可取消功能，只需要向关闭按钮添加 data-dismiss="alert"，就会自动为警告框添加关闭功能。

<a class="close" data-dismiss="alert" href="#" aria-hidden="true">×</a>

（2）通过 JavaScript：通过 JavaScript 添加可取消功能：
$(".alert").alert()

<div class="alert alert-warning">    <a href="#" class="close" data-dismiss="alert">        ×    </a>    <strong>警告！</strong>您的网络连接有问题。</div>

2. 方法
方法描述实例.alert()该方法让所有的警告框都带有关闭功能。

$('#identifier').alert();

Close Method .alert('close')关闭所有的警告框。

$('#identifier').alert('close');

3. 事件
事件描述实例close.bs.alert当调用 close 实例方法时立即触发该事件。

$('#myalert').bind('close.bs.alert', function () {  // 执行一些动作...})

closed.bs.alert当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）。

$('#myalert').bind('closed.bs.alert', function () {// 执行一些动作...})

二、按钮插件
1. 加载状态
如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可。

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..."     type="button"> 加载状态</button><script>    $(function() {        $(".btn").click(function(){            $(this).button('loading').delay(1000).queue(function() {            // $(this).button('reset');            // $(this).dequeue();             });        });    });  </script>

2. 单个切换
如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle="button" 作为其属性即可。
3. 复选框
您可以创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框组的切换。

<div class="btn-group" data-toggle="buttons">    <label class="btn btn-primary">        <input type="checkbox"> 选项 1    </label>    <label class="btn btn-primary">        <input type="checkbox"> 选项 2    </label>    <label class="btn btn-primary">        <input type="checkbox"> 选项 3    </label></div>

注意：创建单选按钮组与其类似。
4. 用法
通过 JavaScript 启用按钮（Button）插件，如下所示：
$('.btn').button()
5. 方法
方法描述实例button('toggle')切换按压状态。赋予按钮被激活的外观。您可以使用 data-toggle 属性启用按钮的自动切换。

$().button('toggle')

.button('loading')当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值。

$().button('loading')

.button('reset')重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。

$().button('reset')

.button(string)该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。

$().button(string)

<h2>点击每个按钮查看方法效果</h2><h4>演示 .button('toggle') 方法</h4><div id="myButtons1" class="bs-example">    <button type="button" class="btn btn-primary">原始</button></div> <h4>演示 .button('loading') 方法</h4><div id="myButtons2" class="bs-example">    <button type="button" class="btn btn-primary"         data-loading-text="Loading...">原始    </button></div> <h4>演示 .button('reset') 方法</h4><div id="myButtons3" class="bs-example">    <button type="button" class="btn btn-primary"         data-loading-text="Loading...">原始    </button></div> <h4>演示 .button(string) 方法</h4><button type="button" class="btn btn-primary" id="myButton4"     data-complete-text="Loading finished">请点击我</button><script>$(function () {        $("#myButtons1 .btn").click(function(){            $(this).button('toggle');        });    });    $(function() {         $("#myButtons2 .btn").click(function(){            $(this).button('loading').delay(1000).queue(function() {            });                });    });       $(function() {         $("#myButtons3 .btn").click(function(){            $(this).button('loading').delay(1000).queue(function() {                $(this).button('reset');            });                });    });     $(function() {         $("#myButton4").click(function(){            $(this).button('loading').delay(1000).queue(function() {                $(this).button('complete');            });                });    });</script>