使用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（选择器）

MySQL 核心模块揭秘 | 18 期 | 锁在内存里长什么样*

使用perf工具生成火焰图

大龄程序员思考

响应式界面控件DevExtreme * 更强的数据分析和可视化功能

HttpSecurity 是如何组装过滤器链的

数说海南——近6年海南各市县人口简单看

长序列中Transformers的高级注意力机制总结

WebStorm 创建 Vue 项目

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

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` 属性，从而创建列与列之间的间隔