if you are new to Bootstrap.
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.
Krishna.