详细操作见代码：

<!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. koa 中间件

    什么是 Koa 的中间件 通俗的讲:中间件就是匹配路由之前或者匹配路由完成做的一系列的操作,我们就可以 把它叫做中间件. 在express中间件(Middleware)是一个函数,它可以访问请求对象( ...

  2. MicroPython实例之TPYBoard开发板控制OLED显示中文

    0x00 前言 之前看到一篇文章是关于TPYBoard v102控制OLED屏显示的,看到之后就想尝试一下使用OLED屏来显示中文.最近利用空余时间搞定了这个实验,特此将实验过程及源码分享出来,方便以 ...

  3. Docker Selenium

    SeleniumHQ官方项目:https://github.com/seleniumHQ/docker-selenium 项目目前快速迭代中. Docker 一般叫docker容器,一个可爱的鲸鱼,上 ...

  4. Kafka 详解（三）------Producer生产者

    在第一篇博客我们了解到一个kafka系统,通常是生产者Producer 将消息发送到 Broker,然后消费者 Consumer 去 Broker 获取,那么本篇博客我们来介绍什么是生产者Produc ...

  5. 固件远程更新之STARTUPE2原语（fpga控制flash）

    作者:九章子 来源:CSDN 原文:https://blog.csdn.net/jiuzhangzi/article/details/79471365 有的项目需要远程更新固件,更新完成后断电.重启即 ...

  6. vue的一些基本知识

    配置webpack及vue脚手架工具: vue-cli 2  npm install webpack webpack-cli -g  npm install vue-cli -g  搭建脚手架 vue ...

  7. pyspider爬虫框架webui简介-爬取阿里招聘信息

    命令行输入pyspider开启pyspider 浏览器打开http://localhost:5000/ group表示组名,几个项目可以同一个组名,方便管理,当组名修改为delete时,项目会在一天后 ...

  8. Flutter之Simulation

    Simulation 可以理解成动画进行的函数. Flutter中自带了有下面几种. BouncingScrollSimulationBounce弹性的滚动模拟 ClampedSimulation C ...

  9. Linux(Ubuntu)使用日记------ssh远程登录腾讯云

    不知道是我自己电脑的问题还是其他的问题.总之在我的折腾之下算是用ssh连接上了我的腾讯云. 具体步骤: 1.生成密钥 ssh-keygen -t rsa 执行命令会出现这样,执行后让你输入东西的全部回 ...

  10. RCTF 2017 easyre-153

    die查一下发现是upx壳 直接脱掉 ELF文件 跑一下: 没看懂是什么意思 随便输一个数就结束了 ida打开 看一下: pipe是完成两个进程之间通信的函数 1是写,0是读 fork是通过系统调用创 ...