我在我的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-arrowattribute is set. The attribute can take a value oftrue,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 setdata-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” andfalseor""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>
07002
