mui popover 自定義 彈出位置 顯示 隱藏

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的元素放在想要彈出的位置
});