Bootstrap开关(switch)控件学习笔记分享

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

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

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

<script>
  $('.radio2').on('switch-change', function () {
    $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
  });
</script>

$("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
  });
});