mui提供了開關控件，點擊滑動兩種手勢都可以對開關控件進行操作,UI如下：  默認開關控件,帶on/off文字提示，打開時為綠色背景，基本class類為.mui-switch、.mui-switch-handle，DOM結構如下： ~~~ <div class="mui-switch"> <div class="mui-switch-handle"></div> </div> ~~~ 若希望開關默認為打開狀態，只需要在.mui-switch節點上增加.mui-active類即可，如下： ~~~ <!-- 開關打開狀態，多了一個.mui-active類 --> <div class="mui-switch mui-active"> <div class="mui-switch-handle"></div> </div> ~~~ 若希望隱藏on/off文字提示，變成簡潔模式，需要在.mui-switch節點上增加.mui-switch-mini類，如下： ~~~ <!-- 簡潔模式開關關閉狀態 --> <div class="mui-switch mui-switch-mini"> <div class="mui-switch-handle"></div> </div> <!-- 簡潔模式開關打開狀態 --> <div class="mui-switch mui-switch-mini mui-active"> <div class="mui-switch-handle"></div> </div> ~~~ mui默認還提供了藍色開關控件，只需在.mui-switch節點上增加.mui-switch-blue類即可，如下： ~~~ <!-- 藍色開關關閉狀態 --> <div class="mui-switch mui-switch-blue"> <div class="mui-switch-handle"></div> </div> <!-- 藍色開關打開狀態 --> <div class="mui-switch mui-switch-blue mui-active"> <div class="mui-switch-handle"></div> </div> ~~~ 藍色開關上增加.mui-switch-mini即可變成無文字的簡潔模式 **方法** 若要獲得當前開關狀態，可通過判斷當前開關控件是否包含.mui-active類來實現，若包含，則為打開狀態，否則即為關閉狀態；如下為代碼示例： ~~~ var isActive = document.getElementById("mySwitch").classList.contains("mui-active"); if(isActive){ console.log("打開狀態"); }else{ console.log("關閉狀態"); } ~~~ 若使用js打開、關閉開關控件，可使用switch插件的toggle()方法，如下為示例代碼： ~~~ mui("#mySwitch").switch().toggle(); ~~~ **事件** 開關控件在打開/關閉兩種狀態之間進行切換時，會觸發toggle事件,通過事件的detail.isActive屬性可以判斷當前開關狀態。可通過監聽toggle事件，可以在開關切換時執行特定業務邏輯。如下為使用示例： ~~~ document.getElementById("mySwitch").addEventListener("toggle",function(event){ if(event.detail.isActive){ console.log("你啟動了開關"); }else{ console.log("你關閉了開關"); } }) ~~~