MIswitch

功能描述

依赖的模块

快速使用

      <section class="section">          一级结构  
        <label class='switch'>          二级结构 
          <input type='checkbox'>      三级结构
          <span></span>
        </label>
      </section>
      <div class="switch-force">      一级结构
        <input type="button" class="switch-force-btn" id="switch_force" value="已开启" />      二级机构
 主要css样式
      .section            .switch                  默认颜色
      .section-red        .switch-red              红色
      .section-yellow    .switch-yellow          黄色
      .section-green    .switch-green          绿色
      .section-young    .switch-young          青色
      .section-blue        .switch-blue          蓝色
      .section-purple    .switch-purple          紫色
      .switch-normal    .switch-normal-btn      开启/关闭按钮-正常
      .switch-Abnormal  .switch-Abnormal-btn  开启/关闭按钮-不正常
      .switch-urgent    .switch-urgent-btn      开启/关闭按钮-紧急
      .switch-force        .switch-force-btn      开启/关闭按钮-强制
      var switch_normal = (function () {      
        var btn = document.getElementById('switch_normal');  获取id
        btn.onclick = function () {                            点击事件
          if (i) {                                            判断当if=true是按钮关闭，反之开启
            i = false;                                        
            document.getElementById('switch_normal').value = '已关闭';
            document.getElementById('switch_normal').style.backgroundColor = '#BCBCBC';
          } else {
            i = true;
            document.getElementById('switch_normal').value = '已开启';
            document.getElementById('switch_normal').style.backgroundColor = '#7FFFD4';
          }
      })()

特别说明