Analysis of the usage of bootstrap button plug in (Button)

Button plug-in (Button) study notes:

Button plug-in

Style file:
☑ LESS version: Source file buttons. less

When ☑ clicks the button, the button text changes to "Loading …", and after loading, it changes back to "Get Data". Simply put, it is to control the button state, such as disabled state, loading state, normal state, etc.;
☑ button toggle status
☑ button imitates radio button
☑ button imitates check button

Button plug-in button load status
Buttons allow you to design status prompts that display loading status information when clicked. For example, clicking the "Load" button will trigger the loading state of the button

Loading

The loaded text information is defined through the data-loading-text attribute, then an event is bound to the button through JavaScript, and an button ("loading") method is added to the button to activate the load state behavior of the button. As shown below:

$(function(){
 $("#loaddingBtn").click(function () {
  $(this).button("loading");
  });
});

Button plug-in simulates single selection button

In the button plug-in in the Bootstrap framework, you can customize the attribute data-toggle= "buttons" for the button group

<div class="btn-group">
 <label class="btn btn-primary">
  <input type="radio" name="options" id="options1"> Male 
 </label>
 <label class="btn btn-primary">
  <input type="radio" name="options" id="options2"> Female 
 </label>
 <label class="btn btn-primary">
  <input type="radio" name="options" id="options3"> Unknown 
 </label>
</div>
----------------------------------------------------------------------
<div class="btn-group" data-toggle="buttons">
 <label class="btn btn-primary">
  <input type="radio" name="options" id="options1"> Male 
 </label>
 <label class="btn btn-primary">
  <input type="radio" name="options" id="options2"> Female 
 </label>
 <label class="btn btn-primary">
  <input type="radio" name="options" id="options3"> Unknown 
 </label>
</div>

Button plug-in simulates check buttons

<div class="btn-group">
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options1"> Movie 
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options2"> Music 
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options3"> Games 
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options4"> Photography 
 </label>
</div>
-------------------------------------------------------------------
<div class="btn-group" data-toggle="buttons">
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options1"> Movie 
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options2"> Music 
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options3"> Games 
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options4"> Photography 
 </label>
</div>

Button plug-in button state switching

The data-toggle property also enables you to activate the behavior state of the button, switching between active and inactive states.

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

Button plug-in JavaScript usage

1. Toggle button status (get focus)

$("#mybutton").button("toggle")

2. Restore button:

$("#mybutton").button("reset")

3. Arbitrary parameters:

$("# mybutton"). button ("Arbitrary Character Parameter Name")

Replace data-any character parameter name-text with the attribute value of "text value displayed on button"