Twitter Bootstrap Button JavaScript Plugin

Last update on August 19 2022 21:50:44 (UTC/GMT +8 hours)

Description

Twitter Bootstrap Button JavaScript Plugin allows you to enhance functionalities of Button. You may control button states or create groups of buttons for components like toolbars.

What is required

You must include jquery.js and bootstrap-button.js - these two JavaScript files. Both are located within docs/assets/js folder.

How to use it

You may use this plugin only with markup, without writing any JavaScript, or you may enable buttons via JavaScript.

Example

The first example shows how to use button plugin without any JavaScript.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Example of Bootstrap Button JavaScript Plugin</title>
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="span8">
<h2>Example of Bootstrap Button JavaScript Plugin</h2>
<h3>Control state</h3>
<p><button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">Loading State</button></p>
<h3>Single toggle</h3>
<p><button class="btn btn-primary" data-toggle="button">Single Toggle</button></p>
<h3>Checkbox</h3>
<p><div class="btn-group" data-toggle="buttons-checkbox">
                    <button class="btn btn-primary">Left</button>
                    <button class="btn btn-primary">Middle</button>
                    <button class="btn btn-primary">Right</button>
    </div></p>
<h3>Radio</h3>
<p><div class="btn-group" data-toggle="buttons-radio">
                    <button class="btn btn-primary">Left</button>
                    <button class="btn btn-primary">Middle</button>
                    <button class="btn btn-primary">Right</button>
                  </div></p>
</div>
</div>
</div>
<!--Except 	'Control state', other buttons require only jquery.js and bootstrap-button.js JavaScript files-->			  
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/assets/js/bootstrap-transition.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js"></script>
</body>
</html>

View this example online.

Enable buttons via javascript

To enable buttons via JavaScript, use the following JavaScript code, where ' .nav-tabs ' is the class of the div containing buttons.

$('.nav-tabs').button()

Methods

This plugin has several methods. We will discuss them with usage code now.

$().button('toggle')

<button class="btn" data-toggle="button" >…</button>

This method implies changes the appearance of the button, and makes it look activated. Auto toggling of a button is enabled using 'data-toggle="button"'.

$().button('loading')

<button class="btn" data-loading-text="loading stuff..." >...</button>

This method Sets button state to loading. Text displayed is stored as the value of the 'data-loading-text' attribute.

If you are using Firefox, you may find that, even after the page reloads, the disabled state is unaltered. Use 'autocomplete="off"', to get rid of this.

$().button('reset')

This method resets button state by swapping text to original text.

$().button(string)

<button class="btn" data-loading-text="loading stuff..." >...</button>

This method resets button state by swapping text to any data defined text state.

<button class="btn" data-complete-text="finished!" >...</button>
<script>
  $('.btn').button('complete')
</script>

You may download all the HTML, CSS, JS and image files used in our tutorials here.

Previous: Twitter Bootstrap typeaheads tutorial
Next: Twitter Bootstrap Collapse JavaScript Plugin