Bootstrap3.0 learning the 24th round (JavaScript plugin--button) __java

This article mainly to learn about JavaScript plug-ins--button.

Button

button to do a lot of work. Controlling button state or creating a group of buttons can produce complex components such as toolbars. State

The button can be rendered loaded by adding data-loading-text= "Loading ...".

<button type= "button" id= "fat-btn" data-loading-text= "Loading ..." class= "btn btn-primary" > Loading state </ Button>

However, if you want to enable the loading state, you also need to manually start when you click the button.

<script type= "Text/javascript" > $ (' #fat-btn '). Click (function () {var btn = $ (this)
        Btn.button (' Loading ')
        settimeout (function () {
          Btn.button (' Reset ')
        }, 3000)
      } </script>

The above JavaScript code, first of all, is to set the button to be loaded, and then define the event through the settimeout timer for three seconds, so that the button returns to the initialization state.

If you are not very clear about settimeout, you can look at my previous article http://www.cnblogs.com/aehyok/archive/2013/04/16/3023840.html

Then look at the effect after the click button

State Transitions

You can make the button switch state by adding data-toggle= "button".

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

The color of the feeling button is still somewhat changeable. selection Box

By adding data-toggle= "buttons" to a group of buttons, you can make the group of buttons have a selection/cancellation function similar to the selection box.

<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

By adding data-toggle= "buttons" to a group of buttons, you can make the group of buttons have the function of a radio box.

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

This can only be the effect of the radio. usage

    <button class= "btn btn-primary" id= "btn" data-toggle= "button" > Individual switch </button>
    <a href= "javascript: void (0) "class=" btn btn-success "onclick=" _switch () "> Toggle </a>

We're just going to switch the state of the button through the Data property, and now we're going to use JavaScript to do it.

<script type= "Text/javascript" > Function Switch ()
      {
          $ ("#btn"). Button (' toggle ');
          </script >

Mark

The button plug-in fully supports the Data property. You can see the various ways of using the following examples. Method

$ (). button (' Toggle ')

Toggle button Status. Gives the state and appearance of the button when it is activated. Automatic Switching

You can use the Data-toggle property to make a button automatically switch state.

<button type= "button" class= "BTN" data-toggle= "button" >...</button>

There are already examples, and I'll just give you a simple example here.

$ (). button (' Loading ')

Set button status to loading-the button is disabled and the text content is switched to loading. You can define loading text on a button element by using Data-loading-text.

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

This effect is also on the top.

Cross-browser compatibility
Firefox keeps the button disabled between multiple page loads. You can resolve the problem that is mentioned by adding autocomplete= "off".

$ (). button (' Reset ')

Resets the button state-and restores the text on the button to its original value.

$ (). button (String)

Resets the button state-and resets the text on the button to the value passed in.

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

Summarize

This is the simple application of the button plugin.