饱宛珊畦亩雇佰酷啃括搪洛娃
参考文档：
1、操作表
actionsheet一般从底部弹出，显示一系列可供用户选择的操作按钮； actionsheet是从popover控件基础上演变而来，实际上就是一个固定从底部弹出的popover，故DOM结构和popove类似，只是需要在含.mui-popover类的节点上增加.mui-popover-bottom、.mui-popover-action类；
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
<!-- 可选择菜单 -->
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">菜单1</a>
</li>
<li class="mui-table-view-cell">
<a href="#">菜单2</a>
</li>
</ul>
<!-- 取消菜单 -->
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#sheet1"><b>取消</b></a>
</li>
</ul>
</div>
推荐使用锚点方式显示、隐藏actionsheet；若要使用js代码动态显示、隐藏actionsheet，同样在popover插件的构造方法中传入”toggle”参数即可，如下：
//传入toggle参数，用户无需关心当前是显示还是隐藏状态，mui会自动识别处理；
mui('#sheet1').popover('toggle');
完整代码
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">hello</h1>
</header>
<div class="mui-content">
<div style="padding:20px;">
<input type="button" class="mui-btn-blue" value="点击这里弹出操作菜单" onclick="showPop();" />
</div>
</div>
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
<!-- 可选择菜单 -->
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">菜单1</a>
</li>
<li class="mui-table-view-cell">
<a href="#">菜单2</a>
</li>
</ul>
<!-- 取消菜单 -->
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#sheet1"><b>取消</b></a>
</li>
</ul>
</div>
<script type="text/javascript">
function showPop(){
mui('#sheet1').popover('toggle');
}
</script>
2、数字角标
数 字角标一般和其它控件（列表、9宫格、选项卡等）配合使用，用于进行数量提示。 角标的核心类是.mui-badge，默认为实心灰色背景；同时，mui还内置了蓝色（blue）、绿色(green)、黄色(yellow)、红色 (red)、紫色(purple)五种色系的数字角标，如下：
<span class="mui-badge mui-badge-inverted">1</span> <span class="mui-badge mui-badge-primary mui-badge-inverted">2</span> <span class="mui-badge mui-badge-success mui-badge-inverted">3</span> <span class="mui-badge mui-badge-warning mui-badge-inverted">4</span> <span class="mui-badge mui-badge-danger mui-badge-inverted">5</span> <span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>
若无需底色，则增加.mui-badge-inverted类即可，如下：
<span class="mui-badge mui-badge-inverted">1</span> <span class="mui-badge mui-badge-primary mui-badge-inverted">2</span> <span class="mui-badge mui-badge-success mui-badge-inverted">3</span> <span class="mui-badge mui-badge-warning mui-badge-inverted">4</span> <span class="mui-badge mui-badge-danger mui-badge-inverted">5</span> <span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>
实际操作
1.操作表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<!--头部-->
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">操作表</h1>
</header>
<!--头部结束-->
<!--主体-->
<div class="mui-content">
<!--目标：点击按钮从下方弹出操作表-->
<button type="button" class="mui-btn mui-btn-royal" onclick="showMenu();">点击这里</button>
</div>
<!--操作表是遮罩层可以写在上面的div里面也可以写在外面-->
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
<!-- 可选择菜单 -->
<!--具体的操作：如拍照，录像功能 可以在a链接里面添加点击事件，通过具体的函数来实现-->
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">菜单1</a>
</li>
<li class="mui-table-view-cell">
<a href="#">菜单2</a>
</li>
</ul>
<!-- 取消菜单 -->
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#sheet1"><b>取消</b></a>
</li>
</ul>
</div>
<script type="text/javascript">
function showMenu()
{
//mui('#sheet1'):选中id=sheet1的div,类似jquery，div使用class属性也可以
//popover('toggle'):传入toggle参数，用户无需关心当前是显示还是隐藏状态，mui会自动识别处理；
mui('#sheet1').popover('toggle');
}
</script>
</body>
</html>
执行，点击按钮即弹出操作表
2.数字角标
<body> <!--头部--> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">操作表</h1> </header> <!--头部结束--> <!--主体--> <div class="mui-content"> 购买人数：<span class="mui-badge mui-badge-inverted">5</span>人<br> 购买人数：<span class="mui-badge mui-badge-primary mui-badge-inverted">5</span>人<br> 购买人数：<span class="mui-badge mui-badge-success mui-badge-inverted">5</span>人<br> 购买人数：<span class="mui-badge mui-badge-warning mui-badge-inverted">5</span>人<br> 购买人数：<span class="mui-badge mui-badge-danger mui-badge-inverted">5</span>人<br> 购买人数：<span class="mui-badge mui-badge-royal mui-badge-inverted">5</span>人<br> </div> </body>
执行：
若无需底色，则增加.mui-badge-inverted类即可，如下：
<body> <!--头部--> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">操作表</h1> </header> <!--头部结束--> <!--主体--> <div class="mui-content"> <span class="mui-badge mui-badge-inverted">1</span> <span class="mui-badge mui-badge-primary mui-badge-inverted">2</span> <span class="mui-badge mui-badge-success mui-badge-inverted">3</span> <span class="mui-badge mui-badge-warning mui-badge-inverted">4</span> <span class="mui-badge mui-badge-danger mui-badge-inverted">5</span> <span class="mui-badge mui-badge-royal mui-badge-inverted">6</span> </div> </body>
执行：
数字角标在电脑上面和手机上面看是有区别的，手机上面更加好看，为圆型图案包裹着
拴褂式洪孤谜归羡膝毁修财溯