详细操作见代码：

<!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. python3 二分法查找

    '''二分法查找有序列表掐头去尾取中间查找列表中xx在不在列表中,在,则返回索引值'''# lst = [1, 4, 6, 8, 9, 21, 23, 26, 35, 48, 49, 54, 67, ...

  2. Linux内存管理 (10)缺页中断处理

    专题:Linux内存管理专题 关键词:数据异常.缺页中断.匿名页面.文件映射页面.写时复制页面.swap页面. malloc()和mmap()等内存分配函数,在分配时只是建立了进程虚拟地址空间,并没有 ...

  3. 2017-8-2新开了一个ABP交流的QQ群(291304962 )，欢迎加入

    因为ABP架构设计交流群人数一直爆满,很多想交流ABP的朋友无法加进群里, 刚新建了一个QQ群,群号291304962(ABP架构设计交流群3),欢迎对ABP感兴趣的朋友加入. 欢迎加QQ群: ABP ...

  4. odoo10.0在odoo12.0环境的基础上搭建环境

    在前边的文章中,讲述了如何搭建12.0的环境,现由业务的需要需要在此基础上搭建基于python2.7的10.0版本. 第一步,安装python2.7 sudo apt- 第二步,安装python-de ...

  5. 线性回归和Logistic回归

    目录 线性回归 用线性回归模型拟合非线性关系 梯度下降法 最小二乘法 线性回归用于分类(logistic regression,LR) 目标函数 如何求解\(\theta\) LR处理多分类问题 线性 ...

  6. webpack4配置详解之常用插件分享

    前言 继上一次webpack的基础配置分享之后,本次将分享一些工作中项目常用的配置插件.也会包含一些自己了解过觉得不错的插件,如有分析不到位的,欢迎纠错,嗯,这些东西文档都有,大佬可绕过. Wepac ...

  7. 百度地图IP定位，点击地图添加marker

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. IDEA设置本地maven仓库

    IDEA设置本地maven仓库 1.下载apache-maven-3.3.9,解压 2.在系统”环境变量“,”系统变量“设置MVN_HOME,如图: 3.在PATH设置,如: %M2_HOME%\bi ...

  9. SpringMVC学习手册(三)------EL和JSTL(上)

    1.含义 EL:       Expression Language , 表达式语言 JSTL:   Java Server Pages Standard Tag Library, JSP标准标签库  ...

  10. AngularJS 1.x系列：AngularJS服务-Service、Factory、Provider、Value及Constant（5）

    1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...