可以在折叠面板中放置任何内容；折叠面板默认收缩，若希望某个面板默认展开，只需要在包含.mui-collapse类的li节点上，增加.mui-active类即可；mui官网中的方法说明，使用的就是折叠面板控件。
扩展阅读
代码块激活字符:maccordion
可以在折叠面板中放置任何内容；折叠面板默认收缩，若希望某个面板默认展开，只需要在包含.mui-collapse类的li节点上，增加.mui-active类即可；mui官网中的方法说明，使用的就是折叠面板控件。
actionsheet一般从底部弹出，显示一系列可供用户选择的操作按钮； actionsheet是从popover控件基础上演变而来，实际上就是一个固定从底部弹出的popover，故DOM结构和popove类似，只是需要在含.mui-popover类的节点上增加.mui-popover-bottom、.mui-popover-action类；
<> id='sheet1' class='mui-popover mui-popover-bottom mui-popover-action '> <> class='mui-table-view'> <> class='mui-table-view-cell'> <> href='#'>菜单1 <> class='mui-table-view-cell'> <> href='#'>菜单2 <> class='mui-table-view'> <> class='mui-table-view-cell'> <> href='#sheet1'>取消 和popover一样，推荐使用锚点方式显示、隐藏actionsheet；若要使用js代码动态显示、隐藏actionsheet，同样在popover插件的构造方法中传入'toggle'参数即可，如下：
//传入toggle参数，用户无需关心当前是显示还是隐藏状态，mui会自动识别处理；mui('#sheet1').popover('toggle');卡片视图常用于展现一段完整独立的信息，比如一篇文章的预览图、作者信息、点赞数量等，如下是一个卡片demo示例；
使用mui-card类即可生成一个卡片容器，卡片视图主要有页眉、内容区、页脚三部分组成，结构如下：
<> class='mui-card'> <> class='mui-card-header'>页眉卡片页眉及内容区，均支持放置图片； 页眉放置图片的话，需要在.mui-card-header节点上增加.mui-card-media类，然后设置一张图片做背景图即可，代码如下：
<> class='mui-card-header mui-card-media' style='height:40vw;background-image:url(../images/cbd.jpg)'>若希望在页眉放置更丰富的信息，比如头像、主标题、副标题，则需使用.mui-media-body类，示例代码如下：
<> class='mui-card-header mui-card-media'> <> src='../images/logo.png' /> <> class='mui-media-body'> 小M 发表于 2016-06-30 15:30
checkbox常用于多选的情况，比如批量删除、添加群聊等；
<> class='mui-input-row mui-checkbox'> checkbox示例 <> name='checkbox1' value='Item 1' type='checkbox' checked>默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：
<> class='mui-input-row mui-checkbox mui-left'> checkbox左侧显示示例 <> name='checkbox1' value='Item 1' type='checkbox'>若要禁用checkbox，只需在checkbox上增加disabled属性即可；
创建并显示对话框，弹出的对话框为非阻塞模式，用户点击对话框上的按钮后关闭( h5模式的对话框也可通过 closepopup关闭 )，并通过callback函数返回用户点击按钮的索引值或输入框中的值。
Dialog 组件包含:
| 组件名 | 作用 | 快速体验 |
|---|---|---|
| alert | 警告框 | |
| confirm | 确认框 | |
| prompt | 输入对话框 | |
| toast | 消息提示框 |
mui会根据ua判断,弹出原生对话框还是h5绘制的对话框,在基座中默认会弹出原生对话框,可以配置type属性,使得弹出h5模式对话框
两者区别:1.原生对话框可以跨webview,2.h5对话框样式统一而且可以修改对话框属性或样式
mui v3.0 版本(含)以上的dialog控件支持换行（\n）显示
如果有定制对话框样式的需求( 只能修改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' 'String' - 消息框显示的文字内容 {JSON} - 提示消息的参数| 参数 | 说明 | 说明 |
|---|---|---|
| duration | 持续显示时间,默认值 short(2000ms) | 支持 整数值 和 String , String可选: long(3500ms),short(2000ms) |
| type | 强制使用mui消息框(div模式) | 'div' |
mui.toast('登陆成功',{ duration:'long', type:'div' }) 问答社区话题讨论：利用mui toast制作下拉刷新获取新内容的提示
代码块激活字符:图片轮播继承自slide插件，因此其DOM结构、事件均和slide插件相同；
<> class='mui-slider'> <> class='mui-slider-group'> <> class='mui-slider-item'><> href='#'><> src='1.jpg' />假设当前图片轮播中有1、2、3、4四张图片，从第1张图片起，依次向左滑动切换图片，当切换到第4张图片时，继续向左滑动，接下来会有两种效果：
.mui-slider-loop类及DOM节点来控制；若要支持循环，则需要在.mui-slider-group节点上增加.mui-slider-loop类，同时需要重复增加2张图片，图片顺序变为：4、1、2、3、4、1，代码示例如下：
<> class='mui-slider'> <> class='mui-slider-group mui-slider-loop'> <> class='mui-slider-item mui-slider-item-duplicate'><> href='#'><> src='4.jpg' />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)设备上会覆盖之前定义的类展现为水平排列
<> class='mui-content'> <> class='mui-row'> <> class='mui-col-sm-6 mui-col-xs-12'> <> class='mui-table-view-cell'> <> class='mui-navigate-right'> Item 1 左侧:如果在一个.mui-row内包含的列（column）大于12个,包含多余列（column）的元素将作为一个整体单元被另起一行排列。
右侧:如果不足12个列将不会撑满整个.mui-row容器
<> class='mui-content'> <> class='mui-row'> <> class='mui-col-sm-8'> <> class='mui-table-view-cell'> <> class='mui-navigate-right'> Item 1 列设置padding 属性，从而创建列与列之间的间隔两列之间白色区域为左侧列的padding
<> class='mui-content'> <> class='mui-row'> <> class='mui-col-sm-6' style='padding-right: 20px;'> <> class='mui-table-view-cell'> <> class='mui-navigate-right'> Item 1 mui默认提供了手机App开发常用的字体图标，如下：(点击icon即可复制样式)
使用时，只需要在span节点上分别增加.mui-icon、.mui-icon-name两个类即可（name为图标名称，例如：weixin、weibo等），如下代码即可显示一个微信图标：
<> class='mui-icon mui-icon-weixin'>所有包裹在.mui-input-row 类中的 input、textarea等元素都将被默认设置宽度属性为width: 100%; 。 将 label 元素和上述控件控件包裹在.mui-input-group中可以获得最好的排列。
<> class='mui-input-group'> <> class='mui-input-row'> 用户名 <> type='text' class='mui-input-clear' placeholder='请输入用户名'> mui目前提供的输入增强包括：快速删除、语音输入*5+ only和密码框显示隐藏密码。
.mui-input-clear类，当input 控件中有内容时，右侧会有一个删除图标，点击会清空当前input的内容； <> class='mui-input-group'> <> class='mui-input-row'> 快速删除 <> type='text' class='mui-input-clear' placeholder='请输入内容'> .mui-input-row同级添加.mui-input-search 类，就可以使用search控件 <> class='mui-input-row mui-search'> <> type='search' class='mui-input-clear' placeholder=''>.mui-input-speech 类，就可以在5+环境下使用语音输入 .mui-input-password类即可使用 <> class='mui-input-group'> <> class='mui-input-row'> 密码框 <> type='password' class='mui-input-password' placeholder='请输入密码'> mui在mui.init()中会自动初始化基本控件,但是 动态添加的Input组件需要重新进行初始化
打开chrome控制台运行下面这段代码,赋予☝️此密码框生命力😀
mui('.mui-input-row input').input(); 验证表单是否为空
<> class='mui-input-group'> <> class='mui-input-row'> 用户名： <> type='text' class='mui-input-clear' placeholder='请输入用户名'> 提交时校验三个字段均不能为空，若为空则提醒并终止业务逻辑运行，使用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类即可，如下为示例代码
<> class='mui-table-view'> <> class='mui-table-view-cell'>Item 1 <> class='mui-table-view-cell'>Item 2 <> class='mui-table-view-cell'>Item 3点击列表，对应列表项显示灰色高亮，若想自定义高亮颜色，只需要重写.mui-table-view-cell.mui-active即可，如下：
/*点击变蓝色高亮*/.mui-table-view-cell.mui-active{ background-color: #0062CC;}若右侧需要增加导航箭头，变成导航链接，则只需在li节点下增加a子节点，并为该a节点增加.mui-navigate-right类即可，如下：
<> class='mui-table-view'> <> class='mui-table-view-cell'> <> class='mui-navigate-right'>Item 1 <> class='mui-table-view-cell'> <> class='mui-navigate-right'>Item 2 <> class='mui-table-view-cell'> <> class='mui-navigate-right'>Item 3 mui支持将数字角标、按钮、开关等控件放在列表中；mui默认将数字角标放在列表右侧显示，代码如下：
<> class='mui-table-view'> <> class='mui-table-view-cell'>Item 1 <> class='mui-badge mui-badge-primary'>11 <> class='mui-table-view-cell'>Item 2 <> class='mui-badge mui-badge-success'>22 <> class='mui-table-view-cell'>Item 3 <> class='mui-badge'>33 图文列表继承自列表组件，主要添加了.mui-media、.mui-media-object、.mui-media-body、.mui-pull-left/right几个类，如下为示例代码
picker.setData([{value:'zz',text:'智子'}]) 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);})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);})picker.pickers[0].setSelectedIndex(4) ms )picker.pickers[0].setSelectedIndex(4,200)picker.pickers[0].setSelectedIndex(4,200,function(){})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);})picker.pickers[0].setSelectedValue('fourth') ms )picker.pickers[0].setSelectedValue('fourth',200)picker.pickers[0].setSelectedValue('fourth', 200, function(){})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);})picker.getSelectedItems()picker.hide()picker.dispose()dtpicker组件适用于弹出日期选择器
快速体验
通过new mui.DtPicker()初始化DtPicker组件
var dtPicker = new mui.DtPicker(options); 显示picker
dtPicker.show( SelectedItemsCallback ) 实例
var dtPicker = new mui.DtPicker(); dtPicker.show(function (selectItems) { console.log(selectItems.y);//{text: '2016',value: 2016} console.log(selectItems.m);//{text: '05',value: '05'} })API详解
| 可选值 | 视图模式 |
|---|---|
| 'datetime' | 完整日期视图(年月日时分) |
| 'date' | 年视图(年月日) |
| 'time' | 时间视图(时分) |
| 'month' | 月视图(年月) |
| 'hour' | 时视图(年月日时) |
mui.dtpicker.css中设置显示视图宽度,隐藏不需要的视图/*月日时*/[data-type='day'] .mui-picker,[data-type='day'] .mui-dtpicker-title h5 { width: 33.3%;}[data-type='day'] [data-id='picker-i'],[data-type='day'] [data-id='title-i'],[data-type='day'] [data-id='picker-y'],[data-type='day'] [data-id='title-y'] { display: none;}mui.dtpicker.js中getSelected()方法下添加selected对象值case 'day': selected.value = selected.m.value + '-' + selected.d.value + ' ' + selected.h.value; selected.text = selected.m.text + '-' + selected.d.text + ' ' + selected.h.text; break;'customData':{ 'date':[ {value:'',text:''} ] }var dtpicker = new mui.DtPicker({ 'type': 'time', 'customData': { 'h': [ { value: 'am', text: '上午' }, { value: 'pm', text: '下午' }, ] } })dtpicker.show(function(e) { console.log(e); })| 可选值 | 视图模式 |
|---|---|
| 'y' | 可设置 年别名 |
| 'm' | 可设置 月 别名 |
| 'd' | 可设置 日别名 |
| 'h' | 可设置 时别名 |
| 'i' | 可设置 分别名 |
customData值生效的前提需要有指定的日期视图,如设置'y',需要在视图使用'年'视图['年', '月', '日', '时', '分']这五个字段,dtpicker显示的时候只会根据当前视图显示设置项,beginYear:2015, new Date(2016,5)可指定最小月份6月endYear:2017, new Date(2016,10)可指定最大月份11月var dtpicker = new mui.DtPicker({ type: 'datetime',//设置日历初始视图模式 beginDate: new Date(2015, 04, 25),//设置开始日期 endDate: new Date(2016, 04, 25),//设置结束日期 labels: ['Year', 'Mon', 'Day', 'Hour', 'min'],//设置默认标签区域提示语 customData: { h: [ { value: 'AM', text: 'AM' }, { value: 'PM', text: 'PM' } ] }//时间/日期别名 }) dtpicker.show(function(e) { console.log(e);}) var iTems = dtPicker.getSelectedItems() /* * iTems.value 拼合后的 value * iTems.text * 拼合后的 text * iTems.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本 * iTems.m 月，用法同年 * iTems.d 日，用法同年 * iTems.h 时，用法同年 * iTems.i 分（minutes 的第二个字母），用法同年 */ dtpicker.show(function(items) { /* * items.value 拼合后的 value * items.text 拼合后的 text * items.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本 * items.m 月，用法同年 * items.d 日，用法同年 * items.h 时，用法同年 * items.i 分（minutes 的第二个字母），用法同年 */ console.log(items); }) return false; 可以阻止选择框的关闭 *picker组件会触发webview硬件加速,在部分手机上可以能出现卡顿或变形的情况此时需要开启硬件加速,硬件加速请参考 硬件加速章节
有准确值的进度条
进度条控件DOM结构：
<> id='demo1' class='mui-progressbar'> 初始化:
mui(container).progressbar({progress:20}).show();例如:
mui('#demo1').progressbar({progress:20}).show();progressbar初始化逻辑：
检查当前容器(container控件)自身是否包含.mui-progressbar类：
.mui-progressbar类，则以当前容器为目标控件，直接显示进度；.mui-progressbar类，若存在，则以遍历到的第一个含有.mui-progressbar类的孩子节点为目标控件，显示进度；更改显示进度条:
mui(container).progressbar().setProgress(50);关闭进度条:
mui(container).progressbar().hide();备注：关闭进度条一般用于动态创建（DOM中预先未定义）的进度条，调用hide方法后，会直接删掉对应的DOM节点；若已提前创建好DOM节点的进度条，调用hide方法无效；
无限循环进度条:
若无法准确提供当前进度，可以提供无限循环进度条（无限循环进度条类似于waiting等待框,参考[HTML5+规范]
无限循环进度条和准确值的进度条的用法基本相同，有如下差异：
进度条控件DOM结构（多了.mui-progressbar-infinite）：
<> id='demo1' class='mui-progressbar mui-progressbar-infinite'> 初始化
mui('#demo1').progressbar().show();注意：无限循环进度条不显示具体进度，因此初始化时，不能传入progress参数；mui框架也是根据progressbar构造方法中是否包含progress参数来区分当前进度条为有准确值的进度条还是无限循环进度条；
同样因为不显示具体进度的原因，无限循环进度条调用setProgress()方法无效。
关闭进度条
mui('#demo1').progressbar().hide();页面顶部进度条类似浏览器进度条，固定显示在页面顶部（标题导航控件下方）； 因此，若当前页面使用父子双webview模式，子页面没有标题导航组件，则需通过自定义css的方式，重定义顶部进度条的位置，示例代码如下：
body>.mui-progressbar{ top:0}使用页面顶部进度条时，无需编写DOM结构，使用如下代码即可自动创建（顶部无限循环进度条同理）：
mui('body').progressbar({ progress: 20}).show();透明标题栏组件比较简单，只需要在header组件上添加.mui-bar-transparent类即可，如下为示例代码
<> class='mui-bar mui-bar-nav mui-bar-transparent'> <> class='mui-title'>标题如果需要个性化定制可通过data-*属性或者jsAPIDIY
| DOM API | 作用 | JS API |
|---|---|---|
| data-top | 距离顶部高度(滚动到该位置即触发) | {top:0} |
| data-offset | 滚动透明距离 | {offset:150} |
| data-duration | 过渡时间 ms | {duration:16} |
| data-scrollby | 监听区域滚动容器 (*mui 3.5版本+支持) 默认window默认监听原生滚动,如监听mui scroll控件滚动,则: document.querySelector('.mui-scroll-wrapper') | {scrollby:DOM} |
<> class='mui-bar mui-bar-nav mui-bar-transparent' data-top='0' data-offset='150' data-duration='16' data-scrollby='.mui-scroll-wrapper'> <> class='mui-title'>标题mui('.mui-bar-transparent').transparent({ top: 0, offset: 150, duration: 16, scrollby: document.querySelector('.mui-scroll-wrapper')})问答社区参考示例：原生版本透明渐变导航条使用教程
代码块激活字符:radio用于单选的情况
<> class='mui-input-row mui-radio'> radio <> name='radio1' type='radio'>默认radio在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：
<> class='mui-input-row mui-radio mui-left'> radio <> name='radio1' type='radio'>若要禁用radio，只需在radio上增加disabled属性即可；
mui基于列表控件，提供了列表式单选实现；在列表根节点上增加.mui-table-view-radio类即可，若要默认选中某项，只需要在对应li节点上增加.mui-selected类即可，dom结构如下：
<> class='mui-table-view mui-table-view-radio'> <> class='mui-table-view-cell'> <> class='mui-navigate-right'>Item 1 <> class='mui-table-view-cell mui-selected'> <> class='mui-navigate-right'>Item 2 <> class='mui-table-view-cell'> <> class='mui-navigate-right'>Item 3 列表式单选在切换选中项时会触发selected事件，在事件参数（e.detail.el）中可以获得当前选中的dom节点，如下代码打印当前选中项的innerHTML：
var list = document.querySelector('.mui-table-view.mui-table-view-radio');list.addEventListener('selected',function(e){ console.log('当前选中的为：'+e.detail.el.innerText);});滑块常用于区间数字选择
<> class='mui-input-row mui-input-range'> Range <> type='range' min='0' max='100'>在App开发中，div区域滚动的需求是普遍存在的，但系统默认实现又有如下问题：
因此，mui额外提供了区域滚动组件，使用时需要遵循如下DOM结构
<> class='mui-scroll-wrapper'> <> class='mui-scroll'> 区域滚动组件默认为absolute定位，全屏显示；在实际使用过程中，需要手动设置滚动区域的位置（top和height）
若使用区域滚动组件，需手动初始化scroll控件
*常用配置项:
options = { scrollY: true, //是否竖向滚动 scrollX: false, //是否横向滚动 startX: 0, //初始化时滚动至x startY: 0, //初始化时滚动至y indicators: true, //是否显示滚动条 deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏 bounce: true //是否启用回弹}示例：初始化scroll控件：
mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006});mui中iOS平台的下拉刷新（Android平台的下拉刷新使用的是双webview+原生滚动方案）、popover、可拖动式选项卡均使用了scroll组件。 为方便大家使用，mui还额外为scroll插件封装了部分方法。
示例：快速回滚到该区域顶部，代码如下：
mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100毫秒滚动到顶滚动到顶部的代码比较容易实现,坐标值设为0、0即可；但滚动到底部，需要计算该区域的实际高度，因此mui封装了scrollToBottom方法。
横向滚动只需在scroll组件基础上添加mui-slider-indicatorcode mui-segmented-control mui-segmented-control-inverted这三个class即可.(给子元素添加mui-control-item可加大文字间距增强体验
如:)
<> class='mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted'> <> class='mui-scroll'> <> class='mui-control-item mui-active'> 推荐 <> class='mui-control-item'> 热点 <> class='mui-control-item'> 北京 <> class='mui-control-item'> 社会 <> class='mui-control-item'> 娱乐 <> class='mui-control-item'> 科技 轮播组件是mui提供的一个核心组件，在该核心组件基础上，衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件，这些组件有较多共同点。首先，Dom构造基本相同，如下：
<> class='mui-slider'> <> class='mui-slider-group'> <> class='mui-slider-item'> 当拖动切换显示内容时，会触发slide事件，通过该事件的detail.slideNumber参数可以获得当前显示项的索引（第一项索引为0，第二项为1，以此类推），利用该事件，可在显示内容切换时，动态处理一些业务逻辑。
如下为一个可拖动式选项卡示例，为提高页面加载速度，页面加载时，仅显示第一个选项卡的内容，第二、第三选项卡内容为空。
当切换到第二、第三个选项卡时，再动态获取相应内容进行显示：
var item2Show = false,item3Show = false;//子选项卡是否显示标志document.querySelector('.mui-slider').addEventListener('slide', function(event) { if (event.detail.slideNumber === 1&&!item2Show) { //切换到第二个选项卡 //根据具体业务，动态获得第二个选项卡内容； var content = .... //显示内容 document.getElementById('item2').innerHTML = content; //改变标志位，下次直接显示 item2Show = true; } else if (event.detail.slideNumber === 2&&!item3Show) { //切换到第三个选项卡 //根据具体业务，动态获得第三个选项卡内容； var content = .... //显示内容 document.getElementById('item3').innerHTML = content; //改变标志位，下次直接显示 item3Show = true; }});图片轮播、可拖动式图文表格等均可按照同样方式监听内容变化，比如我们可以在图片轮播界面显示当前正在看的是第几张图片：
document.querySelector('.mui-slider').addEventListener('slide', function(event) { //注意slideNumber是从0开始的； document.getElementById('info').innerText = '你正在看第'+(event.detail.slideNumber+1)+'张图片';});问答社区话题讨论： 轮播
代码块激活字符:mui提供了开关控件，点击滑动两种手势都可以对开关控件进行操作,UI如下：
默认开关控件,带on/off文字提示，打开时为绿色背景，基本class类为.mui-switch、.mui-switch-handle，DOM结构如下：
<> class='mui-switch'> <> class='mui-switch-handle'>若希望开关默认为打开状态，只需要在.mui-switch节点上增加.mui-active类即可，如下：
<> class='mui-switch mui-active'> <> class='mui-switch-handle'>若希望隐藏on/off文字提示，变成简洁模式，需要在.mui-switch节点上增加.mui-switch-mini类，如下：
<> class='mui-switch mui-switch-mini'> <> class='mui-switch-handle'>mui默认还提供了蓝色开关控件，只需在.mui-switch节点上增加.mui-switch-blue类即可，如下：
<> class='mui-switch mui-switch-blue'> <> class='mui-switch-handle'>蓝色开关上增加.mui-switch-mini即可变成无文字的简洁模式
若要获得当前开关状态，可通过判断当前开关控件是否包含.mui-active类来实现，若包含，则为打开状态，否则即为关闭状态；如下为代码示例：
var isActive = document.getElementById('mySwitch').classList.contains('mui-active');if(isActive){ console.log('打开状态');}else{ console.log('关闭状态'); }若使用js打开、关闭开关控件，可使用switch插件的toggle()方法，如下为示例代码：
mui('#mySwitch').switch().toggle();开关控件在打开/关闭两种状态之间进行切换时，会触发toggle事件,通过事件的detail.isActive属性可以判断当前开关状态。可通过监听toggle事件，可以在开关切换时执行特定业务逻辑。如下为使用示例：
document.getElementById('mySwitch').addEventListener('toggle',function(event){ if(event.detail.isActive){ console.log('你启动了开关'); }else{ console.log('你关闭了开关'); }})mui在mui.init()中会自动初始化基本控件,但是 动态添加的 Switch 组件需要手动初始化
mui('.mui-switch')['switch']()联系客服
