Bootstrap Button Plugin
Buttons have been introduced in the Bootstrap Buttons chapter. With the Button plugin, you can add in some interactions such as controlling button states, or creating button groups for other components like toolbars.
Loading State
To add a loading state to a button, simply add the data-loading-text="Loading..." attribute to the button element, as shown in the example below:
Example
<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');
// $(this).dequeue();
});
});
});
</script>
The result is as follows:
Single Toggle
To activate a single button's toggle (i.e., change the button's normal state to a pressed state and vice versa), simply add the data-toggle="button" attribute to the button element, as shown in the example below:
Example
<button type="button" class="btn btn-primary"
data-toggle="button"> Single Toggle
</button>
The result is as follows:
Checkbox
You can create checkbox groups and add toggle for the checkbox group by adding the data-toggle="buttons" attribute to the btn-group.
Example
<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>
The result is as follows:
Radio
Similarly, you can create radio button groups and add toggle for the radio button group by adding the data-toggle="buttons" attribute to the btn-group.
Example
<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>
The result is as follows:
Usage
You can enable the Button plugin via JavaScript, as shown below:
$('.btn').button()
Options
No options.
Methods
Here are some useful methods in the Button plugin:
| Method | Description | Example |
|---|---|---|
| button('toggle') | Toggles push state. Gives the button an activated appearance. You can enable automatic toggling of a button with the data-toggle attribute. | $().button('toggle') |
| .button('loading') | When loading, the button is disabled and the text changes to the value of the button element's data-loading-text attribute. | $().button('loading') |
| .button('reset') | Resets the button state, restoring the text content to its original state. This method is very useful when you want to return the button to its original state. | $().button('reset') |
| .button(string) | The string in this method refers to any string declared by the user. Using this method, the button state is reset and new content is added. | $().button(string) |
### Example
The following example demonstrates the usage of the above methods:
## Example
<h2>Click each button to see the method effect</h2> <h4>Demonstrating .button('toggle') method</h4> <div id="myButtons1" class="bs-example"> <button type="button" class="btn btn-primary">Original</button> </div>
<h4>Demonstrating .button('loading') method</h4> <div id="myButtons2" class="bs-example"> <button type="button" class="btn btn-primary" data-loading-text="Loading...">Original </button> </div>
<h4>Demonstrating .button('reset') method</h4> <div id="myButtons3" class="bs-example"> <button type="button" class="btn btn-primary" data-loading-text="Loading...">Original </button> </div>
<h4>Demonstrating .button(string) method</h4>
<button type="button" class="btn btn-primary" id="myButton4"
data-complete-text="Loading finished">Please click me
</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>
The result is as shown below: