Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 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

 





<script src="js/mui.min.js"></script>

<script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>

radio(單選框)


\

 

 

2、底部選項卡

觸發字符:mtab

 



$0

 

示例:

 












底部選項卡-div模式

這是div模式選項卡中的第1個子頁面. 何謂div模式的選項卡? 其實就是通過DIV模擬一個獨立頁面,通過DIV的顯示、隱藏模擬不同頁面的切換,典型的SPA模式; 這種模式適合簡單業務系統,因為每個選項卡內容要寫在一個DIV中, 若邏輯復雜,會導致當前頁面DOM結構繁雜,造成webview響應緩慢,甚至崩潰; 因此若系統較復雜,需要下拉刷新等操作,推薦使用webview模式的選項卡; 這是div模式選項卡中的第2個子頁面,該頁面展示一個消息列表
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15
  • Item 16
  • Item 17
  • Item 18
  • Item 19
  • Item 20
這是div模式選項卡中的第3個子頁面,該頁面展示一個通訊錄示例. 這是div模式選項卡中的第4個子頁面,該頁面展示一個常見的設置示例.
  • 新消息通知
  • 隱私
  • 通用
  • 關於mui
  • 退出登錄
\

 

 

3、grid(9宮格)

mGrid(九宮格)觸發字符:mgrid

代碼塊:

 


  • ${1:Home}
  • 5 ${2:Email}
  • ${3:Chat}
  • ${4:Location}
  • ${5:Search}
  • ${6:Phone}


 

示例:

 











9宮格默認樣式

  • Home
  • 5 Email
  • Chat
  • location
  • Search
  • Phone
  • Setting
  • about
  • more

\

 

 

3、分頁

觸發字符:mpagination

 


  • «
  • ${1:1}
  • ${2:2}
  • »
$0 示例:

pagination(分頁)

分頁(默認尺寸)
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
分頁(大尺寸)
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
分頁(小尺寸)
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
翻頁(默認)
  • 上一頁
  • 下一頁
翻頁(對齊)
  • 上一頁
  • 下一頁
翻頁(禁用)
  • 上一頁
  • 下一頁
<script src="../js/mui.min.js"></script><script> mui.init({ swipeBack:true //啟用右滑關閉功能 }); (function($) { $('.mui-pagination').on('tap', 'a', function() { var li = this.parentNode; var classList = li.classList; if (!classList.contains('mui-active') && !classList.contains('mui-disabled')) { var active = li.parentNode.querySelector('.mui-active'); if (classList.contains('mui-previous')) {//previous if (active) { var previous = active.previousElementSibling; console.log('previous', previous); if (previous && !previous.classList.contains('mui-previous')) { $.trigger(previous.querySelector('a'), 'tap'); } else { classList.add('mui-disabled'); } } } else if (classList.contains('mui-next')) {//next if (active) { var next = active.nextElementSibling; if (next && !next.classList.contains('mui-next')) { $.trigger(next.querySelector('a'), 'tap'); } else { classList.add('mui-disabled'); } } } else {//page active.classList.remove('mui-active'); classList.add('mui-active'); var page = parseInt(this.innerText); var previousPageElement = li.parentNode.querySelector('.mui-previous'); var nextPageElement = li.parentNode.querySelector('.mui-next'); previousPageElement.classList.remove('mui-disabled'); nextPageElement.classList.remove('mui-disabled'); if (page <= 1) { previousPageElement.classList.add('mui-disabled'); } else if (page >= 5) { nextPageElement.classList.add('mui-disabled'); } } } }); })(mui); </script>
\

 

 

 

 

 


  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved