mui框架內置了彈出菜單插件,彈出菜單顯示內容不限,但必須包裹在一個含.mui-popover類的div中,如下即為一個彈出菜單內容:
<div id="popover" class="mui-popover"> <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>
這個內容要放置在mui-content外面;
點擊如上定義的按鈕,即可顯示彈出菜單,再次點擊彈出菜單之外的其他區域,均可關閉彈出菜單;這種使用方式最為簡潔。
放在header 中的
<a href="#popover" class="mui-btn mui-btn-primary mui-btn-block">打開窗口</a>
若希望通過js的方式控制彈出菜單,則通過如下一個方法即可:
mui('.mui-popover').popover('toggle');