The bootstrap-switch plug-in is a switch button control implemented for Bootstrap, which can support customization of dimensions, color and other attributes. There are not many switch-type buttons used on domestic websites. Bootstrap is very popular abroad. I don’t know if we don’t like it or it is troublesome and difficult to use it for websites. However, this opening button is the most widely used on mobile devices such as mobile phones, and the characteristics of the screen promote it to develop better.
Function description:
Introducing the simple use of two forms of chekbox and radio, there are more effects and functions to browse demos, click the button to switch on/off in a sliding manner.
Instructions for use:
1. Introduce CSS and JS files
<link rel="stylesheet" href="static/stylesheets/bootstrap-switch.css" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="static/js/bootstrap-switch.js"></script>
2.html content added
<div data-on="info" data-off="success"> <input type="checkbox" checked> </div> <div data-on="success" data-off="warning"> <input type="checkbox" checked> </div> <div data-on="warning" data-off="danger"> <input type="checkbox" checked> </div> <div data-on="default" data-off="primary"> <input type="checkbox" checked> </div>
1). The div is entirely intended to add styles to checkbox.
2). input is very simple, it is an ordinary label.
3).make-switch: Add CSS style to checkbox using plug-in.
4).data-on: CSS style when it is on state.
5).data-off: The CSS style when the off state is.
3. Use of radio radio box:
<label for="option11">Option 1</label> <div> <input id="option11" type="radio" name="radio2" value="option11"> </div> <label for="option12">Option 2</label> <div> <input id="option12" type="radio" name="radio2" value="option12" checked="checked"> </div> <label for="option13">Option 3</label> <div> <input id="option13" type="radio" name="radio2" value="option13"> </div>
The radio radio box is used the same way, because one of the radio box first has to be changed, so the corresponding JS code needs to be added;
<script> $('.radio2').on('switch-change', function () { $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true); });</script>4. Start
$("div[class='switch']").each(function() { $this = $(this); var onColor = $this.attr("onColor"); var offColor = $this.attr("offColor"); var onText = $this.attr("onText"); var offText = $this.attr("offText"); var labelText = $this.attr("labelText"); var $switch_input = $(" :only-child", $this); $switch_input.bootstrapSwitch({ onColor: onColor, offColor : offColor, onText : onText, offText : offText, labelText : labelText });});1). Get all switch divs through jquery, thereby obtaining their properties onColor, offColor, etc.
2). Immediately afterwards, get the input of the child element contained in the div.
3). Load the input through the bootstrapSwitch method.
In this way, we can simply achieve the switch button effect we want.
If you still want to study in depth, you can click here to learn and attach a wonderful topic to you: Bootstrap learning tutorial
The above is about how to use the Bootstrap switch (switch) control, I hope it will be helpful to everyone's learning.