概述
MUI建议使用Hbuilder搭建环境(提供现成组件模板 ,方便快速开发)。真机模拟器:Android studio
安装新版HBuilder。
下载地址:http://www.dcloud.io/
折叠面板从二级列表中演化而来,dom结构和二级列表类似,如下
//ul默认类
-
面板1
//默认是隐藏的
面板1子内容
折叠面板默认收缩,若希望某个面板默认展开,只需要在包含.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
即可变成蓝色按钮。
默认按钮有底色,运行效果如下:
若希望无底色、有边框的按钮,仅需增加.mui-btn-outlined
类即可,代码如下:
默认 确认 自定义文案 自定义icon 右侧显示 不显示icon
属性名 |
作用 |
|
loading 状态显示的文案,默认为: |
|
loading 状态显示的icon,默认为 |
|
loading 状态显示的icon的位置,支持left/right默认left |
确认
确认
确认
JS API
mui(btnElem).button('loading');//切换为loading状态
mui(btnElem).button('reset');//切换为reset状态(即重置为原始的button)
头部:
标题
主体(核心):
...
注:如果 mui-bar 下面 第一次出现 mui-content 会有一个padding-top:45px;自动把标题让出来。
actionsheet一般从底部弹出,显示一系列可供用户选择的操作按钮; actionsheet是从popover控件基础上演变而来,实际上就是一个固定从底部弹出的popover,故DOM结构和popove类似,只是需要在含.mui-popover
类的节点上增加.mui-popover-bottom
、.mui-popover-action
类;
和popover一样,推荐使用锚点方式显示、隐藏actionsheet;若要使用js代码动态显示、隐藏actionsheet,同样在popover插件的构造方法中传入"toggle"参数即可,如下:
//传入toggle参数,用户无需关心当前是显示还是隐藏状态,mui会自动识别处理;
mui('#sheet1').popover('toggle');
完整:
数字角标一般和其它控件(列表、9宫格、选项卡等)配合使用,用于进行数量提示。 角标的核心类是.mui-badge
,默认为实心灰色背景;同时,mui还内置了蓝色(blue)、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标,如下:
1
12
123
3
45
456
若无需底色,则增加.mui-badge-inverted
类即可,如下:
1
2
3
4
5
6
卡片视图常用于展现一段完整独立的信息,比如一篇文章的预览图、作者信息、点赞数量等,如下是一个卡片demo示例;
使用mui-card
类即可生成一个卡片容器,卡片视图主要有页眉、内容区、页脚三部分组成,结构如下:
页眉
内容区
卡片页眉及内容区,均支持放置图片; 页眉放置图片的话,需要在.mui-card-header
节点上增加.mui-card-media
类,然后设置一张图片做背景图即可,代码如下:
若希望在页眉放置更丰富的信息,比如头像、主标题、副标题,则需使用.mui-media-body
类,示例代码如下:
小M
发表于 2016-06-30 15:30
checkbox常用于多选的情况,比如批量删除、添加群聊等;
默认checkbox在右侧显示,若希望在左侧显示,只需增加.mui-left
类即可,如下:
若要禁用checkbox,只需在checkbox上增加disabled属性即可;
创建并显示对话框,弹出的对话框为非阻塞模式
,用户点击对话框上的按钮后关闭( 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结构如下:
假设当前图片轮播中有1、2、3、4四张图片,从第1张图片起,依次向左滑动切换图片,当切换到第4张图片时,继续向左滑动,接下来会有两种效果:
当显示第1张图片时,继续右滑是否显示第4张图片,是同样问题;这个问题的实现需要通过.mui-slider-loop
类及DOM节点来控制;
若要支持循环,则需要在.mui-slider-group
节点上增加.mui-slider-loop
类,同时需要重复增加2张图片,图片顺序变为:4、1、2、3、4、1,代码示例如下:
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;
});
栅格系统简介:
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)设备上会覆盖之前定义的类展现为水平排列
左侧:如果在一个.mui-row
内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列。
右侧:如果不足12个列将不会撑满整个.mui-row
容器
列
设置padding
属性,从而创建列与列之间的间隔两列之间白色区域为左侧列的padding
icon(图标)
使用时,只需要在span
节点上分别增加.mui-icon
、.mui-icon-name
两个类即可(name为图标名称,例如:weixin、weibo等),如下代码即可显示一个微信图标:
基本说明:
所有包裹在.mui-input-row
类中的 input、textarea等元素都将被默认设置宽度属性为width: 100%;
。 将 label 元素和上述控件控件包裹在.mui-input-group
中可以获得最好的排列。
输入增强:
mui目前提供的输入增强包括:快速删除、语音输入*5+ only和密码框显示隐藏密码。
.mui-input-clear
类,当input 控件中有内容时,右侧会有一个删除图标,点击会清空当前input的内容;
搜索框:在.mui-input-row
同级添加.mui-input-search
类,就可以使用search控件
.mui-input-speech
类,就可以在5+环境下使用语音输入.mui-input-password
类即可使用
示例:
验证表单是否为空
提交时校验三个字段均不能为空,若为空则提醒并终止业务逻辑运行,使用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('验证通过!')
}
type
属性,若button按钮没有type属性,浏览器默认按照type="submit"
逻辑处理, 这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交,页面就会刷新,用户体验极差。普通列表
列表是常用的UI控件,mui封装的列表组件比较简单,只需要在ul
节点上添加.mui-table-view
类、在li
节点上添加.mui-table-view-cell
类即可,如下为示例代码
- Item 1
- Item 2
- Item 3
自定义列表高亮颜色
点击列表,对应列表项显示灰色高亮,若想自定义高亮颜色,只需要重写.mui-table-view-cell.mui-active
即可,如下:
/*点击变蓝色高亮*/
.mui-table-view-cell.mui-active{
background-color: #0062CC;
}
右侧添加导航箭头
若右侧需要增加导航箭头,变成导航链接,则只需在li
节点下增加a
子节点,并为该a
节点增加.mui-navigate-right
类即可,如下:
右侧添加数字角标等控件
mui支持将数字角标、按钮、开关等控件放在列表中;mui默认将数字角标放在列表右侧显示,代码如下:
- Item 1
11
- Item 2
22
- Item 3
33
media list(图文列表)
图文列表继承自列表组件,主要添加了.mui-media
、.mui-media-object
、.mui-media-body
、.mui-pull-left/right
几个类,如下为示例代码
mui提供了数字输入框控件,可直接输入数字,也可以点击“+”、“-”按钮变换当前数值;默认numbox控件dom结构比较简单,如下:
可通过data-numbox*
自定义属性设置数字输入框的参数,如下:
Data API
属性名 | 作用 |
---|---|
data-numbox-min | 输入框允许使用的最小值,默认无限制 |
data-numbox-max | 输入框允许使用的最大值,默认无限制 |
data-numbox-step | 每次点击“+”、“-”按钮变化的步长,默认步长为1 |
示例:设置取值范围为0~100,每次变化步长为10,则代码如下
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模式也有其缺点:
div模式
主页面和菜单内容在同一个webview下,嵌套在特定结构的div中,通过div的移动动画模拟菜单移动;故该模式有如下优点:
另一方面,div模式也有其缺点:
div模式支持不同的动画效果,每种动画效果需遵从不同的DOM构造;下面我们以右滑菜单为例(左滑菜单仅需将菜单父节点上的mui-off-canvas-left
换成mui-off-canvas-right
即可),说明每种动画对应的DOM结构。
动画1:主界面移动、菜单不动
动画2:缩放式侧滑(类手机QQ)
该种动画要求的DOM结构和动画1的DOM结构基本相同,唯一差别就是需在侧滑导航根容器class上增加一个mui-scalable
类
动画3:主界面不动、菜单移动
该种动画要求的DOM结构和动画1的DOM结构基本相同,唯一差别就是需在侧滑导航根容器class上增加一个mui-slide-in
类
动画4:主界面、菜单同时移动
该种动画要求的DOM结构较特殊,需将菜单容器放在主页面容器之下
mui支持多种方式操作div模式的侧滑菜单:
mui-action-menu
类的控件;如下:
可以有两种调用方式
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中,如下即为一个弹出菜单内容:
要显示、隐藏如上菜单,mui推荐使用锚点方式,例如:
打开弹出菜单
点击如上定义的按钮,即可显示弹出菜单,再次点击弹出菜单之外的其他区域,均可关闭弹出菜单;这种使用方式最为简洁。
若希望通过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"));
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);
})