
popover(弹出菜单)是mobile App中常见的UI组件,在用户点击位置附近弹出悬浮菜单,向用户展示更多信息或提供快捷操作。官方封装了两个大家常用的两个位置:顶部导航栏右侧和底部工具栏右侧,请看mui-popoverdemo。
顶部导航栏右侧弹出
<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> <li class="mui-table-view-cell"><a href="#">Item6</a> </li> <li class="mui-table-view-cell"><a href="#">Item7</a> </li> <li class="mui-table-view-cell"><a href="#">Item8</a> </li> <li class="mui-table-view-cell"><a href="#">Item9</a> </li> <li class="mui-table-view-cell"><a href="#">Item10</a> </li> </ul> </div> </div> </div>
要显示、隐藏如上菜单,mui推荐使用锚点方式:
<a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a>
点击如上定义的按钮,即可显示弹出菜单,再次点击弹出菜单之外的其他区域,均可关闭弹出菜单;这种使用方式最为简洁。
底部工具栏右侧弹出
<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> <li class="mui-table-view-cell"><a href="#">Item7</a> </li> <li class="mui-table-view-cell"><a href="#">Item8</a> </li> <li class="mui-table-view-cell"><a href="#">Item9</a> </li> <li class="mui-table-view-cell"><a href="#">Item10</a> </li> </ul> </div> </div> </div>
要显示、隐藏如上菜单,mui推荐使用锚点方式:
<a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">菜单</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> <li class="mui-table-view-cell"><a href="#">Item7</a> </li> <li class="mui-table-view-cell"><a href="#">Item8</a> </li> <li class="mui-table-view-cell"><a href="#">Item9</a> </li> <li class="mui-table-view-cell"><a href="#">Item10</a> </li> </ul> </div> </div> </div>
要显示、隐藏如上菜单,mui推荐使用锚点方式:
<a href="#middlePopover" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开弹出菜单</a>
以上均是官方有提供的demo,若希望通过js的方式控制弹出菜单,则通过如下一个方法即可:
mui('.bottomPopover').popover(status[,anchor]);
status
'show':显示popover
'hide':隐藏popover
'toggle':自动识别处理显示隐藏状态
mui('.bottomPopover').popover('toggle');
[anchor]
anchorElement:锚点元素
//传入toggle参数,用户也无需关心当前是显示还是隐藏状态,mui会自动识别处理; mui('.mui-popover').popover('toggle',document.getElementById("openPopover"));
但是往往需求都是千遍万化的,题目是说如果弹出的页面内容超出了,我想要使其滚动显示怎么弄呢?这个在官网真心没有给出说明,需要我们自己去查看,这边就给大家说说如何实现该效果:
弹出的页面内容超出显示滚动条
只需在script中添加mui自带的scroll方法即可使用,所以这需要大家再看框架的时候一定要熟能生巧,灵活使用,具体代码如下,就一行就可以实现:
mui('.mui-scroll-wrapper').scroll();
上面这个代码里面的标签元素是在你页面内容外部的元素名称。
原创文章,作者:monkey,如若转载,请注明出处:《MUI popover的应用及如何使其弹出的页面内容超出可滚动》http://www.monkeyblog.cn/2017/06/19/01-54/
技术博客,赞一个。。。。。。。。。
一直在学习,很不错的文章,谢谢分享
多看下,虽然有点不懂。看多了就了解多了
默默的学习怎么做。
这样的博客让人禁不住一天来几次!
这样精彩的博客越来越少咯!
很少能看到这么专注的博客啦!
一言不发岂能证明我来过了?!
一天不来访,浑身上下痒!
冬天虽已来临,祝您四季如春!
潜心学习,认真拜读!
学习了,技术性博客。
丁酉年(鸡)九月初十 2017-10-29到此一游!
学海无涯,博客有道!拜读咯!
不止一次的来,不止一次的去,来来去去,这就是这个博客的魅力!
谢谢 欢迎常来
阅读博客获得的进步不亚于阅读一本书。
欢迎常来
博客不少,这里独好!
丁酉年(鸡)八月廿五 2017-10-14
博客不错,大爱哦!
没事就来转一转,每天多吃两碗饭!
这个博客不简单,看了还想接着看。
效果不错,向大神膜拜。
非常不错的效果
这里来不够,看不够,玩不够!
世间博客不少,风景这边独好!
很好的分享!!
如果上天再给我一次机会,我会对你的博客说,下次还来看你!
谢谢,欢迎常来
感受学习的力量!
来看看总能学到一点东西!
我也有过博客,不过那都是很多年前的事情了!
博主,交换个友链呗!!!!!
向经典致敬,与时代同行!
玉不琢不成器,人不学不知道,拜读了!
真是学无止境!
抱着学习的态度来看看