详细操作见代码：

<!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. ZooKeeper学习总结 第一篇：ZooKeeper快速入门

    1. 概述 Zookeeper是Hadoop的一个子项目,它是分布式系统中的协调系统,可提供的服务主要有:配置服务.名字服务.分布式同步.组服务等. 它有如下的一些特点: 简单 Zookeeper的核 ...

  2. laravel学习笔记一

    指定端口 数据迁移 php artisan migrate:install 任何路由 match get,post只选择其一 没有表名对应默认的posts表,如果表为post就不行 时区不对时 分页 ...

  3. SQL CHECK 约束

    SQL CHECK 约束 CHECK 约束用于限制列中的值的范围. 如果对单个列定义 CHECK 约束,那么该列只允许特定的值. 如果对一个表定义 CHECK 约束,那么此约束会在特定的列中对值进行限 ...

  4. yidiandian

    hzwer libreoj (需要拿新版的打开)

  5. CF1120D Power Tree

    沙发~~ 题意简述 给你一棵有根树,定义叶子为度数为1的点. 你可以以$ w_x \(的代价控制\)x\(点.选择控制之后可以给它的子树里的叶子加 上\)t (t \in Z )$. 你要以最小的总代 ...

  6. Asp.Net Core SignalR 与微信小程序交互笔记

    什么是Asp.Net Core SignalR Asp.Net Core SignalR 是微软开发的一套基于Asp.Net Core的与Web进行实时交互的类库,它使我们的应用能够实时的把数据推送给 ...

  7. Docker Toolbox替换默认docker machine的存储位置

    使用Docker Toolbox是因为它不用打开windows的hyper-v组件,这样可以和VMware workstation一起使用. 关于如何迁移可参考:https://www.cnblogs ...

  8. Ajax提交表单初接触

    <!doctype html> <html class="no-js"> <head> <meta charset="utf-8 ...

  9. Python——日志模块（logging）

    一.日志说明 日志是跟踪软件运行时所发生的事件的一种方法.软件开发者在代码中调用日志函数,表明发生了特定的事件.事件由描述性消息描述,该描述性消息可以可选地包含可变数据(即,对于事件的每次出现都潜在地 ...

  10. Promise学习笔记

    Promise对象 Promise 表示一个异步操作的最终结果,与之进行交互的方式主要是 then 方法,该方法注册了两个回调函数,用于接收 promise 的终值或本 promise 不能执行的原因 ...