详细操作见代码：

<!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>

            <h1 class="mui-title">Popover</h1>

            <!--添加一个人头字体图标-->

            <a href="#userInf" class="mui-icon mui-icon-person mui-pull-right"></a>

        </header>

        <div class="mui-content">

            <!--

                第一张方式：锚链接方式

                弹出层设置：mui-popover

                id:将弹出层id绑定到点击出现弹出层的a标签的href理

            -->

           <div class="mui-popover" id="userInf">

               <ul class="mui-table-view">

                    <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">个人中心</a></li>

                    <li class="mui-table-view-cell">消息<span class="mui-badge mui-badge-primary"></span></li>

                    <li class="mui-table-view-cell">修改密码<span class="mui-switch mui-switch-handle"></span></li>

                    <li class="mui-table-view-cell mui-collapse">

                    <a href="" class="mui-navigate-right">隐藏层</a>

                    <p class="mui-collapse-content mui-ellipsis">得不到到的永远在骚动，得到的有恃无恐，玫瑰的红</p>

                    </li>

                </ul>

           </div>

            <!--

                第二种方式：JS控制

            -->

            <button type="button" id="btn1" class="mui-btn mui-btn-blue">点击显示弹框</button>

            <button type="button" id="btn2" class="mui-btn mui-btn-blue">点击上一个按钮显示</button>

            <!--

                第二种弹出层方式：

            -->

            <br />

            <div class="mui-card mui-text-center">

                <a href="#photo-sheet">打开早相机</a>

                <button class="mui-btn mui-btn-primary" id="btn-show">显示操作表</button>

            </div>

            <!--

                mui-popover-action：表示点击时显示

            -->

            <div class="mui-popover mui-popover-bottom mui-popover-action" id="photo-sheet">

                <ul class="mui-table-view">

                    <li class="mui-table-view-cell">浏览器相册</li>

                    <li class="mui-table-view-cell"><span class="mui-icon mui-icon-camera"></span>打开相机</li>

                </ul>

                <ul class="mui-table-view" >

                    <li class="mui-table-view-cell"  id="btn-hide-photo-sheet">取消</li>

                </ul>

            </div>

        </div>

        <script src="js/mui.min.js"></script>

        <script type="text/javascript">

            mui.init();

            document.getElementById("btn1").addEventListener('tap',function(){

                //获取第二个按钮，使得点击按钮一，弹框显示在第二个按钮上

                var btn2=document.getElementById("btn2")

                //获取弹出层并显示在btn2上

                mui('#userInf').popover('show',btn2)

            });

            //第二种弹出层方式：

            //点击选中标签，弹出消息框

            document.getElementById("btn-show").addEventListener('tap',function(){

                mui('#photo-sheet').popover('show');

            });

            //点击取消弹出消息框

            document.getElementById("btn-hide-photo-sheet").addEventListener('tap',function(){

                mui('#photo-sheet').popover('hide');

            });

        </script>

    </body>

</html>

效果如下：

mui弹出菜单的更多相关文章

  1. Mui --- 弹出菜单

    mui框架内置了弹出菜单插件,弹出菜单显示内容不限,但必须包裹在一个含.mui-popover类的div中,如下即为一个弹出菜单内容: <div id="popover" c ...

  2. 解决Mui中popover 顶部弹出菜单弹出位置不准确以及无法收回的问题

    前言 最近公司的项目转向使用Hbuilder开发移动端项目,其中想要通过在顶部标题栏加入弹出菜单的方式,来定位长列表的位置,如图所示. 问题 Mui的功能貌似还不是很完善,在使用这个弹出菜单的时候,发 ...

  3. mui-popover显示、隐藏弹出菜单的方法

    一.mui-popover要显示.隐藏弹出菜单,可使用锚点方式. <div id="popover" class="box mui-popover mui-popp ...

  4. 向上弹出菜单jQuery插件

    插件名:柯乐义英文名:Keleyijs文件名称:jquery.keleyi.js插件功能:该插件可以让你轻易地在页面上构建一个向上弹出的二级菜单. 示例查看:http://keleyi.com/kel ...

  5. html5手机端遮罩弹出菜单代码

    效果体验:http://hovertree.com/texiao/html5/17/ 效果图: 代码如下: <!doctype html> <html lang="zh&q ...

  6. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  7. vc++ 如何添加右键弹出菜单

    一.创建新工程 二.编辑菜单资源 1.添加菜单 按"Ctrl+R",双击"Menu"图标 2.于菜单编辑器内编辑菜单 四.添加代码(红色部分) void CCM ...

  8. 创建 iPhone/iOS8 弹出菜单（窗口）

    基本步骤 添加视图:主视图与弹出视图 关联视图 配置弹出视图 编码实现:弹出菜单样式及控制器委托 override func prepareForSegue(segue: UIStoryboardSe ...

  9. android 单选、多选弹出菜单

    菜单单选窗口: import android.app.Activity;import android.app.AlertDialog;import android.content.DialogInte ...

随机推荐

  1. JavaScript的函数闭包详细解释

    闭包是指有权访问另一个函数作用域中的变量的函数 一.创建闭包的常见的方式: 就是在一个函数内部创建另一个函数,通过另一个函数访问这个函数的局部变量. //通过闭包可以返回局部变量 function b ...

  2. HDU-problem-1002-人类史上最大最好的希望事件-矩阵快速幂

    Problem Description 作为CNCS的半壁江山,狗哥常常在宇宙中心邵阳眺望黄浦江,夜晚的星空总是迷人,有时候还能见到彗星滑落. 狗哥是幸运的,他在两秒钟内看到了十七颗彗星划过天际,作为 ...

  3. 多项目管理中PMO的作用

    随着现代企业规模的不断扩大,多项目同时运行成为了现代企业的常态,以及企业项目化进程的不断深入,大部分企业不再仅仅只运行一个项目,而且数量之大已经超出了人们的想象,如惠普公司每年有3000个左右的项目, ...

  4. linux下开启、关闭、重启mysql服务命令

    一. 启动1.使用 service 启动:service mysql start2.使用 mysqld 脚本启动:/etc/inint.d/mysql start3.使用 safe_mysqld 启动 ...

  5. 爬虫之BS&Xpath

    BeautifulSoup 一 简介 简单来说,Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据.官方解释如下: ''' Beautiful Soup提供一些简单的.p ...

  6. 国内可访问的稳定docker镜像

    可参考:https://yeasy.gitbooks.io/docker_practice/content/install/mirror.html 但在debian 9上进行相应配置后,在pull镜像 ...

  7. axios拦截器

    import axios from "axios"; axios.interceptors.response.use(response => { //=>设置响应拦截器 ...

  8. php函数 array_column

    <?php $arr = [ [ 'id'=>1, 'name'=>'wang', 'age'=>10 ], [ 'id'=>2, 'name'=>'yong', ...

  9. Superset安装与使用

    参考: https://www.jianshu.com/p/b02fcea7eb5b

  10. STS启动springboot项目，加载不了resources下的配置文件的问题

    从这篇博客的评论中找到了解决方案 答案: eclipse的设置中,它默认是不包括resources下的文件的,把它改了就行了 原本用idea没这些事的,不过idea旗舰版到期了,社区版的话,对前端又没 ...