jquery-mobile – 如何在jQuery mobile 1.4.0中制作下拉面板？

我在我的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 1.4开始,弹出窗口小部件中会添加一个新的属性数据箭头.这会创建一个箭头,可以定位在弹出窗口的任何位置.

07000

The popup can display an arrow along one of its edges when it opens if the data-arrow attribute is set. The attribute can take a value of true,false,or a string containing a comma-separated list of edge abbreviations (“l” for left,“t” for top,“r” for right,and “b” for bottom). For example,if you set data-arrow="r,b" then the arrow will only ever appear along the bottom or right edge of the popup. true is the same as “l,t,r,b” and false or "" indicates that the popup should be displayed without an arrow.

HTML

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

将data-rel =“popup”添加到按钮以调用弹出窗口.

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

要修改箭头的大小,请查看此link.

07002