mui弹出菜单

最新推荐文章于 2022-08-04 17:26:22 发布
最新推荐文章于 2022-08-04 17:26:22 发布
阅读量487 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Dark-fire-liehuo/p/10427882.html
版权

详细操作见代码：

<!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">10</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>

效果如下：

 

转载于:https://www.cnblogs.com/Dark-fire-liehuo/p/10427882.html

weixin_30603633
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序下拉搜索框弹出菜单动画效果
10-10
小程序下拉搜索框弹出菜单动画效果，外观美美哒的demo
HTML5+规范API-系统通讯录获取功能
记录和分享属于我的“IT”时光
04-25 1853
HTML5+规范API-系统通讯录获取功能
mui——popover 弹出菜单
yjITcsdn的博客
03-06 4610
第一种利用锚点弹出： html代码输入下 <a href="#middlePopover"></a> <div id="middlePopover" class="mui-popover"> <div class="mui-popover-arrow"></div> &...
Mui --- 弹出菜单
weixin_34348174的博客
03-29 290
mui框架内置了弹出菜单插件，弹出菜单显示内容不限，但必须包裹在一个含.mui-popover类的div中，如下即为一个弹出菜单内容： &lt;div id="popover" class="mui-popover"&gt; &lt;ul class="mui-table-view"&gt; &lt;li class="mu.
解决mui-popover 弹出菜单不能滚动的一次实践
weixin_42429311的博客
04-19 1522
mui-popover菜单弹窗的事项，及Unable to preventDefault inside passive event listener due to target being treated as passive 报错的解决方案。
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)
10-17
主要介绍了微信小程序MUI侧滑导航菜单,结合实例形式分析了微信小程序Popup弹出式,左侧不动，右侧滑动菜单相关实现技巧与注意事项,需要的朋友可以参考下
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
10-17
主要介绍了微信小程序MUI侧滑导航菜单,结合实例形式分析了微信小程序Popup弹出式,左侧滑动,右侧不动菜单功能相关实现技巧与注意事项,需要的朋友可以参考下
基于mui写的H5移动端全国地区三级联动菜单
02-28
“mui”是一个流行的前端开发框架，专注于移动互联网应用，它提供了一系列组件和服务，如导航、下拉刷新、上拉加载、弹出层等，帮助开发者快速构建响应式和高性能的移动Web应用。MUI的设计理念是轻量级、高性能和...
mui中点击弹出新的菜单栏，修改高度的实现
qq_34328404的博客
09-18 1586
var he1 = document.getElementById('hei').offsetHeight; document.getElementById('type').style.height = he1 * 2 + "px"; document.getElementById('more').addEventListener('tap', function() { //打开选址
移动端 精简mui.css,实现mui的弹出层（不使用mui.js，只包含弹出层）
东明之羞的博客
03-12 3193
使用mui的样式，实现mui的弹出层（不使用mui.js），精简代码，实现弹出效果，不受其他plus等影响
弹出层选项卡
04-10
弹出层选项卡让您轻松实现网页弹出特效
弹出层示例展示
02-16
是一个小小的示例，用于弹出层的做法，和ifream的父子关系
mui点餐案例
06-02
挺不错的一个例子 对我帮助很大
弹出层MUI框架美化.rar
06-19
弹出层MUI框架美化.rar
js打开及关闭Mui弹出菜单框
稻花香的博客
04-23 1064
通过以下方式（打开关闭都用这个）： mui('middlePopover').popover('toggle'); middlePopover：需要弹出的内容框id <div id="middlePopover" class="mui-popover" style='height: 200px;left: 50%;top: 50%;transform: translate(-50%...
mui中使用 mui-popover遇到的问题及解决方法
qq_35500233的博客
05-16 5585
我的项目整体是基于mui框架实现的，同时使用了vue框架来给界面绑定数据。 具体的界面如下 点击页面的按钮，弹出下面这个界面。 我的html代码如下： <div id="cardContent" class="card-content mui-popover mui-popover-bottom mui-popover-action" data-disable-auto-close="tr...
mui消息框(alert,confirm,prompt,toast)的使用
热门推荐
liruli的博客
07-03 5万+
mui消息框(alert,confirm,prompt,toast)的使用 在开发mui的过程中，我们最经常用到的就是消息框，例如警告框、确认框、对话框、消息提示框等等一系列的弹出消息框。mui没有让我们失望，这些都做好了封装 alert(警告框) 用法： .alert( message, title, btnValue, callback [, type] ) message ...
MUI底部菜单栏 uniapp 底部菜单栏
霍城延的随笔
08-04 716
MUI 制作底部菜单栏。uni-app制作底部菜单栏。
MUI 的侧滑菜单 详解
xd775799的博客
06-15 2万+
mui提供了两种侧滑导航实现：webview模式和div模式，两种模式各有优劣，适用于不同的场景。webview模式主页面和菜单内容在不同的webview中，两个页面根据内容需求分别组织DOM结构，mui对其DOM结构无特殊要求，故其有如下优点：菜单内容是单独的webview，故可被多个页面复用； 菜单内容在单独的webview中，菜单区域的滚动不影响主界面，故可使用原生滚动，滚动更为流畅； 另
mui下拉菜单代码示例
最新发布
04-04
以下是一个简单的mui下拉菜单代码示例： HTML: ``` <header class="mui-bar mui-bar-nav"> <a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a> <h1 class="mui-title">下拉菜单</h1> </header> <div class="mui-content"> <div class="mui-content-padded"> <p>点击左上角菜单按钮展示下拉菜单</p> </div> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell"> <a href="#">菜单项1</a> </li> <li class="mui-table-view-cell"> <a href="#">菜单项2</a> </li> <li class="mui-table-view-cell"> <a href="#">菜单项3</a> </li> </ul> </div> ``` CSS: ``` .mui-bar-nav a.mui-action-menu { font-size: 24px; } ``` JavaScript: ``` mui.init({ swipeBack: false }); var menuWrapper = document.getElementById('menu-wrapper'); var menu = document.getElementById('menu'); var menuWrapperClassList = menuWrapper.classList; var backdrop = document.getElementById('menu-backdrop'); document.getElementById('show-menu').addEventListener('tap', function() { menuWrapperClassList.add('mui-active'); backdrop.addEventListener('tap', closeMenu); menu.addEventListener('webkitTransitionEnd', menuTransitionEnd); backdrop.show(); }); var closeMenu = function() { menuWrapperClassList.remove('mui-active'); backdrop.removeEventListener('tap', closeMenu); menu.removeEventListener('webkitTransitionEnd', menuTransitionEnd); backdrop.hide(); } var menuTransitionEnd = function(e) { if (e.target === menu) { backdrop.removeEventListener('tap', closeMenu); backdrop.addEventListener('tap', closeMenu); } } ``` 注：以上代码需要引入mui.css和mui.js文件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值