【MUI框架】學習筆記整理 Day 2

參考整理自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模式的側滑菜單：

• 一、在界面上拖動操做（drag）；
• 二、點擊含有mui-action-menu類的控件；
• 三、Android手機按menu鍵；
• 四、經過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>

以下爲一個可拖動式選項卡示例，爲提升頁面加載速度，頁面加載時，僅顯示第一個選項卡的內容，第2、第三選項卡內容爲空。

當切換到第2、第三個選項卡時，再動態獲取相應內容進行顯示：

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框架】之窗口管理