5.9.1　声明式用法

5.9.1　声明式用法

按钮插件的声明式用法支持3种元素，分别是按钮（button）、复选框（input）、单选项（radio）。其实后面通过源码可以看出，对按钮判断的时候并没有限制button元素，所以应用了btn样式的a链接元素也是可以用的。我们先来看看以下例子：

<button type="button" class="btn btn-primary" data-toggle="button">反转状态</button>

只需要一个data-toggle="button"属性，就可以在单击的时候将按钮状态进行反转，其原理是在该元素上应用（或取消）.active样式。

而对于input元素来说，还有点不太一样，data-toggle="button"属性变成 data-toggle="buttons"属性。另外，除了反转.active样式以外，还反转了.disabled样式和disabled属性，即如果当前元素是活动的，则添加一个.disabled样式以及disabled=disabled属性，反转则去除disabled相关的内容。读者可以查看下面的两个示例，并查看单击以后的HTML代码。

下面的示例是复选框例子，即可以同时反转多个按钮。示例如下：

<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>

而单选框的话，顾名思义，反转的时候只能反转一个，同组radio按钮的状态同时只能选择一个。示例如下：

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary"><input type="radio" name="options" id=
        "option1">男</label>
    <label class="btn btn-primary"><input type="radio" name="options" id=
        "option2">女</label>
    <label class="btn btn-primary"><input type="radio" name="options" id=
        "option3">未知</label>
</div>

上述3种元素的状态反转，是通过两种属性的设置来实现的，即data-toggle="button"和data-toggle="buttons"。使用这种效果的时候不需要使用JavaScript代码，因为默认Bootstrap就已经为用户初始化好了。

但是还有另外一种情况不需要设置这种data-toggle属性的额外功能，这也是笔者最喜欢的一种功能，那就是可以设置自定义状态。举例如下：

<button type="button" id="btn1" class="btn btn-default" data-loading-text="
        正在加载...">获取内容</button>
// 触发代码
$(function () {
    $('#btn1').click(function () {
        var btn = $(this)
        btn.button('loading')
    });
});
// 或者，可以直接调用button插件，不需要click事件
$('#btn1').button('loading');

运行上述代码，可以看到，如果在该按钮的click事件上触发button组件，并传入loading参数，则自定义属性data-loading-text的值就会替换成按钮的文本内容（也就是“获取内容”更改为“正在加载…”）。而同样，如果传入abc参数，则该插件也会查询有没有data-abc-text这个自定义属性，如果有，也会将它的值设置成按钮的文本。示例如下：

<button type="button" id="btn2" class="btn btn-default" data-complete-text="已完
        成!">完成</button>
$(function () {
$('#btn2').click(function () {
    var btn = $(this)
        btn.button('complete')
    })
});
// 或者，可以直接调用button插件，不需要click事件
$('#btn2').button('complete');

因为这个参数可以随意定义，所以Bootstrap并没有提供任何初始化的操作，大家在用的时候，自行使用JavaScript代码调用即可。但是要注意，一旦修改了自定义状态，记得也要设定一个机制来恢复原来的状态（使用reset参数）。例如上述示例，要将按钮在3秒以后恢复状态（或者也可以在ajax的成功回调里恢复状态）。使用如下代码即可：

$(function () {
    $('#btn1').click(function () {
        var btn = $(this);
        btn.button('loading');
        setTimeout(function () {
            btn.button('reset');        // 重置按钮状态，文本也会被恢复原状
        }, 3000);
    })
});

注意

在Firefox浏览器上，如果一个按钮被禁用了（并且没有恢复），那在刷新页面以后，禁用状态不会改变。所以为了解决这个问题，只需要在按钮元素（或者按钮所在的表单元素）上，添加一个自定义属性autocomplete="off"即可。

5.9.1 声明式用法