Bootstrap - Button Plugin


Advertisements

Buttons were explained in chapter Bootstrap Buttons. With this plugin you can add in some interaction such as control button states or create groups of buttons for more components like toolbars.

If you want to include this plugin functionality individually, then you will need the button.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include the bootstrap.js or the minified the bootstrap.min.js.

Loading State

To add a loading state to a button, simply add the data-loading-text = "Loading..." as an attribute to the button element 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>

When you click on the button the output would be as seen in the following image −

Single toggle

To activate toggling (i.e. change the normal state of a button to a push state and vice versa) on a single button, add the data-toggle = "button" as an attribute to the button element as shown in the following example −


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

Checkbox

You can create group of checkboxes and add toggling to it by simply adding the data attribute data-toggle = "buttons" to the 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

Similarly you can create a group of radio inputs and add toggling to it by simply adding the data attribute data-toggle = "buttons" to the 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

You can enable buttons plugin via JavaScript as shown below −

$('.btn').button()

Options

There are no options.

Methods

Given below are some of the useful methods for buttons plugin −

Method Description Example

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

.button('loading')

When loading, the button is disabled and the text is changed to the option from the data-loading-text attribute of button element

$().button('loading')

.button('reset')

Resets button state, bringing the original content back to the text. This method is useful when you need to return the button back to the primary state

$().button('reset')

.button(string)

String in this method is referring to any string declared by the user. To reset the button state and bring in new content use this method.

$().button(string)

Example

The following example demonstrates the use of the 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>

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

Useful Video Courses


Video

Bootstrap Online Training

26 Lectures 2 hours

Anadi Sharma

Video

Bootstrap 4 Responsive Web Development

54 Lectures 4.5 hours

Frahaan Hussain

Video

Bootstrap By Building Projects - Includes Bootstrap 4

Featured

161 Lectures 14.5 hours

Eduonix Learning Solutions

Video

Responsive E Commerce Website Designing Without Bootstrap

20 Lectures 4 hours

Azaz Patel

Video

Bootstrap 4 for Tutorials

15 Lectures 1.5 hours

Muhammad Ismail

Video

Complete Bootstrap 5 Course From Scratch With 3 Projects

62 Lectures 8 hours

Yossef Ayman Zedan

Advertisements