中对话框
语法：mui.confirm
用法
mui.confirm("确认要切换角色？", "提示", btnArray, function(e) {if(e.index == 1) {} else {}});
| 组件名 | 作用 |
|---|---|
| alert | 警告框 |
| confirm | 确认框 |
| prompt | 输入对话框 |
| toast | 消息提示框（自动消失） |
弹出菜单（底部）
<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>
隐藏popover
语法：mui(’.bottomPopover’).popover(status[,anchor]);
用法
mui('.bottomPopover').popover(status[,anchor]);
- status：
- show：显示popover
- hide：隐藏popover
- toggle：自动识别处理显示隐藏状态
- 当传入toggle时 mui会自动识别 要添加第二参数（anchorElement 锚点元素）
mui(’.mui-popover’).popover(‘toggle’,document.getElementById(“openPopover”));
设置按钮的loading状态
用法
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>
图片轮播
<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]，即可
