Bootstrap Stateful Buttons
In this tutorial you will learn how to create toggle and loading Bootstrap buttons.
Controlling Button States
In the previous section you've learnt about the Bootstrap button styling and the modifications as well as how to create button groups and toolbars. With Bootstrap you can do even more with buttons like controlling the states of buttons, make checkbox and radio inputs behaves like toggle buttons, etc. Well, let's discuss about them in detail.
Creating Single Toggle Button
You can activate toggling (i.e. change the normal state of a button to a push state and vice versa) on a single button by simply adding the data attribute data-toggle="button".
<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle Button</button>
— The toggle button upon click will look something like this:
Add Loading State on Buttons
You can change the normal state of a button to a loading state by simply adding the data attribute data-loading-text="Loading..." to a button.
<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
— The loading button upon click will look something like this:
Note: Mozilla firefox persists the disabled state across page loads, to prevent this behavior, you may simply set autocomplete="off" on the form containing the buttons, or directly to the input or button element.
Creating Buttons Checkbox
You can add the attribute data-toggle="buttons" to a group of checkboxes for checkbox style toggling on button groups, as shown in the following example:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" name="options"> Option 1
</label><label class="btn btn-primary">
<input type="checkbox" name="options"> Option 2
</label><label class="btn btn-primary">
<input type="checkbox" name="options"> Option 3
</label></div>
— 上面示例的输出将如下所示：
Add the class .active on input's label element if you want options pre-checked by default.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" name="options"> Option 1
</label><label class="btn btn-primary">
<input type="checkbox" name="options"> Option 2
</label><label class="btn btn-primary active">
<input type="checkbox" name="options"> Option 3
</label></div>
— 上面示例的输出将如下所示：
Note: The .active class only changes the visual appearance of buttons radio and checkboxes to make them look like selected. To actually preselect them you need to apply the checked attribute on the input element yourself.
Creating Buttons Radio
Similarly, you can add the attribute data-toggle="buttons" to a group of radio inputs for radio buttons style toggling on button groups, like this:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options"> Option 1
</label><label class="btn btn-primary">
<input type="radio" name="options"> Option 2
</label><label class="btn btn-primary">
<input type="radio" name="options"> Option 3
</label></div>
— 上面示例的输出将如下所示：
Add the class .active on input's label element if you want an option pre-selected by default.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options"> Option 1
</label><label class="btn btn-primary">
<input type="radio" name="options"> Option 2
</label><label class="btn btn-primary">
<input type="radio" name="options"> Option 3
</label></div>
— 上面示例的输出将如下所示：
Enable Buttons via JavaScript
You may also enable buttons via JavaScript:
<script type="text/javascript">
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).button('loading').delay(500).queue(function(){
$(this).button('reset');
$(this).dequeue();
});
});
});
</script>
Options
None
Methods
These are the standard bootstrap's buttons methods:
$().button('toggle')
This method toggles push state of the button. It changes the appearance of the button, and makes it look like that it has been activated. You can also enable auto toggling of a button by using the data-toggle attribute.
<script type="text/javascript">
$(document).ready(function(){
$("#myButton").click(function(){
$(this).button('toggle');
});
});
</script>
$().button('loading')
This method sets the button state to loading. When loading, the button is disabled and the text is swapped with the value of data-loading-text attribute of button element.
<script type="text/javascript">
$(document).ready(function(){
$("#myButton").click(function(){
$(this).button('loading');
});
});
</script>
Note: The use of data-loading-text and $().button('loading') has been deprecated since Bootstrap v3.3.6 and will be removed from v4. You should better use $().button(string) method to ensure future compatibility.
$().button('reset')
This method resets button state by swapping text to original text.
<script type="text/javascript">
$(document).ready(function(){
$("#myButton").click(function(){
$(this).button('loading').delay(1000).queue(function(){
$(this).button('reset');
$(this).dequeue();
});
});
});
</script>
$().button(string)
This method resets button state by swapping text to any data defined text state.
<script type="text/javascript">
$(document).ready(function(){
$("#myButton").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('complete');
$(this).dequeue();
});
});
});
</script>
