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:
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:
Here is a basic panel example:
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:
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 |
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: