如何在 jQuery mobile 1.4.0 中制作下拉面板？答案

【问题标题】：How to make Drop down panel in jQuery mobile 1.4.0?如何在 jQuery mobile 1.4.0 中制作下拉面板？
【发布时间】：2014-04-02 01:22:19
【问题描述】：

我的 jQuery 移动应用程序中有以下面板，我想让它如下图所示下拉，而不是从页面边缘滑动。这可以在 jQuery mobile 中完成吗？我该怎么做？

<div data-role="page"    id="MainPage"  >

  <div data-role="panel" id="Mainnavpanel" data-theme="b" data-display="overlay" data-      position="right" data-position-fixed="true">

   <ul data-role="listview"><li>
   <a href="#MainPageheader" data-rel="close" class="ui-btn" >Close</a></li>
   <li><a href="Page1.html" class="ui-btn"  data-transition="none">Page1</a></li>
  <li><a href="Page2.html" class="ui-btn"  data-transition="none">Page2</a></li>
  <li><a href="Page3.html" class="ui-btn"  data-transition="none">Page3</a></li>
  </ul>
  </div>

   <div  data-role="header"   id="MainPageheader"  data-position="fixed"  data-tap-     toggle="false" data-fullscreen="false">

    <a href="#Mainnavpanel" data-role="button"  class="ui-btn ui-btn-icon-left ui-btn- icon-notext ui-nodisc-icon ui-icon-bars"></a>
    <div> <font size="6px"> Main Page </font></div>

    </div> 
    <div data-role="content" >

    //content
    </div>
    </div>

【问题讨论】：

标签： jquery-mobile panel

【解决方案1】：

您可以使用 popup 小部件来模拟下拉菜单。

从 jQuery Mobile 1.4 开始，一个新属性 data-arrow 被添加到 popup 小部件中。这会创建一个箭头，它可以定位在弹出窗口的任何位置。

Arrow:

如果设置了data-arrow 属性，弹出窗口可以在打开时沿其边缘之一显示一个箭头。该属性的值可以是true、false，或者是一个包含以逗号分隔的边缘缩写列表的字符串（“l”代表左边，“t”代表顶部，“r”代表右边，“b”底部）。例如，如果您设置data-arrow="r,b"，那么箭头只会出现在弹出窗口的底部或右侧边缘。 true 与 "l,t,r,b" 相同，false 或 "" 表示弹出窗口应不显示箭头。

HTML

<div data-role="popup" id="popupID" data-arrow="t">
  <!-- content -->
</div>

将data-rel="popup" 添加到按钮以调用弹出窗口。

<a href="#popupID" data-rel="popup">Menu</a>

要修改箭头的大小，请查看link。

Demo

【讨论】：