如何在jQuery mobile 1.4.0中制作下拉面板? [英] How to make Drop down panel in jQuery mobile 1.4.0?

问题描述

我在jQuery移动应用程序中具有以下面板，我希望使其如下图所示的那样下拉，而不是从页面边缘滑动.这可以在jQuery mobile中完成吗，我该怎么做?

I have the following Panel in my jQuery mobile app , I want to make it to be drop down as appears in the following image rather than to be slide from the page edge . Is this can be done in jQuery mobile and How can i do this ?

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

推荐答案

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

You can use popup widget to simulate dropdown menu.

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

As of jQuery Mobile 1.4, a new attribute data-arrow is added to popup widget. This creates an arrow which can be positioned anywhere in popup.

箭头:

如果设置了data-arrow属性，则弹出窗口打开时可以沿其边缘之一显示箭头.该属性可以采用true，false的值，或者包含以逗号分隔的边缘缩写列表的字符串("l"表示左侧，"t"表示顶部，"r"表示右侧，"b"为底部).例如，如果设置data-arrow="r,b"，则箭头只会出现在弹出窗口的底部或右侧. true与"l，t，r，b"相同，并且false或""表示弹出窗口应显示为无箭头.

Arrow:

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"添加到按钮以调用弹出窗口.

Add data-rel="popup" to button to call popup.

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

要修改箭头的大小，请检查此链接.. >

To modify arrow's size, check this link.

演示

Demo

这篇关于如何在jQuery mobile 1.4.0中制作下拉面板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！