Bootstrap switch Control learn notes sharing _javascript tips

The Bootstrap-switch plug-in is a switch button control implemented for bootstrap that supports customization of properties such as dimensions, colors, and so on. Switch button in the domestic site is not a lot of use, Bootstrap applications in foreign countries are very popular, do not know whether we do not like or use it is difficult to adapt to the site to use. But this type of opening button is the most widely used mobile device, such as mobile phones, and the features of the screen make it more and more developed.

Function Description:

Introduces the simple use of the two forms of Chekbox and radio, other more effects and features can browse the demo, click the button to slide the way to On/off switch.

Instructions for use:

1. Introduction of CSS and JS file

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

<div class= "Make-switch" data-on= "info" data-off= "Success" >
          <input type= "checkbox" Checked>
        </div>
        <div class= "Make-switch" data-on= "Success" data-off= "Warning" >
          <input type= "checkbox "Checked>
        </div>
        <div class=" Make-switch "data-on=" warning "data-off=" danger ">
          < Input type= "checkbox" checked>
        </div>
        <div class= "Make-switch" data-on= "Danger" data-off= " Default ">
          <input type=" checkbox "checked>
        </div>
        <div class=" Make-switch "data-on = "Default" data-off= "PRIMARY" >
          <input type= "checkbox" Checked>
        </div>

1). Div is designed to add a pattern to a checkbox.
2). Input is very simple, is the ordinary label.

3. Make-switch: Adds a CSS style to a checkbox that uses Plug-ins.

4). data-on: CSS style when on state.

5). Data-off: CSS style when off state.

Use of the 3.radio radio box:

<label for= "Option11" >option 1</label> <div class= "Make-switch
            Radio2" >
              <input id= " Option11 "type=" Radio "name=" Radio2 "value=" Option11 ">
            </div>
            <label for=" Option12 ">option 2 </label>
            <div class= "Make-switch Radio2" > <input id= "option12"
              type= "Radio" name= "Radio2" Value= "Option12" checked= "checked" >
            </div>
            <label for= "Option13" >option 3</label>
            <div class= "Make-switch Radio2" > <input id= "option13" type= "Radio" name= "Radio2" value= "Option13"
              ">
            </div>

Radio the use of a single box is the same, because the first one of the radio box is the other states are to change, so to add the corresponding JS code;

<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 the switch div through jquery to get its properties oncolor, Offcolor, etc.
2). Immediately thereafter, gets the child element input of the div contained.
3). The input is loaded by Bootstrapswitch method.

So we can simply implement the switch button effect we want.

If you want to further study, you can click here to learn, and then attach a wonderful topic: Bootstrap Learning Course

The above is about the use of bootstrap switch control, I hope to help you learn.