DCloud-MUI：文檔 UI組件

時間  2019-11-14
標籤 dcloud mui 文檔 組件 简体版
原文   原文鏈接
ylbtech-DCloud-MUI：文檔 UI組件

 

1.返回頂部
一、accordion（摺疊面板）
摺疊面板從二級列表中演化而來，dom結構和二級列表相似，以下： 
<ul class="mui-table-view">
    <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官網中的方法說明，使用的就是摺疊面板控件。javascript

二、actionsheet（操做表）

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

<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
    <!-- 可選擇菜單 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#">菜單1</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"參數便可，以下：html

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

badge（數字角標）html5

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

<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>
四、button（按鈕）

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

普通按鈕
在button節點上增長.mui-btn類，便可生成默認按鈕；若須要其餘顏色的按鈕，則繼續增長對應class便可，好比.mui-btn-blue便可變成藍色按鈕ajax

<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>

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

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

<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>

 運行效果以下：api

加載中按鈕
mui v3.4 版新增長載中按鈕樣式,目前提供經過 JS API 切換 loading和reset狀態,能夠靈活操做適應多種場景

快速體驗:

加載中按鈕支持修改 loading狀態的文案、顯示的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>
五、cardview（卡片視圖）

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

<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>
六、
2.返回頂部
六、checkbox（複選框）

checkbox經常使用於多選的狀況，好比批量刪除、添加羣聊等；

DOM結構

<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對話框樣式統一併且能夠修改對話框屬性或樣式

mui v3.0 版本(含)以上的dialog控件支持換行（\n）顯示


  • .alert( message, title, btnValue, callback [, type] )

    • message
      Type:  String
      提示對話框上顯示的內容
    • title
      Type:  String
      提示對話框上顯示的標題
    • btnValue
      Type:  String
      提示對話框上按鈕顯示的內容
    • callback
      Type:  Function
      提示對話框上關閉後的回調函數
    • type
      Value:  'div'
      是否使用h5繪製的對話框

  • .confirm( message, title, btnValue, callback [, type] )

    • message
      Type:  String
      提示對話框上顯示的內容
    • title
      Type:  String
      提示對話框上顯示的標題
    • btnValue
      Type:  Array
      提示對話框上按鈕顯示的內容
    • callback
      Type:  Function
      提示對話框上關閉後的回調函數
    • type
      Value:  'div'
      是否使用h5繪製的對話框

  • .prompt( message, placeholder, title, btnValue, callback[, type] )

    • message
      Type:  String
      提示對話框上顯示的內容
    • placeholder
      Type:  String
      編輯框顯示的提示文字
    • title
      Type:  String
      提示對話框上顯示的標題
    • btnValue
      Type:  Array
      提示對話框上按鈕顯示的內容
    • callback
      Type:  Function
      提示對話框上關閉後的回調函數
    • type
      Value:  'div'
      是否使用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'

  • .toast( message [,options])

    • message: 'String' - 消息框顯示的文字內容

        options:  {JSON}  - 提示消息的參數

      **options 參數須要mui v3.5+支持
      參數 說明 說明
      duration 持續顯示時間,默認值 short(2000ms) 支持 整數值 和 String ,
      String可選: long(3500ms),short(2000ms)
      type 強制使用mui消息框(div模式) 'div' 
      mui.toast('登錄成功',{ duration:'long', type:'div' })

  • .closePopup()(只能關閉h5模式的對話框)

    • 關閉最後一次彈出的對話框

  • .closePopups()(只能關閉h5模式的對話框)

    • 關閉全部對話框
八、圖片輪播

圖片輪播繼承自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>

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

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

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

若要支持循環，則須要在.mui-slider-group節點上增長.mui-slider-loop類，同時須要重複增長2張圖片，圖片順序變爲：四、一、二、三、四、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(圖標)

mui默認提供了手機App開發經常使用的字體圖標，以下：(點擊icon便可複製樣式)

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

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

關聯閱讀

十一、
3.返回頂部
十一、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>

初始化：
mui在mui.init()中會自動初始化基本控件,可是 動態添加的Input組件須要從新進行初始化

打開chrome控制檯運行下面這段代碼,賦予☝️此密碼框生命力😀

mui('.mui-input-row input').input();

示例:
驗證表單是否爲空

<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表單提交，頁面就會刷新，用戶體驗極差。
使用Native.js實現打開頁面默認彈出軟鍵盤

十二、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>
1三、遮罩蒙版

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

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

 

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

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

.mui-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 998;
    background-color: rgba(0,0,0,.3);
}
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>

可經過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)

示例: getValue()

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

示例: setValue()

mui(Selector).numbox().setValue(5)
示例:setOption() 
mui(Selector).numbox().setOption('step',5)

初始化：

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

mui(Selector).numbox()

擴展閱讀

可接收小數點的數字輸入框 NumberBox
代碼塊激活字符:    

mnumbox
1五、側滑導航

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

如下方法皆支持上述兩種調用方式

方法名 做用
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

擴展閱讀

見問題:

更多問題,請參考問答社區話題討論： 側滑菜單

1六、
4.返回頂部
1六、彈出菜單

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"));
1七、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 
  })

new PopPicker({PopPicker.options}})
layer
Type: Int
picker顯示列數
buttons
Type: Array
picker顯示按鈕
如:new mui.PopPicker({buttons:['cancle','ok']})

setData([data])
參數:data
Type: Array
填充數據
如:picker.setData([{value:'zz',text:'智子'}])
data格式

設置默認值
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);
})

setSelectedIndex(index[, duration, callback])
參數:index
Type: Number
指定列表選中項
如:picker.pickers[0].setSelectedIndex(4)
參數:duration
Type: Number
過渡效果持續時間( ms )
如:picker.pickers[0].setSelectedIndex(4,200)
參數:callback
Type: FUnction
設置成功回調
如:picker.pickers[0].setSelectedIndex(4,200,function(){})

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

setSelectedValue(value[, duration, callback])
參數:value
Type: String
指定列表選中項
如:picker.pickers[0].setSelectedValue('fourth')
參數:duration
Type: Number
渡效果持續時間( ms )
如:picker.pickers[0].setSelectedValue('fourth',200)
參數:callback
Type: FUnction
設置成功回調
如:picker.pickers[0].setSelectedValue('fourth', 200, function(){})

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

getSelectedItems()
返回值[data]
Type: Array
獲取選中的項（數組）
如:picker.getSelectedItems()

show( getSelectedItems )
返回值:[data]
Type: Array
獲取選中的項（數組）
如:
picker.show(function(getSelectedItems){
console.log(getSelectedItems)
})
*return false; 能夠阻止選擇框的關閉

hide()
隱藏picker
如:picker.hide()

dispose()
釋放組件資源(釋放後將將不能再操做組件)
如:picker.dispose()
* 一般狀況下，不須要釋放組件資源，初始化以後，能夠一直使用。
* 當內容較多，如不釋放組件資源，在某些設備上可能會卡頓。
* 因此每次用完便當即調用 dispose() 進行釋放,下次用時再建立新實例。

1八、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"} 
    })
更多
1九、progressbar（滾動條）

有準確值的進度條

  • 有準確值的進度條會顯示當前進度正處於總體進度的佔比位置，用戶能夠更直觀的預期完成時間；
  • 使用進度條控件，須要一個進度條控件容器，mui會自動識別該容器下是否有進度條控件，若沒有，則自動建立。

進度條控件DOM結構：

<div id="demo1" class="mui-progressbar">
    <span></span>
</div>

初始化

mui(container).progressbar({progress:20}).show();

例如：

mui("#demo1").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中預先未定義）的進度條，調用hide方法後，會直接刪掉對應的DOM節點；若已提早建立好DOM節點的進度條，調用hide方法無效；

無限循環進度條:

若沒法準確提供當前進度，能夠提供無限循環進度條（無限循環進度條相似於waiting等待框,參考[HTML5+規範]

無限循環進度條和準確值的進度條的用法基本相同，有以下差別：

進度條控件DOM結構（多了.mui-progressbar-infinite）：

<div id="demo1" class="mui-progressbar mui-progressbar-infinite">
    <span></span>
</div>

初始化

mui("#demo1").progressbar().show();

注意：無限循環進度條不顯示具體進度，所以初始化時，不能傳入progress參數；mui框架也是根據progressbar構造方法中是否包含progress參數來區分當前進度條爲有準確值的進度條仍是無限循環進度條；

一樣由於不顯示具體進度的緣由，無限循環進度條調用setProgress()方法無效。

關閉進度條

mui("#demo1").progressbar().hide();

頁面頂部進度條
頁面頂部進度條相似瀏覽器進度條，固定顯示在頁面頂部（標題導航控件下方）； 所以，若當前頁面使用父子雙webview模式，子頁面沒有標題導航組件，則需經過自定義css的方式，重定義頂部進度條的位置，示例代碼以下：

body>.mui-progressbar{
    top:0
}

使用頁面頂部進度條時，無需編寫DOM結構，使用以下代碼便可自動建立（頂部無限循環進度條同理）：

mui('body').progressbar({
    progress: 20
}).show();
20、transparentBar（透明標題欄）

當用戶向下滾動時，標題欄逐漸由透明轉變爲不透明；當用戶再次向上滾動時，標題欄又從不透明變爲透明狀態。
透明標題欄組件比較簡單，只須要在header組件上添加.mui-bar-transparent類便可，以下爲示例代碼

<header class="mui-bar mui-bar-nav mui-bar-transparent">
    <h1 class="mui-title">標題</h1>
</header>

若是須要個性化定製可經過data-*屬性或者jsAPIDIY

DOM API 做用 JS API
data-top 距離頂部高度(滾動到該位置即觸發) {top:0}
data-offset 滾動透明距離 {offset:150}
data-duration 過渡時間  ms {duration:16}
data-scrollby 監聽區域滾動容器  (*mui 3.5版本+支持) 默認window默認監聽原生滾動,
如監聽mui scroll控件滾動,則: document.querySelector('.mui-scroll-wrapper')		 {scrollby:DOM}

DOM API使用示例:

<header class="mui-bar mui-bar-nav mui-bar-transparent" data-top='0' data-offset='150' data-duration='16' data-scrollby=".mui-scroll-wrapper">
    <h1 class="mui-title">標題</h1>
</header>

JS API使用示例:

mui('.mui-bar-transparent').transparent({
    top: 0,
    offset: 150,
    duration: 16,
    scrollby: document.querySelector('.mui-scroll-wrapper')
})
2一、
5.返回頂部
2一、radio（單選框）

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>

若要禁用radio，只需在radio上增長disabled屬性便可；

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

 

2二、range（滑塊）

滑塊經常使用於區間數字選擇
DOM結構

<div class="mui-input-row mui-input-range">
    <label>Range</label>
    <input type="range" min="0" max="100">
</div>
2三、scroll(區域滾動)

在App開發中，div區域滾動的需求是廣泛存在的，但系統默認實現又有以下問題：

  • Android平臺4.0如下不支持div滾動
  • Android平臺4.0以上支持div滾動，但不顯示滾動條
  • 彈出層的div滾動在iOS平臺存在事件透傳的問題

所以，mui額外提供了區域滾動組件，使用時須要遵循以下DOM結構

<div class="mui-scroll-wrapper">
    <div class="mui-scroll">
        <!--這裏放置真實顯示的DOM內容-->
    </div>
</div>

區域滾動組件默認爲absolute定位，全屏顯示；在實際使用過程當中，須要手動設置滾動區域的位置（top和height）
若使用區域滾動組件，需手動初始化scroll控件

*經常使用配置項:
scroll.options

options = {
 scrollY: true, //是否豎向滾動
 scrollX: false, //是否橫向滾動
 startX: 0, //初始化時滾動至x
 startY: 0, //初始化時滾動至y
 indicators: true, //是否顯示滾動條
 deceleration:0.0006, //阻尼係數,係數越小滑動越靈敏
 bounce: true //是否啓用回彈
}

 示例：初始化scroll控件：

mui('.mui-scroll-wrapper').scroll({
    deceleration: 0.0005 //flick 減速係數，係數越大，滾動速度越慢，滾動距離越小，默認值0.0006
});
mui中iOS平臺的下拉刷新（Android平臺的下拉刷新使用的是雙webview+原生滾動方案）、popover、可拖動式選項卡均使用了scroll組件。 爲方便你們使用，mui還額外爲scroll插件封裝了部分方法。

滾動到特定位置
scrollTo( xpos , ypos [, duration] )
xpos
Type: Integer
要在窗口文檔顯示區左上角顯示的文檔的 x 座標
ypos
Type: Integer
要在窗口文檔顯示區左上角顯示的文檔的 y 座標
duration
Type: Integer
滾動時間週期，單位是毫秒

示例：快速回滾到該區域頂部，代碼以下：

mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100毫秒滾動到頂

滾動到底部位置
滾動到頂部的代碼比較容易實現,座標值設爲0、0便可；但滾動到底部，須要計算該區域的實際高度，所以mui封裝了scrollToBottom方法。

scrollToBottom(duration)
duration
Type: Integer
滾動時間週期，單位是毫秒

橫向滾動
橫向滾動只需在scroll組件基礎上添加mui-slider-indicatorcode mui-segmented-control mui-segmented-control-inverted這三個class便可.(給子元素添加mui-control-item可加大文字間距加強體驗
如:)

<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
    <div class="mui-scroll">
        <a class="mui-control-item mui-active">
            推薦
        </a>
        <a class="mui-control-item">
            熱點
        </a>
        <a class="mui-control-item">
            北京
        </a>
        <a class="mui-control-item">
            社會
        </a>
        <a class="mui-control-item">
            娛樂
        </a>
        <a class="mui-control-item">
            科技
        </a>
    </div>
</div>
2四、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>

當拖動切換顯示內容時，會觸發slide事件，經過該事件的detail.slideNumber參數能夠得到當前顯示項的索引（第一項索引爲0，第二項爲1，以此類推），利用該事件，可在顯示內容切換時，動態處理一些業務邏輯。

以下爲一個可拖動式選項卡示例，爲提升頁面加載速度，頁面加載時，僅顯示第一個選項卡的內容，第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;
  }
});

圖片輪播、可拖動式圖文表格等都可按照一樣方式監聽內容變化，好比咱們能夠在圖片輪播界面顯示當前正在看的是第幾張圖片：

document.querySelector('.mui-slider').addEventListener('slide', function(event) {
  //注意slideNumber是從0開始的；
  document.getElementById("info").innerText = "你正在看第"+(event.detail.slideNumber+1)+"張圖片";
});
2五、switch(開關)

mui提供了開關控件，點擊滑動兩種手勢均可以對開關控件進行操做,UI以下：

默認開關控件,帶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("你關閉了開關");  
  }
})

初始化：
mui在mui.init()中會自動初始化基本控件,可是 動態添加的 Switch 組件須要手動初始化

mui('.mui-switch')['switch']()
2六、
 
6.返回頂部
 
7.返回頂部
 
8.返回頂部
 
9.返回頂部
 
10.返回頂部
 
 
11.返回頂部
 
12.返回頂部
 
13.返回頂部
 
14.返回頂部
 
15.返回頂部
一、
二、
 
16.返回頂部
 
warn 做者：ylbtech
出處：http://ylbtech.cnblogs.com/
本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程