Button Plugin Study Notes:
Button plugin
Style file:
☑ LESS version: source file
☑ When clicking the button, the button text becomes "Loading..." and once it is loaded, it becomes "Get Data". Simply put, it is the control button status, such as the disabled status, loading status, normal status, etc.;
☑ Button switch status
☑ Button imitates radio buttons
☑ Button imitates check button
Button plugin –Button loading status
The status prompt can be designed through the button. When the button is clicked, the loading status information will be displayed. For example, clicking the "Load" button will trigger the loading status of the button
load
Define the loaded text information through the data-loading-text property, and then bind an event to the button through JavaScript and add a button ("loading") method to the button to activate the loading state behavior of the button. As shown below:
$(function(){
$("#loaddingBtn").click(function () {
$(this).button("loading");
});
});
Button plugin –Simulate single selection button
In the button plugin in the Bootstrap framework, you can customize the attribute data-toggle="buttons" by giving the button group the data-toggle="buttons"
<div class="btn-group"> <label class="btn btn-primary"> <input type="radio" name="options" >male </label> <label class="btn btn-primary"> <input type="radio" name="options" >female </label> <label class="btn btn-primary"> <input type="radio" name="options" >unknown </label> </div> ---------------------------------------------------------------------- <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="radio" name="options" >male </label> <label class="btn btn-primary"> <input type="radio" name="options" >female </label> <label class="btn btn-primary"> <input type="radio" name="options" >unknown </label> </div>
Button plugin –Simulate check button
<div class="btn-group"> <label class="btn btn-primary"> <input type="checkbox" name="options" >Movie </label> <label class="btn btn-primary"> <input type="checkbox" name="options" >music </label> <label class="btn btn-primary"> <input type="checkbox" name="options" >game </label> <label class="btn btn-primary"> <input type="checkbox" name="options" >photography </label> </div> ------------------------------------------------------------------- <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="checkbox" name="options" >Movie </label> <label class="btn btn-primary"> <input type="checkbox" name="options" >music </label> <label class="btn btn-primary"> <input type="checkbox" name="options" >game </label> <label class="btn btn-primary"> <input type="checkbox" name="options" >photography </label> </div>
Button plugin –Button status toggle
Use the data-toggle attribute to activate the behavioral state of the button, enabling state switching between activation and inactive.
<button type="button" data-toggle="button" class="btn btn-primary">Confirm</button>
Button Plugin – JavaScript Usage
1. Switch button status (get focus)
$("#mybutton").button("toggle")
2. Restore button:
$("#mybutton").button("reset")
3. Any parameters:
$("#mybutton").button("Arbitrary character parameter name")
Replace data-arbitrary character parameter name-text attribute value is "text value displayed on button"
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.