Android教程網 >> Android技術 >> 關於Android編程 >> MUI組價五：開關、底部選項卡、9宮格和分頁

MUI組價五：開關、底部選項卡、9宮格和分頁

編輯：關於Android編程

1、switch(開關)

mui提供了開關控件，點擊滑動兩種手勢都可以對開關控件進行操作,UI如下：默認開關控件,帶on/off文字提示，打開時為綠色背景，基本class類為.mui-switch、.mui-switch-handle，DOM結構如下：

若希望開關默認為打開狀態，只需要在.mui-switch節點上增加.mui-active類即可，如下：

若希望隱藏on/off文字提示，變成簡潔模式，需要在.mui-switch節點上增加.mui-switch-mini類，如下：



     



  

mui默認還提供了藍色開關控件，只需在.mui-switch節點上增加.mui-switch-blue類即可，如下：

藍色開關上增加.mui-switch-mini即可變成無文字的簡潔模式

（1）、方法

若要獲得當前開關狀態，可通過判斷當前開關控件是否包含.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();

（2）、事件

開關控件在打開/關閉兩種狀態之間進行切換時，會觸發toggle事件,通過事件的detail.isActive屬性可以判斷當前開關狀態。可通過監聽toggle事件，可以在開關切換時執行特定業務邏輯。如下為使用示例：

document.getElementById("mySwitch").addEventListener("toggle",function(event){
  if(event.detail.isActive){
    console.log("你啟動了開關");
  }else{
    console.log("你關閉了開關");  
  }
})

代碼塊激活字符: mswitch

radio（單選框）

Switch Switch

2、底部選項卡

觸發字符：mtab

示例：

底部選項卡-div模式

這是div模式選項卡中的第1個子頁面. 何謂div模式的選項卡？其實就是通過DIV模擬一個獨立頁面，通過DIV的顯示、隱藏模擬不同頁面的切換，典型的SPA模式；這種模式適合簡單業務系統，因為每個選項卡內容要寫在一個DIV中，若邏輯復雜，會導致當前頁面DOM結構繁雜，造成webview響應緩慢，甚至崩潰；因此若系統較復雜，需要下拉刷新等操作，推薦使用webview模式的選項卡；這是div模式選項卡中的第2個子頁面，該頁面展示一個消息列表