Latest web development tutorials
 

jQuery Mobile Panels


jQuery Mobile Panels

Panels in jQuery Mobile will slide out from the left or the right side of the screen with additional content.



To create a panel, add the data-role="panel" attribute to a <div> element and specify an id.

Add any HTML markup inside this <div> that you want to display in your panel:

<div data-role="panel" id="myPanel">
  <h2>Panel Header..</h2>
  <p>Some text..</p>
</div>

Note: The panel markup must be placed before or after the header, content and footer inside a jQuery Mobile page.

To access the panel, create a link that points to the id of the panel <div>. When a user clicks on the link, the panel will open:

<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>

Here is a basic panel example:

Example

<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel">
    <h2>Panel Header..</h2>
    <p>Some text in the panel..</p>
  </div>

  <div data-role="header">
    <h1>Standard Page Header</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>Click on the button below to open the Panel.</p>
    <a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div>
Try it Yourself »

Closing Panels

You can close the panel by clicking outside of it, by swiping or by pressing the Esc key. You can disable the clicking and swiping features by adding additional data-* attributes to the panel <div>:

Attribute Value Description Example
data-dismissible true | false Specifies whether the panel can be closed by clicking outside of it, or not Try it
data-swipe-close true | false Specifies whether the panel can be closed by swiping, or not Try it

You can also close the panel by using a button: Just add a link inside the panel <div> with the data-rel="close" attribute attached to it. And for compatibility reasons, you should also specify the href attribute to point to the ID of the page the user should go to when closing the panel:

Example

<div data-role="panel" id="myPanel">
  <h2>Panel Header..</h2>
  <p>Some text in the panel..</p>
  <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">Close Panel</a>
</div>
Try it Yourself »

Panel Display

You can control the display mode of the panel with the data-display attribute:

Attribute Value Description
data-display="overlay" Displays the panel over the content
data-display="push" Animates both the panel and the page at the same time
data-display="reveal" Default. The panel will sit under the page and reveal as the page slides away

Example

<div data-role="panel" id="overlayPanel" data-display="overlay">
<div data-role="panel" id="revealPanel" data-display="reveal">
<div data-role="panel" id="pushPanel" data-display="push">
Try it Yourself »

Positioning Panels

By default, panels will appear on the left side of the screen. For the panel to appear on the right side of the screen, specify the data-position="right" attribute.

Example

<div data-role="panel" id="myPanel" data-position="right">
Try it Yourself »

You can also specify how the panel's content should be positioned according to the rest of the page when a user starts to scroll. By default, the panel will scroll with the page (but the panel's content will stay on top of the page). If you always want to display the contents of the panel, no matter how far you scroll the page, add the data-position-fixed="true" attribute to the panel:

Example

<div data-role="panel" id="myPanel" data-position-fixed="true">
Try it Yourself »