Bootstrap - Button插件( Button Plugin)
按钮在Bootstrap按钮一章中解释。 使用此插件，您可以添加一些交互，例如控制按钮状态，或者为工具栏等更多组件创建按钮组。
如果您想单独包含此插件功能，则需要button.js 。 另外，如Bootstrap插件概述一章所述，您可以包含bootstrap.js或缩小bootstrap.min.js 。
装货状态
要向按钮添加加载状态，只需将data-loading-text = "Loading..."作为属性添加到按钮元素，如以下示例所示 -
<button id = "fat-btn" class = "btn btn-primary" data-loading-text = "Loading..." type = "button">
Loading state
</button>
<script>
$(function() {
$(".btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
// $(this).button('reset');
});
});
});
</script>
当您单击按钮时，输出将如下图所示 -
新页面打开单切换
要在单个按钮上激活切换（即将按钮的正常状态更改为推动状态，反之亦然），请将data-toggle = "button"作为属性添加到按钮元素，如以下示例所示 -
<button type = "button" class = "btn btn-primary" data-toggle = "button">
Single toggle
</button>
复选框 (Checkbox)
您可以创建一组复选框，并通过简单地将数据属性data-toggle = "buttons"到btn-group.来添加切换到它btn-group.
<div class = "btn-group" data-toggle = "buttons">
<label class = "btn btn-primary">
<input type = "checkbox"> Option 1
</label>
<label class = "btn btn-primary">
<input type = "checkbox"> Option 2
</label>
<label class = "btn btn-primary">
<input type = "checkbox"> Option 3
</label>
</div>
Radio
类似地，您可以通过简单地将数据属性data-toggle = "buttons"到btn-group来创建一组无线电输入并添加切换到它。
<div class = "btn-group" data-toggle = "buttons">
<label class = "btn btn-primary">
<input type = "radio" name =" options" id = "option1"> Option 1
</label>
<label class = "btn btn-primary">
<input type = "radio" name = "options" id = "option2"> Option 2
</label>
<label class = "btn btn-primary">
<input type = "radio" name = "options" id = "option3"> Option 3
</label>
</div>
用法 (Usage)
您可以via JavaScript启用按钮插件，如下所示 -
$('.btn').button()
选项 (Options)
There are no options.
方法 (Methods)
下面给出了一些有用的按钮插件方法 -
| 方法 | 描述 | 例 |
|---|---|---|
| button('toggle') | 切换推送状态。 为按钮提供已激活的外观。 您还可以使用data-toggle属性启用自动切换按钮。 | |
| .button('loading') | 加载时，该按钮被禁用，文本将更改为button元素的data-loading-text属性中的选项 | |
| .button('reset') | 重置按钮状态，将原始内容恢复为文本。 当您需要将按钮返回到主状态时，此方法很有用 | |
| .button(string) | 此方法中的字符串是指用户声明的任何字符串。 要重置按钮状态并引入新内容，请使用此方法。 | |
例子 (Example)
以下示例演示了使用上述方法 -
<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>Example to demonstrate .button('toggle') method</h4>
<div id = "myButtons1" class = "bs-example">
<button type = "button" class = "btn btn-primary">Primary</button>
</div>
<h4>Example to demonstrate .button('loading') method</h4>
<div id = "myButtons2" class = "bs-example">
<button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
Primary
</button>
</div>
<h4>Example to demonstrate .button('reset') method</h4>
<div id = "myButtons3" class = "bs-example">
<button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
Primary
</button>
</div>
<h4>Example to demonstrate .button(string) method</h4>
<button type = "button" class = "btn btn-primary" id = "myButton4"
data-complete-text = "Loading finished">
Click Me
</button>
<script type = "text/javascript">
$(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>
