<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a>
<h1 class="mui-title">右上角弹出菜单</h1>
</header>
<footer class="mui-bar mui-bar-footer">
<a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">右下角弹出菜单</a>
</footer>
<!--右上角弹出菜单-->
<div id="topPopover" class="mui-popover">
<div class="mui-popover-arrow"></div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<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>
</div>
</div>
<!--右下角弹出菜单-->
<div id="bottomPopover" class="mui-popover mui-popover-bottom">
<div class="mui-popover-arrow"></div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<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>
<li class="mui-table-view-cell">
<a href="#">Item6</a>
</li>
</ul>
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
//提交按钮监听事件
});
</script>
</body> </html>
