24th rounds of Bootstrap3.0 Learning (JavaScript plug-in -- button)

Before reading, you can also go to the Bootstrap3.0 getting started learning series navigation to view the http://www.cnblogs.com/aehyok/p/3404867.html

This article mainly describes the JavaScript plug-in-button.

Button can do a lot of work. You can control the button status or create a button group to generate complex components such as toolbar.

Status

AddData-loading-text = "loading ..."The button is loaded.

<button type= data-loading-text= =></button>

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

 <script type=> btn = $(</script>

The above JavaScript code first sets the button to be loaded, and then defines the event through SetTimeout, so that the button returns to the initialization state.

If you're not sure about SetTimeout, read my previous article http://www.cnblogs.com/aehyok/archive/2013/04/16/3023840.html.

Then let's take a look at the effect after clicking the button.

Status Switch

Adddata-toggle="button"Allows the button to switch the status.

<button type= = data-toggle=>Single toggle</button>

It seems that the color of the button remains slightly changed.

Select box

Add to button groupdata-toggle="buttons"The button group can be selected or canceled in a similar selection box.

<div = data-toggle=>  <label =>    <input type=> Option   </label>  <label =>    <input type=> Option   </label>  <label =>    <input type=> Option   </label></div>

Single choice

Add to button groupdata-toggle="buttons"The button group can have the single-button function.

<div = data-toggle=>  <label =>    <input type= name= id=> Option   </label>  <label =>    <input type= name= id=> Option   </label>  <label =>    <input type= name= id=> Option   </label></div>

This only has the effect of single choice.

Usage

<Button = id = data-toggle => switch </button> <a href = onClick => switch </a>

We only use the data attribute to switch the button status. Now we can use JavaScript to implement it.

 <script type=>).button(</script>

Mark

The button plug-in fully supports data attributes. The following cases show the usage methods.

Method

$().button()

Switch button status. Assign the status and appearance of the button when it is activated.

Automatic Switch

Availabledata-toggleAttribute Enables automatic button switching.

<button type= = data-toggle=>...</button>

The instance already exists. Here is a simple example.

$().button()

Set the button status to loading-set the button to disabled and switch the text content to loading. Usedata-loading-textYou can define the loading text on the button element.

<button type= = data-loading-text=>...</button>

This effect also exists.

Cross-browser compatibility
Firefox keeps the button disabled between multiple page loads. You can add autocomplete = "off" to solve the problem mentioned.

$().button()

Reset button status-and restore the text on the button to the original value.

$().button()

Reset button status-and reset the text on the button to the passed value.

<button type= = data-complete-text= >...</button><script>).button(</script>

This is a simple application of the button plug-in.

This article has been updated to the Bootstrap3.0 getting started learning series navigation http://www.cnblogs.com/aehyok/p/3404867.html