Bootstrap - Script

bootstrap

How can we make a button via script?

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('Loading')
    // business logic...
    $btn.button('Reset')
  })
</script>

In the above code, we use .button('…') to change the label of the button. Initially, we give it the label 'Loading', and then later on we change it to 'Reset'.

How can we toggle a button using JavaScript?

$().button('toggle')

Toggles push state. Gives the button the appearance that it has been activated.

How can we reset a button?

$().button('reset')

Resets button state - swaps text to original text. This method is asynchronous and returns before the resetting has actually completed.

What is the purpose of $().button(string)?

Swaps text to any data defined text state.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

In the above code, 'complete' is related to 'data-complete-text'. When the JavaScript is executed, it change the text of the button to the text defined by the 'data-complete-text' attribute.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License