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>
2、底部選項卡
觸發字符:mtab
$0
示例:
這是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個子頁面,該頁面展示一個常見的設置示例.
3、grid(9宮格)
mGrid(九宮格)觸發字符:mgrid
代碼塊:
-
${1:Home}
- 5
${2:Email}
-
${3:Chat}
-
${4:Location}
-
${5:Search}
-
${6:Phone}
示例:
- Home
- 5 Email
- Chat
- location
- Search
- Phone
- Setting
- about
- more
3、分頁
觸發字符:mpagination
$0 示例:
分頁(默認尺寸)
分頁(大尺寸)
分頁(小尺寸)
翻頁(默認)
翻頁(對齊)
翻頁(禁用)
<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>