UI组件
accordion(折叠面板)
<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类即可。
actionsheet(操作表)
badge(数字角标)
- 数字角标一般和其他控件（列表，9宫格，选项卡等）配合使用，用于进行数量的提示。
- 角标的核心类是
.mui-badge，默认为实心灰色背景； - mui还内置了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标、
- mui-badge 实心灰色
- mui-badge-primary 蓝色
- mui-badge-success 绿色
- mui-badge-warning 黄色
- mui-badge-danger 红色
- mui-badge-purple 紫色
- 若无需底色，则增加.mui-badge-inverted类即可
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> -
运行效果如下：
加载按钮
属性名 作用
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
cardview(卡片视图)
-
卡片视图常用于展现一段完整独立的信息，比如一篇文章的预览图、作者信息、点赞数量等
-
使用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在右侧显示，若希望在左侧显示，只需增加.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(对话框)
组件名 作用
alert 警告框
confirm 确认框
prompt 输入对话框
toast 消息提示框
- mui v3.0 版本(含)以上的dialog控件支持换行（\n）显示
alert
.alert( message, title, btnValue, callback [, type] )
message
Type: String
提示对话框上显示的内容
title
Type: String
提示对话框上显示的标题
btnValue
Type: String
提示对话框上按钮显示的内容
callback
Type: Function
提示对话框上关闭后的回调函数
type
Value: 'div'
是否使用h5绘制的对话框
confirm
.confirm( message, title, btnValue, callback [, type] )
message
Type: String
提示对话框上显示的内容
title
Type: String
提示对话框上显示的标题
btnValue
Type: Array
提示对话框上按钮显示的内容
callback
Type: Function
提示对话框上关闭后的回调函数
type
Value: 'div'
是否使用h5绘制的对话框
prompt
.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类下的样式
toast
.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
.closePopup()(只能关闭h5模式的对话框)
关闭最后一次弹出的对话框
closePopups
.closePopups()(只能关闭h5模式的对话框)
关闭所有对话框
gallery(图片轮播)
-
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>
*若要支持循环，则需要在.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； });
