Geek asks and answers

How to make panel down in jQuery mobile 1.4.0?

I have the following panel in a jQuery mobile app, so I want it to drop out, as shown in the following image, and not to slide from the edge of the page. It can be done in jQuery mobile and how can I do it?

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

enter image description here

0
source share
1 answer

You can use the pop-up widget to simulate a drop-down menu.

As with jQuery Mobile 1.4, a new attribute is data-arrowadded to the popup widget. This creates an arrow that can be located anywhere in the 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>

, .

0

More articles:


All Articles