使用Hbuilder搭建MUI框架

概述

MUI建議使用Hbuilder搭建環境（提供現成組件模板，方便快速開發）。真機模擬器：Android studio

安裝新版HBuilder。

下載地址：http://www.dcloud.io/

一.入門

1.accordion（摺疊面板）

摺疊面板從二級列表中演化而來，dom結構和二級列表類似，如下

<ul class="mui-table-view"> //ul默認類
        <li class="mui-table-view-cell   mui-collapse">
            <a class="mui-navigate-right" href="#">面板1</a>
            <div class="mui-collapse-content">   //默認是隱藏的
                <p>面板1子內容</p>
            </div>
        </li>
    </ul>

摺疊面板默認收縮，若希望某個面板默認展開，只需要在包含.mui-collapse類的li節點上，增加.mui-active類即可；

mui默認按鈕爲灰色，另外還提供了藍色（blue）、綠色(green)、黃色(yellow)、紅色(red)、紫色(purple)五種色系的按鈕，五種色系對應五種場景，分別爲primary、success、warning、danger、royal；使用.mui-btn類即可生成一個默認按鈕，繼續添加.mui-btn-顏色值或.mui-btn-場景可生成對應色系的按鈕，例如：通過.mui-btn-blue或.mui-btn-primary均可生成藍色按鈕；

普通按鈕

在button節點上增加.mui-btn類，即可生成默認按鈕；若需要其他顏色的按鈕，則繼續增加對應class即可，比如.mui-btn-blue即可變成藍色按鈕。

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

默認按鈕有底色，運行效果如下：

若希望無底色、有邊框的按鈕，僅需增加.mui-btn-outlined類即可，代碼如下：

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

默認確認自定義文案自定義icon 右側顯示不顯示icon

屬性名	作用
`data-loading-text`	loading 狀態顯示的文案,默認爲: `loading`
`data-loading-icon`	loading 狀態顯示的icon,默認爲`mui-spinner`或`mui-spinner mui-spinner-white`（根據按鈕樣式自動識別），爲空表示不使用icon
`data-loading-icon-position`	loading 狀態顯示的icon的位置,支持left/right默認left

<button type="button" data-loading-icon="mui-spinner mui-spinner-custom" class="mui-btn mui-btn-primary">確認</button>
確認
<button type="button" data-loading-text="提交中" class="mui-btn">確認</button>
確認
<button type="button" data-loading-icon-position="right" class="mui-btn">確認</button>
確認

JS API

mui(btnElem).button('loading');//切換爲loading狀態

mui(btnElem).button('reset');//切換爲reset狀態(即重置爲原始的button)

<button type="button" data-loading-icon="mui-spinner mui-spinner-custom" class="mui-btn mui-btn-primary">確認</button>
<script type="text/javascript">
mui(document.body).on('tap', '.mui-btn', function(e) {
    mui(this).button('loading');
    setTimeout(function() {
        mui(this).button('reset');
    }.bind(this), 2000);
});
</script>

3.佈局：

頭部：

<header class="mui-bar mui-bar-nav" style="background-color: #0066cc;">
	<button class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left" 
            style="color:#ffffff;">
            <span class="mui-icon mui-icon-left-nav"></span>返回 
            </button>
		    <h1 id="title" class="mui-title" style="color:#ffffff;">標題</h1>
</header>

主體(核心)：

<div class="mui-content">...</div>

注：如果 mui-bar 下面第一次出現 mui-content 會有一個padding-top：45px；自動把標題讓出來。

actionsheet（操作表）

actionsheet一般從底部彈出，顯示一系列可供用戶選擇的操作按鈕； actionsheet是從popover控件基礎上演變而來，實際上就是一個固定從底部彈出的popover，故DOM結構和popove類似，只是需要在含.mui-popover類的節點上增加.mui-popover-bottom、.mui-popover-action類；

<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
//ID是爲了JavaScript綁定
    <!-- 可選擇菜單 -->
    <ul class="mui-table-view">//操作功能
      <li class="mui-table-view-cell">//功能菜單
        <a href="#">菜單1</a>//a鏈接  點擊之後幹什麼
      </li>
      <li class="mui-table-view-cell">
        <a href="#">菜單2</a>
      </li>
    </ul>
    <!-- 取消菜單 -->      
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#sheet1"><b>取消</b></a>
      </li>
    </ul>
</div>

和popover一樣，推薦使用錨點方式顯示、隱藏actionsheet；若要使用js代碼動態顯示、隱藏actionsheet，同樣在popover插件的構造方法中傳入"toggle"參數即可，如下：

//傳入toggle參數，用戶無需關心當前是顯示還是隱藏狀態，mui會自動識別處理；
mui('#sheet1').popover('toggle');

完整：



<div id="menu1" class="mui-popover mui-popover-bottom mui-popover-action " οnclick=" shouMenu()">
//ID是爲了JavaScript綁定
    <!-- 可選擇菜單 -->
    <ul class="mui-table-view">//操作功能
      <li class="mui-table-view-cell">//功能菜單
        <a href="#">菜單1</a>//a鏈接  點擊之後幹什麼
      </li>
      <li class="mui-table-view-cell">
        <a href="#">菜單2</a>
      </li>
    </ul>
    <!-- 取消菜單 -->      
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#menu1"><b>取消</b></a>
      </li>
    </ul>
</div>

<script>

function shouMenu(){
mui('#menu1').popover     //popover三個參數   show展示 hide隱藏 toggle(切換)
}

</script>

badge（數字角標）

數字角標一般和其它控件（列表、9宮格、選項卡等）配合使用，用於進行數量提示。角標的核心類是.mui-badge，默認爲實心灰色背景；同時，mui還內置了藍色（blue）、綠色(green)、黃色(yellow)、紅色(red)、紫色(purple)五種色系的數字角標，如下：

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

若無需底色，則增加.mui-badge-inverted類即可，如下：

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

cardview（卡片視圖）

卡片視圖常用於展現一段完整獨立的信息，比如一篇文章的預覽圖、作者信息、點贊數量等，如下是一個卡片demo示例；

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

<div class="mui-card">
	<!--頁眉，放置標題-->
	<div class="mui-card-header">頁眉</div>
	<!--內容區-->
	<div class="mui-card-content">內容區</div>
	<!--頁腳，放置補充信息或支持的操作-->
	<div class="mui-card-footer">頁腳</div>
</div>

卡片頁眉及內容區，均支持放置圖片；頁眉放置圖片的話，需要在.mui-card-header節點上增加.mui-card-media類，然後設置一張圖片做背景圖即可，代碼如下：

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

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

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

checkbox（複選框）

checkbox常用於多選的情況，比如批量刪除、添加羣聊等；

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

默認checkbox在右側顯示，若希望在左側顯示，只需增加.mui-left類即可，如下：

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

若要禁用checkbox，只需在checkbox上增加disabled屬性即可；

dialog（對話框）

創建並顯示對話框，彈出的對話框爲非阻塞模式，用戶點擊對話框上的按鈕後關閉( h5模式的對話框也可通過 closepopup關閉 )，並通過callback函數返回用戶點擊按鈕的索引值或輸入框中的值。

Dialog 組件包含:

組件名	作用	快速體驗
alert	警告框	警告框
confirm	確認框	確認框
prompt	輸入對話框	輸入對話框
toast	消息提示框	自動消失提示框

mui會根據ua判斷,彈出原生對話框還是h5繪製的對話框,在基座中默認會彈出原生對話框,可以配置type屬性,使得彈出h5模式對話框

兩者區別:1.原生對話框可以跨webview,2.h5對話框樣式統一而且可以修改對話框屬性或樣式

如果有定製對話框樣式的需求( 只能修改h5模式對話框)可以在mui.css中修改.mui-popup類下的樣式

如果需要修改DOM結構可以按照以下方式處理.

//修改彈出框默認input類型爲password 
mui.prompt('text','deftext','title',['true','false'],null,'div') 
document.querySelector('.mui-popup-input input').type='password'

圖片輪播

圖片輪播繼承自slide插件，因此其DOM結構、事件均和slide插件相同；

DOM結構

默認不支持循環播放，DOM結構如下：

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

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

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

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

若要支持循環，則需要在.mui-slider-group節點上增加.mui-slider-loop類，同時需要重複增加2張圖片，圖片順序變爲：4、1、2、3、4、1，代碼示例如下：

<div class="mui-slider">
  <div class="mui-slider-group mui-slider-loop">
    <!--支持循環，需要重複圖片節點-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
    <!--支持循環，需要重複圖片節點-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>
  </div>
</div>

JS Method

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

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

因此若希望圖片輪播不要自動播放，而是用戶手動滑動才切換，只需要通過如上方法，將interval參數設爲0即可。

若要跳轉到第x張圖片，則可以使用圖片輪播插件的gotoItem方法，例如：

//獲得slider插件對象
var gallery = mui('.mui-slider');
gallery.slider().gotoItem(index);//跳轉到第index張圖片，index從0開始；

注意：mui框架會默認初始化當前頁面的圖片輪播組件；若輪播組件內容爲js動態生成時（比如通過ajax動態獲取的營銷信息），則需要在動態生成完整DOM (包含mui-slider下所有DOM結構) 後，手動調用圖片輪播的初始化方法；代碼如下：

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

grid（柵格）

柵格系統簡介：

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

柵格參數:

尺寸	超小屏幕(<400px)(Extrasmall)	小屏幕(≥400px) Small
類前綴	`.mui-col-xs-[1-12]`	`.mui-col-sm-[1-12]`
列（column）數	12
可嵌套	是

實例:

左側:通過定義.mui-col-sm-6類在大屏(≥400px)設備上會展現爲並排的兩列,而.mui-col-xs-12在小屏(＜400px)設備上會覆蓋之前定義的類展現爲水平排列

<div class="mui-content">
    <div class="mui-row">
        <div class="mui-col-sm-6 mui-col-xs-12">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1    
                </a>
            </li>
        </div>
        <div class="mui-col-sm-6 mui-col-xs-12">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1
                </a>
            </li>
        </div>
    </div>
</div>

實例:多餘的列將會另起一行排列

左側:如果在一個.mui-row內包含的列（column）大於12個,包含多餘列（column）的元素將作爲一個整體單元被另起一行排列。

右側:如果不足12個列將不會撐滿整個.mui-row容器

<div class="mui-content">
    <div class="mui-row">
        <div class="mui-col-sm-8">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1    
                </a>
            </li>
        </div>
        <div class="mui-col-sm-6">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1
                </a>
            </li>
        </div>
    </div>
</div>

實例:通過爲`列`設置`padding` 屬性，從而創建列與列之間的間隔

兩列之間白色區域爲左側列的padding

<div class="mui-content">
    <div class="mui-row">
        <div class="mui-col-sm-6" style="padding-right: 20px;">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1    
                </a>
            </li>
        </div>
        <div class="mui-col-sm-6">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1
                </a>
            </li>
        </div>
    </div>
</div>

icon(圖標)

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

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

ipnut (表單)

基本說明:

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

<form class="mui-input-group">
    <div class="mui-input-row">
        <label>用戶名</label>
    <input type="text" class="mui-input-clear" placeholder="請輸入用戶名">
    </div>
    <div class="mui-input-row">
        <label>密碼</label>
        <input type="password" class="mui-input-password" placeholder="請輸入密碼">
    </div>
    <div class="mui-button-row">
        <button type="button" class="mui-btn mui-btn-primary" >確認</button>
        <button type="button" class="mui-btn mui-btn-danger" >取消</button>
    </div>
</form>

輸入增強:

mui目前提供的輸入增強包括：快速刪除、語音輸入*5+ only和密碼框顯示隱藏密碼。

快速刪除：只需要在input控件上添加.mui-input-clear類，當input 控件中有內容時，右側會有一個刪除圖標，點擊會清空當前input的內容；

<form class="mui-input-group">
    <div class="mui-input-row">
        <label>快速刪除</label>
        <input type="text" class="mui-input-clear" placeholder="請輸入內容">
    </div>
</form>

搜索框：在.mui-input-row同級添加.mui-input-search 類，就可以使用search控件

<div class="mui-input-row mui-search">
    <input type="search" class="mui-input-clear" placeholder="">
</div>

語音輸入*5+ only：爲了方便快速輸入，mui集成了 HTML5+的語音輸入，只需要在對應input控件上添加.mui-input-speech 類，就可以在5+環境下使用語音輸入
密碼框：給input元素添加.mui-input-password類即可使用

<form class="mui-input-group">
    <div class="mui-input-row">
        <label>密碼框</label>
        <input type="password" class="mui-input-password" placeholder="請輸入密碼">
    </div>
</form>

示例:

驗證表單是否爲空

<div class="mui-input-group">
    <div class="mui-input-row">
        <label>用戶名：</label>
        <input type="text" class="mui-input-clear" placeholder="請輸入用戶名">
    </div>
    <div class="mui-input-row">
        <label>密碼：</label>
        <input type="password" class="mui-input-clear mui-input-password" placeholder="請輸入密碼">
    </div>
</div>

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

mui("#input_example input").each(function() {
//若當前input爲空，則alert提醒 
if(!this.value || this.value.trim() == "") {
    var label = this.previousElementSibling;
    mui.alert(label.innerText + "不允許爲空");
    check = false;
    return false;
}
}); //校驗通過，繼續執行業務邏輯 
if(check){
    mui.alert('驗證通過!')
}

擴展閱讀

注：始終爲button按鈕添加type屬性，若button按鈕沒有type屬性，瀏覽器默認按照type="submit"邏輯處理，這樣若將沒有type的button放在form表單中，點擊按鈕就會執行form表單提交，頁面就會刷新，用戶體驗極差。

list（列表）

普通列表

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

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

自定義列表高亮顏色

點擊列表，對應列表項顯示灰色高亮，若想自定義高亮顏色，只需要重寫.mui-table-view-cell.mui-active即可，如下：

/*點擊變藍色高亮*/
.mui-table-view-cell.mui-active{
	background-color: #0062CC;
}

右側添加導航箭頭

若右側需要增加導航箭頭，變成導航鏈接，則只需在li節點下增加a子節點，併爲該a節點增加.mui-navigate-right類即可，如下：

<ul class="mui-table-view">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Item 1</a>
    </li>
    <li class="mui-table-view-cell">
        <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>

右側添加數字角標等控件

mui支持將數字角標、按鈕、開關等控件放在列表中；mui默認將數字角標放在列表右側顯示，代碼如下：

<ul class="mui-table-view">
    <li class="mui-table-view-cell">Item 1 
        <span class="mui-badge mui-badge-primary">11</span>
    </li>
    <li class="mui-table-view-cell">Item 2 
        <span class="mui-badge mui-badge-success">22</span>
    </li>
    <li class="mui-table-view-cell">Item 3 
        <span class="mui-badge">33</span>
    </li>
</ul>

media list（圖文列表）

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

<ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
            <div class="mui-media-body">
                幸福
                <p class='mui-ellipsis'>能和心愛的人一起睡覺，是件幸福的事情；可是，打呼嚕怎麼辦？</p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="../images/muwu.jpg">
            <div class="mui-media-body">
                木屋
                <p class='mui-ellipsis'>想要這樣一間小木屋，夏天挫冰吃瓜，冬天圍爐取暖.</p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="../images/cbd.jpg">
            <div class="mui-media-body">
                CBD
                <p class='mui-ellipsis'>烤爐模式的城，到黃昏，如同打翻的調色盤一般.</p>
            </div>
        </a>
    </li>
</ul>

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>

可通過data-numbox*自定義屬性設置數字輸入框的參數，如下：

Data API

屬性名	作用
data-numbox-min	輸入框允許使用的最小值，默認無限制
data-numbox-max	輸入框允許使用的最大值，默認無限制
data-numbox-step	每次點擊“+”、“-”按鈕變化的步長，默認步長爲1

示例：設置取值範圍爲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>

JS API

方法名	作用	示例
`getValue()`	獲取當前值	getValue()
`setValue(Value)`	動態設置新值 `Int`	setValue(Value)
`setOption(options)`	更新選項,可取值: `min(Int)`,`step(Int)`,`max(Int)`	setOption(options)

取當前值

mui(Selector).numbox().getValue()

設置新值

mui(Selector).numbox().setValue(5)

更新選項設置步長(step)爲5

mui(Selector).numbox().setOption('step',5)

初始化：

mui在mui.init()中會自動初始化基本控件,但是動態添加的Numbox組件需要手動初始化

mui(Selector).numbox()

側滑導航

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();

方法名	作用
show()	顯示
close()	隱藏
toggle()	切換

事件監聽

你可以通過一下方式監聽側滑菜單顯示隱藏

事件名	作用
shown	顯示
hidden	隱藏

document.querySelector('.mui-off-canvas-wrap').addEventListener('shown',function (event) {
    //...
})

也可以通過isShown()方法判斷是否爲顯示狀態

mui('.mui-off-canvas-wrap').offCanvas().isShown();

isShown() 方法也可以傳遞 direction(方向) 參數(非必選!!)進而可以判斷左右側滑

mui('.mui-off-canvas-wrap').offCanvas().isShown('left');//true

彈出菜單

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>

要顯示、隱藏如上菜單，mui推薦使用錨點方式，例如：

<a href="#popover" id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">打開彈出菜單</a>

點擊如上定義的按鈕，即可顯示彈出菜單，再次點擊彈出菜單之外的其他區域，均可關閉彈出菜單；這種使用方式最爲簡潔。

若希望通過js的方式控制彈出菜單，則通過如下一個方法即可：

mui('.bottomPopover').popover(status[,anchor]);

status
- 'show'
  
  顯示popover
- 'hide'
  
  隱藏popover
- 'toggle'
  
  自動識別處理顯示隱藏狀態

mui('.bottomPopover').popover('toggle');//show hide toggle

[anchor]

anchorElement

錨點元素

//傳入toggle參數，用戶也無需關心當前是顯示還是隱藏狀態，mui會自動識別處理；
mui('.mui-popover').popover('toggle',document.getElementById("openPopover"));

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對象添加數據

setData() 支持數據格式爲: 數組

 picker.setData([{value:'zz',text:'智子'}]);

顯示picker

 picker.show( SelectedItemsCallback )

實例

 var picker = new mui.PopPicker();
 picker.setData([{value:'zz',text:'智子'}]);
 picker.show(function (selectItems) {
    console.log(selectItems[0].text);//智子
    console.log(selectItems[0].value);//zz 
  })

設置默認值

PopPicker 創建實例並填充數據後，可以設定每個層級的選中項，因爲 PopPicker 是支持多層級聯的，所以，可通過 instance.pickers[index] 拿到指定層級的實例，然後通過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);
})

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.show(function(SelectedItem) {
    console.log(SelectedItem);
})

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.show(function(SelectedItem) {
    console.log(SelectedItem);
})

使用Hbuilder搭建MUI框架

一.入門

1.accordion（摺疊面板）

2.button（按鈕）

3.佈局：

actionsheet（操作表）

badge（數字角標）

cardview（卡片視圖）

checkbox（複選框）

dialog（對話框）

圖片輪播

grid（柵格）

實例:

實例:多餘的列將會另起一行排列

實例:通過爲`列`設置`padding` 屬性，從而創建列與列之間的間隔

ipnut (表單)

擴展閱讀

list（列表）

numbox(數字輸入框)

側滑導航

JS API

彈出菜單

picker（選擇器）

容器中nginx無法使用同一個網絡下的容器域名

Python: SunMoonTimeCalculator

NETCore中實現一個輕量無負擔的極簡任務調度ScheduleTask

docker使用特定的網絡

使用c#強大的表達式樹實現對象的深克隆之解決循環引用的問題

「Pygors跨平臺GUI」2：安裝MinGW-w64、MSYS2還是WSL2

「Pygors跨平臺GUI」1：Pygors跨平臺GUI應用研究

nodejs學習07——API

避免DbContext同時在多個線程調用

GPT-4o 引領人機交互新風向，向量數據庫賽道沸騰了

軟件測試的介紹和如何做好軟件測試

HTTP 超文本傳輸協議知識瞭解

MySQL的存儲過程和索引

關於接口測試用例的編寫

瞭解計算機基礎知識

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

使用Hbuilder搭建MUI框架

一.入門

1.accordion（摺疊面板）

2.button（按鈕）

3.佈局：

實例:

實例:多餘的列將會另起一行排列

實例:通過爲列設置padding 屬性，從而創建列與列之間的間隔

擴展閱讀

JS API

實例:通過爲`列`設置`padding` 屬性，從而創建列與列之間的間隔