详细操作见代码：

<!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. Python标准库之ConfigParser模块

    配置文件的格式 a) 配置文件中包含一个或多个 section, 每个 section 有自己的 option: b) section 用 [sect_name] 表示,每个option是一个键值对, ...

  2. 【MOS】在不同版本和平台之间进行还原或复制 (文档 ID 1526162.1)--跨版本恢复

    参考链接:http://blog.itpub.net/26736162/viewspace-1549041/

  3. (四）esp8266 MDNS域名服务

    (实例一)ESP8266 TFT(ST7735)彩屏-web刷图 https://www.arduino.cn/thread-42247-1-1.html (实例二) 自己当AP时建立MDNS域名 h ...

  4. Cordova入门系列（二）分析第一个helloworld项目

    版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了如何创建一个cordova android项目,这章我们介绍一下创建的那个helloworld项目的代码,分析其运行. MainActiv ...

  5. Java项目的导入和导出

    在很多情况下,需要将当前的 Java工程传递给其他人继续工作, 或协同工作,或者是从其他人那里接收到传递来的Java项目, 就需要掌握 Java项目的导入和导出. 以 Hello World 为例: ...

  6. SQL Server中NULL的一个测试

    我们都知道SQL Server中NULL是一个很特殊的存在,因为NULL不会等于任何值,且NULL也不会不等于任何值.对于NULL我们只能使用IS或IS NOT关键字来进行比较. 我们先来看看下面一个 ...

  7. Epemme

    Goss wa lap tirre kamme da, Waess u'malarre zuzze nasa. Mat abbe price junirre nay, Ywe zay prolodde ...

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

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

  9. docker(六) 使用docker-maven-plugin插件构建docker镜像(已过时)

    可以参考博客:https://blog.csdn.net/aixiaoyang168/article/details/77453974 docker-maven-plugin官网推荐在新项目中使用do ...

  10. vue-百度地图-maker文字标签显示隐藏

    html: <div id="allmap" class="map"></div>   script:   mounted() { th ...