mui——popover 弹出菜单

最新推荐文章于 2022-04-25 10:14:35 发布

原创最新推荐文章于 2022-04-25 10:14:35 发布 · 4.7k 阅读

·

1

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

前端同时被 2 个专栏收录

30 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍两种创建弹出窗口的方法：一是通过HTML锚点触发，二是利用JS事件监听实现。展示了具体的代码示例，包括HTML结构和必要的JS代码。

第一种利用锚点弹出：

html代码输入下

<a href="#middlePopover"></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">

</div>
               </div>

           </div>
       </div>

第二种使用js弹出：

html代码输入下

<div id="openPopover"></div>

<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">

</div>
               </div>

           </div>

</div>

js代码：

mui('body').on('tap','#openPopover',function(){
mui('#middlePopover').popover('toggle',document.getElementById('openPopover'));

})

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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