參考整理自MUI官網
http://dev.dcloud.net.cn/mui/ui/
（1）numbox（數字輸入框）
mui提供了數字輸入框控件，可直接輸入數字，也可以點擊“+”、“-”按鈕變換當前數值；默認numbox控件dom結構比較簡單，如下：
<div class="mui-numbox">
<!-- "-"按鈕，點擊可減小當前數值 -->
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" />
<!-- "+"按鈕，點擊可增大當前數值 -->
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>
示例：設置取值范圍為0~100，每次變化步長為10，則代碼如下
<div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'>
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" />
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>
代碼塊激活字符：mnumbox
（2）側滑導航
mui提供了兩種側滑導航實現：webview模式和div模式，兩種模式各有優劣，適用於不同的場景。
webview模式
主頁面和菜單內容在不同的webview中，兩個頁面根據內容需求分別組織DOM結構，mui對其DOM結構無特殊要求，故其有如下優點：
- 菜單內容是單獨的webview，故可被多個頁面復用；
- 菜單內容在單獨的webview中，菜單區域的滾動不影響主界面，故可使用原生滾動，滾動更為流暢；
另一方面，webview模式也有其缺點：
- 不支持拖動手勢（跟手拖動）；
- 主頁面、菜單不同webview實現，因此若需交互（如：點擊菜單觸發主頁面內容變化），需使用自定義事件實現跨webview通訊；
div模式
主頁面和菜單內容在同一個webview下，嵌套在特定結構的div中，通過div的移動動畫模擬菜單移動；故該模式有如下優點：
- 支持拖動手勢（跟手拖動）；
- 主頁面、菜單在一個頁面中，可通過JS輕松實現兩者交互（如：點擊菜單觸發主頁面內容變化），沒有跨webview通訊的煩惱；
另一方面，div模式也有其缺點：
- 不支持菜單內容在多頁面的復用，需每個頁面都生成對應的菜單節點；
- 主界面和菜單內容的滾動互不影響，因此會使用div區域滾動，在低端Android手機且滾動內容較多時，可能會稍顯卡頓；
div模式支持不同的動畫效果，每種動畫效果需遵從不同的DOM構造；下面我們以右滑菜單為例（左滑菜單僅需將菜單父節點上的
mui-off-canvas-left換成mui-off-canvas-right即可），說明每種動畫對應的DOM結構。
動畫1：主界面移動、菜單不動
<!-- 側滑導航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
<!-- 菜單容器 -->
<aside class="mui-off-canvas-left">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜單具體展示內容 -->
...
</div>
</div>
</aside>
<!-- 主頁面容器 -->
<div class="mui-inner-wrap">
<!-- 主頁面標題 -->
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
<h1 class="mui-title">標題</h1>
</header>
<div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 主界面具體展示內容 -->
...
</div>
</div>
</div>
</div>
動畫2：縮放式側滑（類手機QQ）
該種動畫要求的DOM結構和動畫1的DOM結構基本相同，唯一差別就是需在側滑導航根容器class上增加一個
mui-scalable類
動畫3：主界面不動、菜單移動
該種動畫要求的DOM結構和動畫1的DOM結構基本相同，唯一差別就是需在側滑導航根容器class上增加一個
mui-slide-in類
動畫4：主界面、菜單同時移動
該種動畫要求的DOM結構較特殊，需將菜單容器放在主頁面容器之下
<!-- 側滑導航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
<!-- 主頁面容器 -->
<div class="mui-inner-wrap">
<!-- 菜單容器 -->
<aside class="mui-off-canvas-left">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜單具體展示內容 -->
...
</div>
</div>
</aside>
<!-- 主頁面標題 -->
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
<h1 class="mui-title">標題</h1>
</header>
<!-- 主頁面內容容器 -->
<div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 主界面具體展示內容 -->
...
</div>
</div>
</div>
</div>
JS API
mui支持多種方式操作div模式的側滑菜單：
- 1、在界面上拖動操作（drag）；
- 2、點擊含有mui-action-menu類的控件；
- 3、Android手機按menu鍵；
- 4、通過JS API觸發，
如下：
可以有兩種調用方式
mui('.mui-off-canvas-wrap').offCanvas('show');
或
mui('.mui-off-canvas-wrap').offCanvas().show();
事件監聽
可以通過以下方式監聽側滑菜單顯示隱藏
document.querySelector('.mui-off-canvas-wrap').addEventListener('shown',function (event) {
//...
})
也可以通過
isShown()方法判斷是否為顯示狀態
mui('.mui-off-canvas-wrap').offCanvas().isShown();
代碼塊激活字符：moffcanvas
（3）彈出菜單
mui框架內置了彈出菜單插件，彈出菜單顯示內容不限，但必須包裹在一個含
.mui-popover類的div中，如下即為一個彈出菜單內容：
<div id="popover" class="mui-popover">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Item1</a></li>
<li class="mui-table-view-cell"><a href="#">Item2</a></li>
<li class="mui-table-view-cell"><a href="#">Item3</a></li>
<li class="mui-table-view-cell"><a href="#">Item4</a></li>
<li class="mui-table-view-cell"><a href="#">Item5</a></li>
</ul>
</div>
若希望通過js的方式控制彈出菜單，則通過如下一個方法即可：
mui('.bottomPopover').popover(status[,anchor]);
mui('.bottomPopover').popover('toggle');//show hide toggle
//傳入toggle參數，用戶也無需關心當前是顯示還是隱藏狀態，mui會自動識別處理；
mui('.mui-popover').popover('toggle',document.getElementById("openPopover"));
代碼塊激活字符：mpopover
（4）picker（選擇器）
mui框架擴展了pipcker組件,可用於彈出選擇器,在各平台上都有統一表現.poppicker和dtpicker是對picker的具體實現
*poppicker組件依賴mui.picker.js/.css mui.poppicker.js/.css請務必在mui.js/css后中引用,也可統一引用 壓縮版本:mui.picker.min.js
popPicker
適用於彈出單級或多級選擇器
通過new mui.PopPicker()初始化popPicker組件
var picker = new mui.PopPicker();
給picker對象添加數據
picker.setData([{value:'zz',text:'智子'}]);
顯示picker
picker.show( SelectedItemsCallback )
PopPicker 是支持多層級聯的，通過
setSelectedIndex()和setSelectedValue()兩個方法,設定指定層級的選中項
var picker = new mui.PopPicker();
picker.setData([{
value: "first",
text: "第一項"
}, {
value: "second",
text: "第二項"
}, {
value: "third",
text: "第三項"
}, {
value: "fourth",
text: "第四項"
}, {
value: "fifth",
text: "第五項"
}])
//picker.pickers[0].setSelectedIndex(4, 2000);
picker.pickers[0].setSelectedValue('fourth', 2000);
picker.show(function(SelectedItem) {
console.log(SelectedItem);
})
設置多級默認值可依次獲取每一層級Picker對象並設置默認值,如下:
var picker = new mui.PopPicker({
layer: 2
});
picker.setData([{
value: '110000',
text: '北京市',
children: [{
value: "110101",
text: "東城區"
}]
}, {
value: '120000',
text: '天津市',
children: [{
value: "120101",
text: "和平區"
}, {
value: "120102",
text: "河東區"
}, {
value: "120104",
text: "南開區"
}
]
}])
picker.pickers[0].setSelectedIndex(1);
picker.pickers[1].setSelectedIndex(1);
picker.show(function(SelectedItem) {
console.log(SelectedItem);
})
dtpicker
dtpicker組件適用於彈出日期選擇器
通過new mui.DtPicker()初始化DtPicker組件
var dtPicker = new mui.DtPicker(options);
顯示picker
dtPicker.show( SelectedItemsCallback )
實例
var dtPicker = new mui.DtPicker();
dtPicker.show(function (selectItems) {
console.log(selectItems.y);//{text: "2016",value: 2016}
console.log(selectItems.m);//{text: "05",value: "05"}
})
代碼塊激活字符：mpoppicker mdtpicker
（5）progressbar（滾動條）
有准確值的進度條
- 有准確值的進度條會顯示當前進度正處於整體進度的占比位置，用戶可以更直觀的預期完成時間；
- 使用進度條控件，需要一個進度條控件容器，mui會自動識別該容器下是否有進度條控件，若沒有，則自動創建。
進度條控件DOM結構：
<div id="demo1" class="mui-progressbar">
<span></span>
</div>
初始化:
mui(container).progressbar({progress:20}).show();
progressbar初始化邏輯：
檢查當前容器(container控件)自身是否包含
.mui-progressbar類：
- 當前容器包含.mui-progressbar類，則以當前容器為目標控件，直接顯示進度；
- 否則，檢查當前容器的直接孩子節點是否包含.mui-progressbar類，若存在，則以遍歷到的第一個含有.mui-progressbar類的孩子節點為目標控件，顯示進度；
- 若當前容器的直接孩子節點，均不含.mui-progressbar類,則自動創建進度條控件；
更改顯示進度條:
mui(container).progressbar().setProgress(50);
關閉進度條:
mui(container).progressbar().hide();
無限循環進度條:
進度條控件DOM結構（多了
.mui-progressbar-infinite）：
<div id="demo1" class="mui-progressbar mui-progressbar-infinite">
<span></span>
</div>
代碼塊激活字符：mprogressbar
（6）transparentBar（透明標題欄）
透明標題欄組件比較簡單，只需要在
header組件上添加.mui-bar-transparent類即可，如下為示例代碼
<header class="mui-bar mui-bar-nav mui-bar-transparent">
<h1 class="mui-title">標題</h1>
</header>
代碼塊激活字符：mtransparent
（7）radio（單選框）
DOM結構
<div class="mui-input-row mui-radio">
<label>radio</label>
<input name="radio1" type="radio">
</div>
默認radio在右側顯示，若希望在左側顯示，只需增加
.mui-left類即可，如下：
<div class="mui-input-row mui-radio mui-left">
<label>radio</label>
<input name="radio1" type="radio">
</div>
mui基於列表控件，提供了列表式單選實現；在列表根節點上增加
.mui-table-view-radio類即可，若要默認選中某項，只需要在對應li節點上增加.mui-selected類即可，dom結構如下：
<ul class="mui-table-view mui-table-view-radio">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 1</a>
</li>
<li class="mui-table-view-cell mui-selected">
<a class="mui-navigate-right">Item 2</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 3</a>
</li>
</ul>
列表式單選在切換選中項時會觸發selected事件，在事件參數（
e.detail.el）中可以獲得當前選中的dom節點，如下代碼打印當前選中項的innerHTML：
var list = document.querySelector('.mui-table-view.mui-table-view-radio');
list.addEventListener('selected',function(e){
console.log("當前選中的為："+e.detail.el.innerText);
});
代碼塊激活字符：mradio
（8）range（滑塊）
滑塊常用於區間數字選擇
DOM結構
<div class="mui-input-row mui-input-range">
<label>Range</label>
<input type="range" min="0" max="100">
</div>
代碼塊激活字符：mrange
（9）scroll（區域滾動）
mui額外提供了區域滾動組件，使用時需要遵循如下DOM結構
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!--這里放置真實顯示的DOM內容-->
</div>
</div>
示例：快速回滾到該區域頂部，代碼如下：
mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100毫秒滾動到頂
代碼塊激活字符：mscroll mscroolsegmented
（10）slide（輪播組件）
輪播組件是mui提供的一個核心組件，在該核心組件基礎上，衍生出了圖片輪播、可拖動式圖文表格、可拖動式選項卡、左右滑動9宮格等組件，這些組件有較多共同點。首先，Dom構造基本相同，如下：
<div class="mui-slider">
<div class="mui-slider-group">
<!--第一個內容區容器-->
<div class="mui-slider-item">
<!-- 具體內容 -->
</div>
<!--第二個內容區-->
<div class="mui-slider-item">
<!-- 具體內容 -->
</div>
</div>
</div>
如下為一個可拖動式選項卡示例，為提高頁面加載速度，頁面加載時，僅顯示第一個選項卡的內容，第二、第三選項卡內容為空。
當切換到第二、第三個選項卡時，再動態獲取相應內容進行顯示：
var item2Show = false,item3Show = false;//子選項卡是否顯示標志
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
if (event.detail.slideNumber === 1&&!item2Show) {
//切換到第二個選項卡
//根據具體業務，動態獲得第二個選項卡內容；
var content = ....
//顯示內容
document.getElementById("item2").innerHTML = content;
//改變標志位，下次直接顯示
item2Show = true;
} else if (event.detail.slideNumber === 2&&!item3Show) {
//切換到第三個選項卡
//根據具體業務，動態獲得第三個選項卡內容；
var content = ....
//顯示內容
document.getElementById("item3").innerHTML = content;
//改變標志位，下次直接顯示
item3Show = true;
}
});
代碼塊激活字符：mslider
（11）switch（開關）
默認開關控件,帶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("你關閉了開關");
}
})
代碼塊激活字符：mswitch
PS：
Sorry，攢了好久才更，拖延症重度患者啊！！！
下期預告：【MUI框架】之窗口管理