MIswitch

功能描述

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

依赖的模块

快速使用

  1.  相关html 结构
  2.       <section class="section">          一级结构  
  3.         <label class='switch'>          二级结构 
  4.           <input type='checkbox'>      三级结构
  5.           <span></span>
  6.         </label>
  7.       </section>
  8.       <div class="switch-force">      一级结构
  9.         <input type="button" class="switch-force-btn" id="switch_force" value="已开启" />      二级机构
  10.       </div>
  11.  主要css样式
  12.       .section            .switch                  默认颜色
  13.       .section-red        .switch-red              红色
  14.       .section-orange    .switch-orange          橙色
  15.       .section-yellow    .switch-yellow          黄色
  16.       .section-green    .switch-green          绿色
  17.       .section-young    .switch-young          青色
  18.       .section-blue        .switch-blue          蓝色
  19.       .section-purple    .switch-purple          紫色
  20.       .switch-normal    .switch-normal-btn      开启/关闭按钮-正常
  21.       .switch-Abnormal  .switch-Abnormal-btn  开启/关闭按钮-不正常
  22.       .switch-urgent    .switch-urgent-btn      开启/关闭按钮-紧急
  23.       .switch-force        .switch-force-btn      开启/关闭按钮-强制
  24. 开启/关闭按钮js
  25.       var switch_normal = (function () {      
  26.         var btn = document.getElementById('switch_normal');  获取id
  27.         var i = true;                                        判断按钮是否开启
  28.         btn.onclick = function () {                            点击事件
  29.           if (i) {                                            判断当if=true是按钮关闭，反之开启
  30.             i = false;                                        
  31.             document.getElementById('switch_normal').value = '已关闭';
  32.             document.getElementById('switch_normal').style.backgroundColor = '#BCBCBC';
  33.           } else {
  34.             i = true;
  35.             document.getElementById('switch_normal').value = '已开启';
  36.             document.getElementById('switch_normal').style.backgroundColor = '#7FFFD4';
  37.           }
  38.         }
  39.       })()

特别说明

无