MUI-ActionSheet动作菜单-蒲公英云

MUI-ActionSheet动作菜单

大家都知道在APP上，用一个非常好用的菜单模式。就是ActionSheet.具体体现就是默认折叠在界面之外。当触发某个动作时可以将隐藏的菜单显示出来。
废话不多说。我们来看看在MUI框架中是如何实现这个强大的功能的。

<!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>ActionSheet简单的Demo</title>
        <script src="../hello-mui/js/mui.min.js"></script>
        <link href="../hello-mui/css/mui.min.css" rel="stylesheet" />
        <script type="text/javascript" charset="utf-8"> mui.init(); </script>
    </head>
    <body>
        <!-- 作者：1546109472@qq.com Bruce 时间：2015-08-06 描述：这里我们创建一个简单的demo，看看actionsheet的具体实现。 -->
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">这是一个简单的ActionSheet</h1>
        </header>
        <div class="mui-content" style="margin:10px;">
            <a href="#picture" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开actionsheet</a>
            <div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <a href="#">拍照或录像</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="#">选取现有的</a>
                    </li>
                </ul>
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <a href="#picture"><b>取消</b></a>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>