由二级列表演化而来
不拉不拉
代码块激活字符：maccordion
（2）actionsheet（操作表)从底部弹出，显示选择项的操作按钮
菜单1 菜单2
取消
男 女 保 密 取 消
若要使用js代码动态显示、隐藏actionsheet，同样在popover插件的构造方法中传入"toggle"参数即可，如下： mui('#sheet1').popover('toggle');
代码块激活字符：mactionsheet
（3）badge（数字角标）用于数量提示。比如消息条数。
角标的核心类是.mui-badge，默认为实心灰色背景；同时，mui还内置了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标，如下：
112123345456
若无需底色，则增加.mui-badge-inverted类即可，如下：
123456
代码块激活字符：mbadge
（4）button（按钮）默认蓝色绿色黄色红色紫色
若希望无底色、有边框的按钮，仅需增加.mui-btn-outlined类即可，代码如下：
默认蓝色绿色黄色红色紫色
代码块激活字符：mbutton
（5）cardview（卡片视图）卡片视图常用于展现一段完整独立的信息。
使用mui-card类即可生成一个卡片容器，卡片视图主要有页眉、内容区、页脚三部分组成，结构如下：
页眉内容区页脚
卡片页眉及内容区，均支持放置图片； 页眉放置图片的话，需要在.mui-card-header节点上增加.mui-card-media类，然后设置一张图片做背景图即可，代码如下：
若希望在页眉放置更丰富的信息，比如头像、主标题、副标题，则需使用.mui-media-body类，示例代码如下：
小M 发表于 2016-06-30 15:30
（6）checkbox（复选框）checkbox常用于多选的情况，比如批量删除。
checkbox示例
默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：
checkbox左侧显示示例
代码块激活字符：mckeckbox
（7）dialog（对话框）
代码块激活字符：mdalert mdconfirm mdprompt mdtoast mdclosepopup mdclosepopups
（8）图片轮播
假设当前图片轮播中有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，用户可以设定是否自动轮播及轮播周期，如下为代码示例：
gallery = mui('.mui-slider'); 3 gallery.slider({ });
因此若希望图片轮播不要自动播放，而是用户手动滑动才切换，只需要通过如上方法，将interval参数设为0即可。
代码块激活字符：mslider
（9）grid（栅格）MUI 提供了非常简单实用的12列响应式栅格系统。使用时只需在外围容器上添加.mui-row，在列上添加 .mui-col-[sm|xs]-[1-12]，即可
代码块激活字符：mrow mcolsm mcolxs
（10）icon（图标）mui默认提供了手机App开发常用的字体图标，如下：
使用时，只需要在span节点上分别增加.mui-icon、.mui-icon-name两个类即可（name为图标名称，例如：weixin、weibo等），如下代码即可显示一个微信图标：
代码块激活字符：micon
（11）input（表单）所有包裹在.mui-input-row 类中的 input、textarea等元素都被默认设置宽度属性为width: 100%; 将 label元素和上述控件包裹在.mui-input-group中可以获得最好的排列。
用户名 密码 确认 取消
密码框显示隐藏密码：
给input元素添加.mui-input-password类即可使用。
密码框
示例：验证表单是否为空
用户名： 密码：
提交时校验三个字段均不能为空，若为空则提醒并终止业务逻辑运行，使用each()方法循环校验，如下：
相关文章
精彩导读
热门资讯
关注我们
