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