004_跨平台开发_MUI_操作表（actionsheet）

来源：互联网发布：php 读取cer证书公钥编辑：程序博客网时间：2024/05/22 15:23

效果

微信公众号：JavaWeb架构师

介绍

actionsheet一般从底部弹出，显示一系列可供用户选择的操作按钮； actionsheet是从popover控件基础上演变而来，实际上就是一个固定从底部弹出的popover，故DOM结构和popove类似，只是需要在含.mui-popover类的节点上增加.mui-popover-bottom、.mui-popover-action类；
popover(method: String)参数：
‘show’
显示popover
‘hide’
隐藏popover
‘toggle’
自动识别处理显示隐藏状态
推荐使用锚点方式显示、隐藏actionsheet；若要使用js代码动态显示、隐藏actionsheet，同样在popover插件的构造方法中传入”toggle”参数即可，如下：

//传入toggle参数，用户无需关心当前是显示还是隐藏状态，mui会自动识别处理；mui('#sheet1').popover('toggle');

测试代码

<!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" />        <!--            使用操作表的步骤：                1.新建操作表                2.在特定的地方显示或者隐藏操作表        -->        <script type="text/javascript" charset="utf-8">            mui.init();            // 2.在特定的地方显示或者隐藏操作表            function showHint() {                // 调用popover就可以弹出或者隐藏操作表                /*                 * 支持参数：                 * 'show','hide'，显示或隐藏当前popover                 * 'toggle',mui自动处理                 */                mui("#hint").popover("toggle")            }        </script>        <style type="text/css">            .myBtnRed {                text-align: center;                border-radius: 10px;                color: black;                left: 50%;                margin-top: 50%;                margin-left: -50px;                width: 100px;            }        </style>    </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">操作表（actionsheet）</h1>        </header>        <!-- 内容 -->        <div class="mui-content">            <!-- 按钮 -->            <button id="showPopover" type="button" class="mui-btn myBtnRed"                onclick="showHint();">点击这里</button>        </div>        <!-- 1.新建操作表 -->        <!-- 这是可以弹出隐藏的，所以直接写在内容的后面就行了 -->        <div id="hint" class="mui-popover mui-popover-bottom mui-popover-action">            <!-- 选择菜单 -->            <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>                <li class="mui-table-view-cell">                    <a href="#">打开PPT</a>                </li>                <li class="mui-table-view-cell">                    <a href="#">打开手机</a>                </li>                           </ul>            <!-- 取消菜单 -->            <ul class="mui-table-view">                <li class="mui-table-view-cell">                    <!-- 连接写的是这个操作表div的id，锚点的形式去隐藏操作表 -->                    <a href="#hint">取消</a>                </li>            </ul>        </div>    </body></html>

源码下载

关注下方的微信公众号，回复：004_操作表（actionsheet）.code

欢迎加入交流群：451826376

更多信息：www.itcourse.top

完整教程PDF版本下载

阅读全文

0 0