Bootstrap Button Plugin

We are already discussed about Buttons in Bootstrap Buttons tutorial. But using JavaScript Bootstrap Button plugin you can add some more interactions just like control button states or you can make groups for more components like toolbars.

If you want to implement functionality of this plugin individually, simple include the button.js file along the other JS files. Else as we have discussed in the tutorial of Bootstrap Plugin Overview, you can include bootstrap.jsor the minified bootstrap.min.js.

Loading State

Simply add data-loading-text=”Loading…” attribute to the button element to add a loading state to a button as shown in the following 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');
 ); 
 );
 ); 
</script>

Demo

Single toggle

Add data-toggle=”button” To activate toggling on a single button as an attribute to the button tag as shown in the following example:

<button type="button" class="btn btn-primary" 
 data-toggle="button">Single toggle
</button>

Demo

Checkbox

By adding data-toggle="buttons" to the btn-group to create group of check boxes and add toggling. For pre-checked options, you must add the .active class to the input’s label yourself.

<div class="btn-group" data-toggle="buttons">
 <label class="btn btn-primary active">
 <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>

Demo

Radio

You can also make group of radio buttons by adding this data attribute data-toggle="buttons" to the btn-group. For preselected options, you must add the .active class to the input’s label yourself.

<div class="btn-group" data-toggle="buttons">
 <label class="btn btn-primary active">
 <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
 </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>	

Demo

Usage

Enable buttons plugin via JavaScript as below:

$('.btn').button()

Options

No options

Methods

The following methods are useful for buttons plugin:

button(‘toggle’)

Toggles push state. Gives the button the appearance that it has been activated. You can also enable auto toggling of a button by using the data-toggle attribute.

$().button('toggle')

Example use of above methods:

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


<script type="text/javascript">
 $(function () 
 $("#myButtons1 .btn").click(function()
 $(this).button('toggle');
 );
 );
</script> 

Demo

.button(‘loading’)

On the loading disables the button and changed the text. Using this data attribute data-loading-text you can define and change loading text.

$().button('loading')

Example use of above methods:

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


<script type="text/javascript">
 $(function() 
 $("#myButtons2 .btn").click(function()
 $(this).button('loading').delay(1000).queue(function() 
 ); 
 );
 ); 
</script> 

Demo

.button(‘reset’)

Resets button state, swaps text to original text back. This method returns the button back to the primary state.

$().button('reset')

Example use of above methods:

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


<script type="text/javascript">
 $(function() 
 $("#myButtons3 .btn").click(function()
 $(this).button('loading').delay(1000).queue(function() 
 $(this).button('reset');
 ); 
 );
 ); 
</script> 

Demo

.button(string)

To reset the button state and swap text to any new content, use this method.

$().button(string)

Example use of above methods:

<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() 
 $("#myButton4").click(function()
 $(this).button('loading').delay(1000).queue(function() 
 $(this).button('complete');
 ); 
 );
 ); 
</script> 

Demo

Bootstrap Button Plugin