MIswitch

功能描述

实现点击按钮开启/关闭以及switch开关

依赖的模块

快速使用

 相关html 结构
      <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="已开启" />      二级机构
      </div>
 主要css样式
      .section            .switch                  默认颜色
      .section-red        .switch-red              红色
      .section-orange    .switch-orange          橙色
      .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      开启/关闭按钮-强制
开启/关闭按钮js
      var switch_normal = (function () {      
        var btn = document.getElementById('switch_normal');  获取id
        var i = true;                                        判断按钮是否开启
        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';
          }
        }
      })()

特别说明