mui popover 自定义 弹出位置 显示 隐藏分析

符号 阅读:311 2021-02-04 14:32:53 评论:0

mui popover

一.要显示、隐藏弹出菜单插件,mui推荐使用锚点方式.

1.页面顶部导航栏、底部工具栏固定位置 
<header class="mui-bar mui-bar-nav"> 
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> 
    <a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a> 
    <h1 class="mui-title">右上角弹出菜单</h1> 
</header> 
<footer class="mui-bar mui-bar-footer"> 
    <a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">右下角弹出菜单</a> 
</footer> 
<!--右上角弹出菜单--> 
<div id="topPopover" class="mui-popover"> 
    <div class="mui-popover-arrow"></div> 
    <div class="mui-scroll-wrapper"> 
        <div class="mui-scroll"> 
            <ul class="mui-table-view"> 
                <li class="mui-table-view-cell"><a href="#">Item1</a></li> 
                <li class="mui-table-view-cell"><a href="#">Item2</a></li> 
                <li class="mui-table-view-cell"><a href="#">Item3</a></li> 
                <li class="mui-table-view-cell"><a href="#">Item4</a></li> 
                <li class="mui-table-view-cell"><a href="#">Item5</a></li> 
            </ul> 
        </div> 
    </div> 
</div> 
<!--右下角弹出菜单--> 
<div id="bottomPopover" class="mui-popover mui-popover-bottom"> 
    <div class="mui-popover-arrow"></div> 
    <div class="mui-scroll-wrapper"> 
        <div class="mui-scroll"> 
            <ul class="mui-table-view"> 
                <li class="mui-table-view-cell"><a href="#">Item1</a></li> 
                <li class="mui-table-view-cell"><a href="#">Item2</a></li> 
                <li class="mui-table-view-cell"><a href="#">Item3</a></li> 
                <li class="mui-table-view-cell"><a href="#">Item4</a></li> 
                <li class="mui-table-view-cell"><a href="#">Item5</a></li> 
                <li class="mui-table-view-cell"><a href="#">Item6</a></li> 
            </ul> 
        </div> 
    </div> 
</div>
2.其它区域要使用弹出菜单,都要准确计算物理位置,从而实现弹出菜单的绝对定位; mui封装的手势事件中,可以获得点击位置,通过这些位置可实现任意区域的弹出菜单显示 
<div class="mui-content"> 
    <div class="mui-content-padded"> 
        <p> 
            <a href="#middlePopover" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开弹出菜单</a> 
        </p> 
    </div> 
</div> 
<!-- a标签所在位置弹出菜单 --> 
<div id="middlePopover" class="mui-popover"> 
    <div class="mui-popover-arrow"></div> 
    <div class="mui-scroll-wrapper"> 
        <div class="mui-scroll"> 
            <ul class="mui-table-view"> 
                <li class="mui-table-view-cell"><a href="#">Item1</a></li> 
                <li class="mui-table-view-cell"><a href="#">Item2</a></li> 
                <li class="mui-table-view-cell"><a href="#">Item3</a></li> 
                <li class="mui-table-view-cell"><a href="#">Item4</a></li> 
                <li class="mui-table-view-cell"><a href="#">Item5</a></li> 
                <li class="mui-table-view-cell"><a href="#">Item6</a></li> 
            </ul> 
        </div> 
    </div> 
</div>

二.通过js的方式控制弹出菜单,实现任意元素上弹出.

有时要做点击页面顶部导航栏、底部工具栏也在某一其他元素上弹出时,就适合用js的方式控制.

//方法: 
    mui(弹出层元素).popover(status[,anchor]); 
//示例: 
    mui(弹出层元素).popover('show ');//show hide toggle 
     //传入toggle参数,用户也无需关心当前是显示还是隐藏状态,mui会自动识别处理; 
     mui(弹出层元素).popover('toggle',document.getElementById(显示位置元素)); 
<header class="mui-bar mui-bar-nav"> 
  <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  <a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a>
  <h1 class="mui-title">右上角弹出菜单</h1>
</header>
<div class="mui-content">
    <div id='list' class="mui-indexed-list" style="">
        <div class="mui-indexed-list-search mui-input-row mui-search" style="border-radius:6px;margin: 6px 10px;">
            <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索" style="height:30px;">
        </div>
    </div>            
</div>   

//
点击弹出 mui('.mui-bar').on('tap','.mui-btn',function(){ mui('#topPopover').popover('show',document.getElementById("list")); // 将id为list的元素放在想要弹出的位置 });

 

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号