使用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
类即可;
2.button(按钮)
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
属性名 |
作用 |
|
loading 状态显示的文案,默认为: |
|
loading 状态显示的icon,默认为 |
|
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 " onclick=" 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框架相关推荐
- MUI框架开发HTML5手机APP(一)--搭建第一个手机APP
前 言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...
- MUI框架开发HTML5手机APP(一)--搭建第一个手机APP(转)
出处:http://www.cnblogs.com/jerehedu/p/7832808.html 前 言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...
- mui打包ios_优品视界,聚合影视APP源码。mui框架,hbuilder即可编译,云打包生成ios的Android的app...
[实例简介] 影视APP源码,mui框架的.hbuilderx或hbuilder打包即可,只包含前端web app源码文件.基本功能都齐全,有需要的可以拿去.卖好几百的东西.聚合影视源码 Movie ...
- 使用MUI框架构建App请求http接口实例
简介 最近在看Dcloud的MUI框架,MUI封装了android.ios等多个平台的原生接口,达到开发一个项目,采取不同打包方式,生产多种平台的app. 无可厚非,对于从事java web开发的工程 ...
- mui框架移动开发初体验
1. 状态栏设置 现在打开绝大多数APP,状态栏都是与APP一体,不仅美观,而且与整体协调. 博主是个中度强迫症患者,顶部那个小黑条实在让我不舒服. 首先,我们在HBuilder上新建一个移动A ...
- 连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(最新版)
今天是很丧的一天,做什么都提不起兴趣,不知道何时才能做到道家的"无为,而无所不为",也无法理解范仲淹的"不以物喜不以己悲".可是再没兴趣,学习还是要继续!!!为 ...
- 连接真机开发安卓(Android)移动app MUI框架——混合式开发(一) (敲详细)
从接触安卓开发的第一天起,我想我已经爱上了开发,哈哈哈,愿你我坚持下去的理由都是热爱,共勉!这几天没有更新博客,是因为我学习去了(没有相见的日子,我在努力哈哈哈).有想过用模拟器来运行的,但是模拟器太 ...
- mui框架手机端APP开发
最近项目繁忙一直没有时间回顾,此次梳理一下利用mui框架进行手机端app的开发的具体操作. 首先介绍一下我们需要用到的轻量级开发工具HBuilder,HBuilder最主要的优点就是快 ...
- HBuilderX使用mui框架实现一个手机出行工具的AndroidAPP
都说HBuilder很适合做web前端开发,是国内非常著名的前端IDE,话说国内我还真没听过什么其他的IDE,所以,我觉得就冲它是国内自研的一款IDE,能推出来让这么多开发工程师好评,就已经很不容易了 ...
- 懂商业的技术合伙人(14):使用HTML5开发App客户端,HTML5+和MUI框架基本介绍
我非常倾向使用HTML5,搞定PC Web.Mobile Web.Android和iOS.微信小程序等各种UI开发. 作为技术人员,一次学习,处处使用,是个美好的愿望. 本文把2014~2017年,零 ...
最新文章
- python数据分析及展示(一)
- Visual Studio 2019 + MFC——配置MFC
- G - Tiling FZU - 2040(未解决)
- c语言 自动化编译环境,《C编程.开始C》3.编译基础
- css如何调整红心样式_在JavaScript应用程序中包含CSS的多种方法「渡一」
- CCF201609-2 火车购票
- idea抽取重复方法快捷键_使用 IDEA 几分钟就重构了同事800 行quot;又臭又长quot; 的类!真香!...
- tf.truncated_normal与tf.random_normal的区别
- c 语言 封装dll_C#封装YOLOv4算法进行目标检测
- boost asio异步通信
- Kafka学习之broker配置(0.8.1版)(转)
- 软件工程知识点总结(含各类软件工程各类图的画法)
- 计算机发展英文文献,计算机技术发展英文参考文献 计算机技术发展论文参考文献哪里找...
- 缅怀过往_飘云羽逸_新浪博客
- python面向对象实例王者荣耀_用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例...
- 深度学习基础:2.最小二乘法
- 快速的绘制一幅可爱的柯基犬插图教程
- 【产品】CNC工艺手板加工和模具区别详解
- 火星贴---51首电视台使用频率最高经典背景音乐
- Android手机充电器通用吗,安卓手机充电器是否都通用? 你的手机是否支持快充? 电池怎么鼓包了...
热门文章
- 微信小程序:使用普通链接二维码跳转到小程序,解析二维码携带参数(微信扫普通普通链接二维码和小程序里扫二维码解析参数方法)
- Linux Shell学习-第二讲(进阶篇)
- Shell命令-文件压缩解压缩之tar、unzip
- mac下如何设置excel下拉表格
- TapTap推广统计逻辑
- python数字右对齐_python怎么让数字右对齐?
- Java中把word转换成图片
- 如何批量修改图片宽高尺寸
- 面试官:说说你最大的优缺点? (25题汇总版)
- 整天说“B超”,你知道“B”指的是什么吗?