Buttons in Bootstrap part-3

Goud.Kv
Posted by in Bootstrap category on for Advance level | Points: 250 | Views : 2534 red flag
Rating: 5 out of 5  
 1 vote(s)

Bootstrap is developed by Twitter Inc, and comes with predefined CSS and JavaScript. By using Bootstrap, we can design a very responsive website easily. It is very handy once you understand.
Recommendation
Read Buttons in Bootstrap part-2 before this article.

Introduction

Please read Bootstrap Introduction if you are new to Bootstrap.
Take a look at Bootsrtap Buttons - II before this to understand easily as this is the continuation of that.
So far we have seen Button Groups and Button Toolbars with Bootstrap and here lets see some more button actions.

Objective

The main objective of this article is to learn the Button functions of Bootstrap with JavaScript.

Using Bootstrap code

Before going to the JavaScript techniques, we have something called btn-group-justified in bootstrap.css. Lets see what it does from the below code,
<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-success">Accept</a>
    <a href="#" class="btn btn-danger">Decline</a>
</div>
This type will groups the buttons and also makes it a block as shown in the below picture


Button Functions with JavaScript:


Toggle Buttons:
We have already seen toggling buttons in Bootstrap Buttons - I. Now here lets do that function with JavaScript.
For this we have to write a little script in our page like below,
<script type="text/javascript">
$(document).ready(function () {
    $("#toggleBtn .btn").click(function () {
        $(this).button('toggle');
    });
});
</script>
And adding buttons like below
<div id="toggleBtn">
    <button type="button" class="btn btn-success">True</button>
    <button type="button" class="btn btn-danger">False</button>
</div>
Now check this function in your browser and it looks like below output

We can see clearly in the above figure that the buttons are 'ON' (Checked).

Loading Buttons:
Earlier we have seen Loading Buttons in Bootstrap Buttons - I. Here, we are going to perform the same functionality with JavaScript. For loading effect to the button, we have to use below script in our page
<script type="text/javascript">
$(document).ready(function () {
    $("#ldBtn .btn").click(function () {
        $(this).button('loading');
    });
});
</script>
And give that #ldbtn ID to our buttons as below
<div id="ldbtn">
    <button type="button" class="btn btn-warning">Enter</button>
</div>
Now run this combination in your browser to see the following result

See, after clicking Enter button, it will change its state to Loading....

String Buttons:
Now if you want to change the name of the button after the completion of a process, we can achieve it by using below JavaScript code in your page.
<script type="text/javascript">
$(document).ready(function () {
    $("#ldBtn .btn").click(function () {
        $(this).button('loading').delay(2000).queue(function () {
            $(this).button('complete');
            $(this).dequeue();
        });
    });
});
</script>
And also give that #ldbtn ID to our buttons as below,
<div id="ldbtn">
    <button type="button" class="btn btn-success" data-complete-text="Loading Completed">Load</button>
</div>
Now see the change by running this combination in your browser. You might get result something like below,

After clicking the Load button it will start Loading... followed by Loading Completed (comes after the delay time).

Changing Tab Contents:
We can also switch the Tab contents with the Button Clicks. For such functionality, we are taking Tab using nav-tabs class of Bootstrap and using JavaScript. Include the below script in your page
<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>
.nav-tabs is the Bootstraps predefined class to create a tab and we are setting functions to <a> tags of Nav-Tabs in the above script.
And take an example code of creating Nav-Tabs as we have below
<div>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#tabHome" data-loading-text="Wait..">Home</a></li>
        <li><a data-toggle="tab" href="#tabProfile" data-loading-text="Wait...">Profile</a></li>
        <li><a data-toggle="tab" href="#tabSettings" data-loading-text="Wait......">Settings</a></li>
    </ul>
    <div class="tab-content">
        <div id="tabHome" class="tab-pane active fade in">
            <p>Home Content goes here</p>
        </div>
        <div id="tabProfile" class="tab-pane fade">
            <p>Profile related Content goes here</p>
        </div>
        <div id="tabSettings" class="tab-pane fade">
            <p>Settings related Content goes here</p>
        </div>
    </div>
</div>
In the above example, we have three sections and the need is to switch the content of that sections on clicking them. So, Run this combination of code and see the result.

In the above figure, you can see the content switching on the option click.

Conclusion

In this article, we have seen different button functionalities using JavaScript. Hope you understand. If you have any doubt in this topic, feel free to ask in the below comment box.

Thanks for reading.

Regards,
Krishna.
Recommendation
Read Dropdowns in Bootstrap after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)