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

MUI 框架之 【原生UI】

（1）accordion（摺疊面板）

由二級列表演化而來

1 <ul class="mui-table-view">
2　　 <li class="mui-table-view-cell mui-collapse">
3 　　　　<a class="mui-navigate-right" href="#"></a>
4 　　　　　　<div class="mui-collapse-content">
5 　　　　　　　　<p>不拉不拉</p>
6 　　　　　　</div>
7 　　　</li>
8 </ul>

代碼塊激活字符：maccordion

（2）actionsheet（操做表)

從底部彈出，顯示選擇項的操做按鈕

 1 <div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
　　　　<!-- 可選擇菜單 --> 
 2 　　<ul class="mui-table-view"> 
 3 　　　　<li class="mui-table-view-cell"> 
 4 　　　　　　<a href="#">菜單1</a> 
 5 　　　　</li> 
 6 　　　　<li class="mui-table-view-cell"> 
 7 　　　　　　<a href="#">菜單2</a> </li>
 8 　　</ul> 
　　　　<!-- 取消菜單 --> 
 9 　　<ul class="mui-table-view">
10  　　　　<li class="mui-table-view-cell"> 
11 　　　　　　<a href="#sheet1"><b>取消</b></a>
12  　　　　</li> 
13 　　</ul>
14 </div>

【經典案例】：

 1 <div id="gender" class="mui-popover mui-popover-action mui-popover-bottom">
 2 　　 <ul class="mui-table-view">
 3  　　　　<li class="mui-table-view-cell">
 4  　　　　　　<a href="#">男</a>
 5  　　　　</li>
 6  　　　　<li class="mui-table-view-cell">
 7  　　　　　　<a href="#">女</a>
 8  　　　　</li>
 9  　　　　<li class="mui-table-view-cell">
10  　　　　　　<a href="#">保 密</a>
11  　　　　</li>
12  　　</ul>
13  　　<ul class="mui-table-view">
14 　　　　 <li class="mui-table-view-cell">
15  　　　　　　<a href="#gender"><b>取 消</b></a>
16  　　　　</li>
17  　　</ul>
18 </div>

若要使用js代碼動態顯示、隱藏actionsheet，一樣在popover插件的構造方法中傳入"toggle"參數便可，以下： mui('#sheet1').popover('toggle');

代碼塊激活字符：mactionsheet

（3）badge（數字角標）

用於數量提示。好比消息條數。

角標的核心類是.mui-badge，默認爲實心灰色背景；同時，mui還內置了藍色（blue）、綠色(green)、黃色(yellow)、紅色(red)、紫色(purple)五種色系的數字角標，以下：

1 <span class="mui-badge">1</span>
2 <span class="mui-badge mui-badge-primary">12</span>
3 <span class="mui-badge mui-badge-success">123</span> 
4 <span class="mui-badge mui-badge-warning">3</span>
5 <span class="mui-badge mui-badge-danger">45</span>
6 <span class="mui-badge mui-badge-purple">456</span>

若無需底色，則增長.mui-badge-inverted類便可，以下：

1 <span class="mui-badge mui-badge-inverted">1</span>
2 <span class="mui-badge mui-badge-primary mui-badge-inverted">2</span>
3 <span class="mui-badge mui-badge-success mui-badge-inverted">3</span>
4 <span class="mui-badge mui-badge-warning mui-badge-inverted">4</span>
5 <span class="mui-badge mui-badge-danger mui-badge-inverted">5</span>
6 <span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>

代碼塊激活字符：mbadge

（4）button（按鈕）

1 <button type="button" class="mui-btn">默認</button>
2 <button type="button" class="mui-btn mui-btn-primary">藍色</button>
3 <button type="button" class="mui-btn mui-btn-success">綠色</button>
4 <button type="button" class="mui-btn mui-btn-warning">黃色</button>
5 <button type="button" class="mui-btn mui-btn-danger">紅色</button>
6 <button type="button" class="mui-btn mui-btn-royal">紫色</button>

若但願無底色、有邊框的按鈕，僅需增長.mui-btn-outlined類便可，代碼以下：

1 <button type="button" class="mui-btn mui-btn-outlined">默認</button>
2 <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">藍色</button>
3 <button type="button" class="mui-btn mui-btn-success mui-btn-outlined">綠色</button>
4 <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黃色</button>
5 <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">紅色</button>
6 <button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">紫色</button>

代碼塊激活字符：mbutton

（5）cardview（卡片視圖）

卡片視圖經常使用於展示一段完整獨立的信息。

使用mui-card類便可生成一個卡片容器，卡片視圖主要有頁眉、內容區、頁腳三部分組成，結構以下：

1 <div class="mui-card">
2 <!--頁眉，放置標題-->
3 <div class="mui-card-header">頁眉</div>
4 <!--內容區-->
5 <div class="mui-card-content">內容區</div>
6 <!--頁腳，放置補充信息或支持的操做-->
7 <div class="mui-card-footer">頁腳</div>
8 </div>

卡片頁眉及內容區，均支持放置圖片； 頁眉放置圖片的話，須要在.mui-card-header節點上增長.mui-card-media類，而後設置一張圖片作背景圖便可，代碼以下：

1 <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../images/cbd.jpg)"></div>

若但願在頁眉放置更豐富的信息，好比頭像、主標題、副標題，則需使用.mui-media-body類，示例代碼以下：

1 <div class="mui-card-header mui-card-media">
2 　　<img src="../images/logo.png" />
3 　　<div class="mui-media-body">
4 　　　　小M
5 　　　　<p>發表於 2016-06-30 15:30</p>
6 　　</div>
7 </div>

（6）checkbox（複選框）

checkbox經常使用於多選的狀況，好比批量刪除。

1 <div class="mui-input-row mui-checkbox">
2 　　<label>checkbox示例</label>
3 　　<input name="checkbox1" value="Item 1" type="checkbox" checked>
4 </div>

默認checkbox在右側顯示，若但願在左側顯示，只需增長.mui-left類便可，以下：

1 <div class="mui-input-row mui-checkbox mui-left">
2 　　<label>checkbox左側顯示示例</label>
3 　　<input name="checkbox1" value="Item 1" type="checkbox">
4 </div>

代碼塊激活字符：mckeckbox

（7）dialog（對話框）

 

 

代碼塊激活字符：mdalert mdconfirm mdprompt mdtoast mdclosepopup mdclosepopups

（8）圖片輪播

1 <div class="mui-slider">
2 　　<div class="mui-slider-group">
3 　　　　<div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
4 　　　　<div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
5 　　　　<div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
6 　　　　<div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
7 　　</div>
8 </div>

假設當前圖片輪播中有一、二、三、4四張圖片，從第1張圖片起，依次向左滑動切換圖片，當切換到第4張圖片時，繼續向左滑動，接下來會有兩種效果：

• 支持循環：左滑，直接切換到第1張圖片；
• 不支持循環：左滑，無反應，繼續顯示第4張圖片，用戶若要顯示第1張圖片，必須連續向右滑動切換到第1張圖片；

當顯示第1張圖片時，繼續右滑是否顯示第4張圖片，是一樣問題；這個問題的實現須要經過.mui-slider-loop類及DOM節點來控制；

若要支持循環，則須要在.mui-slider-group節點上增長.mui-slider-loop類，同時須要重複增長2張圖片，圖片順序變爲：四、一、二、三、四、1，代碼示例以下：

 1 <div class="mui-slider">
 2 　　<div class="mui-slider-group mui-slider-loop">
 3 　　<!--支持循環，須要重複圖片節點-->
 4 　　　　<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div>
 5　　　　 <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
 6 　　　　<div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
 7 　　　　<div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
 8 　　　　<div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
 9 　　<!--支持循環，須要重複圖片節點-->
10 　　　　<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>
11 　　</div>
12 </div>

JS Method

mui框架內置了圖片輪播插件，經過該插件封裝的JS API，用戶能夠設定是否自動輪播及輪播週期，以下爲代碼示例：

1 //得到slider插件對象
2 var gallery = mui('.mui-slider');
3 gallery.slider({
4 interval:5000//自動輪播週期，若爲0則不自動播放，默認爲0；
5 });

所以若但願圖片輪播不要自動播放，而是用戶手動滑動才切換，只須要經過如上方法，將interval參數設爲0便可。

代碼塊激活字符：mslider

（9）grid（柵格）

MUI 提供了很是簡單實用的12列響應式柵格系統。使用時只需在外圍容器上添加.mui-row，在列上添加 .mui-col-[sm|xs]-[1-12]，便可

代碼塊激活字符：mrow mcolsm mcolxs

（10）icon（圖標）

mui默認提供了手機App開發經常使用的字體圖標，以下：

 

使用時，只須要在span節點上分別增長.mui-icon、.mui-icon-name兩個類便可（name爲圖標名稱，例如：weixin、weibo等），以下代碼便可顯示一個微信圖標：

1 <span class="mui-icon mui-icon-weixin"></span>

代碼塊激活字符：micon

（11）input（表單）

全部包裹在.mui-input-row 類中的 input、textarea等元素都被默認設置寬度屬性爲width: 100%; 將 label元素和上述控件包裹在.mui-input-group中能夠得到最好的排列。

 1 <form class="mui-input-group">
 2 　　<div class="mui-input-row">
 3 　　　　<label>用戶名</label>
 4 　　　　<input type="text" class="mui-input-clear" placeholder="請輸入用戶名">
 5 　　</div>
 6 　　<div class="mui-input-row">
 7 　　　　<label>密碼</label>
 8 　　　　<input type="password" class="mui-input-password" placeholder="請輸入密碼">
 9 　　</div>
10 　　<div class="mui-button-row">
11 　　　　<button type="button" class="mui-btn mui-btn-primary" >確認</button>
12 　　　　<button type="button" class="mui-btn mui-btn-danger" >取消</button>
13 　　</div>
14 </form>

密碼框顯示隱藏密碼：

給input元素添加.mui-input-password類便可使用。

1 <form class="mui-input-group">
2　　 <div class="mui-input-row">
3 　　　　<label>密碼框</label>
4　　　　 <input type="password" class="mui-input-password" placeholder="請輸入密碼">
5 　　</div>
6 </form>

示例：

驗證表單是否爲空

 1 <div class="mui-input-group">
 2 　　<div class="mui-input-row">
 3 　　　　<label>用戶名：</label>
 4 　　　　<input type="text" class="mui-input-clear" placeholder="請輸入用戶名">
 5 　　</div>
 6 　　<div class="mui-input-row">
 7 　　　　<label>密碼：</label>
 8　　　　 <input type="password" class="mui-input-clear mui-input-password" placeholder="請輸入密碼">
 9 　　</div>
10 </div>

提交時校驗三個字段均不能爲空，若爲空則提醒並終止業務邏輯運行，使用 each()方法循環校驗，以下：

 1 mui("#input_example input").each(function() {
 2 //若當前input爲空，則alert提醒
 3 if(!this.value || this.value.trim() == "") {
 4 var label = this.previousElementSibling;
 5 mui.alert(label.innerText + "不容許爲空");
 6 check = false;
 7 return false;
 8 }
 9 }); //校驗經過，繼續執行業務邏輯
10 if(check){
11 mui.alert('驗證經過!')
12 }

代碼塊激活字符：minput

（12）list（列表）

列表是經常使用的UI控件，mui封裝的列表組件比較簡單，只須要在ul節點上添加.mui-table-view類、在li節點上添加.mui-table-view-cell類便可，以下爲示例代碼

1 <ul class="mui-table-view">
2 　　<li class="mui-table-view-cell">Item 1</li>
3 　　<li class="mui-table-view-cell">Item 2</li>
4 　　<li class="mui-table-view-cell">Item 3</li>
5 </ul>

 

右側添加導航箭頭

 

 1 <ul class="mui-table-view">
 2 　　<li class="mui-table-view-cell">
 3 　　　　<a class="mui-navigate-right">Item 1</a>
 4 　　</li>
 5 　　<li class="mui-table-view-cell">
 6 　　　　<a class="mui-navigate-right">Item 2</a>
 7 　　</li>
 8 　　<li class="mui-table-view-cell">
 9 　　　　<a class="mui-navigate-right">Item 3</a>
10　　 </li>
11 </ul>

右側添加數字角標

 1 <ul class="mui-table-view">
 2 　　<li class="mui-table-view-cell">Item 1
 3 　　　　<span class="mui-badge mui-badge-primary">11</span>
 4 　　</li>
 5 　　<li class="mui-table-view-cell">Item 2
 6 　　　　<span class="mui-badge mui-badge-success">22</span>
 7 　　</li>
 8 　　<li class="mui-table-view-cell">Item 3
 9 　　　　<span class="mui-badge">33</span>
10 　　</li>
11 </ul>

media list （圖文列表）

圖文列表繼承自列表組件，主要添加了.mui-media、.mui-media-object、.mui-media-body、.mui-pull-left/right幾個類，以下爲示例代碼

 1 <ul class="mui-table-view">
 2 　　<li class="mui-table-view-cell mui-media">
 3 　　　　<a href="javascript:;">
 4 　　　　　<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
 5 　　　　　<div class="mui-media-body">
 6 　　　　　　幸福
 7 　　　　　　<p class='mui-ellipsis'>能和心愛的人一塊兒睡覺，是件幸福的事情；但是，打呼嚕怎麼辦？</p>
 8 　　　　</div>
 9 　　　　</a>
10 　　</li>
11 　　<li class="mui-table-view-cell mui-media">
12 　　　　<a href="javascript:;">
13 　　　　<img class="mui-media-object mui-pull-left" src="../images/muwu.jpg">
14 　　　　<div class="mui-media-body">
15 　　　　　　木屋
16 　　　　　　<p class='mui-ellipsis'>想要這樣一間小木屋，夏天挫冰吃瓜，冬天圍爐取暖.</p>
17 　　　　</div>
18 　　　　</a>
19 　　</li>
20 　　<li class="mui-table-view-cell mui-media">
21 　　　　<a href="javascript:;">
22 　　　　<img class="mui-media-object mui-pull-left" src="../images/cbd.jpg">
23　　　　 <div class="mui-media-body">
24 　　　　　　CBD
25 　　　　　　<p class='mui-ellipsis'>烤爐模式的城，到黃昏，如同打翻的調色盤通常.</p>
26 　　　　</div>
27 　　　　</a>
28 　　</li>
29 </ul>

代碼塊激活字符：mlist

 

（13）遮罩蒙版

在popover、側滑菜單等界面，常常會用到蒙版遮罩；好比popover彈出後，除popover控件外的其它區域都會遮罩一層蒙版，用戶點擊蒙版不會觸發蒙版下方的邏輯，而會關閉popover同時關閉蒙版；再好比側滑菜單界面，菜單劃出後，除側滑菜單以外的其它區域都會遮罩一層蒙版，用戶點擊蒙版會關閉側滑菜單同時關閉蒙版。

遮罩蒙版經常使用的操做包括：建立、顯示、關閉，以下代碼：

1 var mask = mui.createMask(callback);//callback爲用戶點擊蒙版時自動執行的回調；
2 mask.show();//顯示遮罩
3 mask.close();//關閉遮罩

注意：關閉遮罩僅會關閉，不會銷燬；關閉以後能夠再次調用mask.show();打開遮罩；

mui默認的蒙版遮罩使用.mui-backdrop類定義（以下代碼），若需自定義遮罩效果，只需覆蓋定義.mui-backdrop便可；

1 .mui-backdrop {
2 position: fixed;
3 top: 0;
4 right: 0;
5 bottom: 0;
6 left: 0;
7 z-index: 998;
8 }

代碼塊激活字符：mmask

 

OK，今天的學習總結就是這些了，持續更新中……