一、dialog
创建并显示对话框,弹出的对话框为非阻塞模式
,用户点击对话框上的按钮后关闭( h5模式的对话框也可通过closepopup关闭 ),并通过callback函数返回用户点击按钮的索引值或输入框中的值。
代码如下:
<div class="mui-content mui-scroll-wrapper" id="dialogDemo"> <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="alertBtn">警告框</button> <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="confirmBtn">确认框</button> <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="promptBtn">输入框</button> <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="toastBtn">自动消失提示框</button> </div> <script type="text/javascript"> (function() { var ele = ['alertBtn']; var btn = ['是', '否']; mui('#dialogDemo').on('click', 'button', function(e) { var target = e.target.id; switch (target) { case 'alertBtn': mui.alert('欢迎使用MUI'); break; case 'confirmBtn': mui.confirm('MUI是个好框架', 'Hello MUI', btn, function(e) { e.index == 0 ? mui.toast('感谢您的支持!') : mui.toast('MUI 没有得到你的认可,继续加油!') }) break; case 'promptBtn': mui.prompt('请输入您对MUI的评语', '性能好', 'Hello MUI', '', function(e) { e.index == 1 && e.value != '' && mui.toast('谢谢您的评价: ' + e.value) }) break; case 'toastBtn': mui.toast('欢迎体验Hello MUI') break; default: break; } }) })() </script>
二、gallery
图片轮播继承自slide插件,因此其DOM结构、事件均和slide插件相同
注意:mui框架会默认初始化当前页面的图片轮播组件;若轮播组件内容为js动态生成时(比如通过ajax动态获取的营销信息),则需要在动态生成完整DOM (包含mui-slider下所有DOM结构) 后,手动调用图片轮播的初始化方法,代码如下:
<div class="mui-slider"> <div class="mui-slider-group mui-slider-loop"> <div class="mui-slider-item mui-slider-item-duplicate"><img src="images/3.jpg" /></div> <!--第一个内容区容器--> <div class="mui-slider-item"> <!-- 具体内容 --> <img src="images/1.jpg"/> </div> <!--第二个内容区--> <div class="mui-slider-item"> <!-- 具体内容 --> <img src="images/2.jpg" /> </div> <!--第三个内容区--> <div class="mui-slider-item"> <!-- 具体内容 --> <img src="images/3.jpg" /> </div> <div class="mui-slider-item mui-slider-item-duplicate"><img src="images/1.jpg"/></div> </div> </div> <script type="text/javascript"> (function() { //获得slider插件对象 var gallery = mui('.mui-slider'); gallery.slider({ interval: 3000 //自动轮播周期,若为0则不自动播放,默认为0; }); })() </script>
三、grid
MUI 提供了非常简单实用的12列响应式栅格系统。使用时只需在外围容器上添加.mui-row,在列上添加 .mui-col-[sm|xs]-[1-12],即可
代码如下:
<div class="mui-row"> <div class="mui-col-sm-6 mui-col-xs-12"> <div class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 1 </a> </div> </div> <div class="mui-col-sm-6 mui-col-xs-12"> <div class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 1 </a> </div> </div> </div>