❮ Event Scrollstop Event Pagecontainerload ❯

jQuery Mobile Panels

Panels in jQuery Mobile slide out from the left to the right of the screen.

Create a panel by adding the data-role="panel" attribute to a <div> element with a specified id.

Add HTML markup inside the <div> to display your panel content:

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

Note: The panel markup must be placed before or after the page consisting of header, content, and footer.

To access the panel, create a link pointing to the panel <div> id, and clicking this link will open the panel:

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

Simple Panel Example

Example

<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel">
    <h2>Panel Header..</h2>
    <p>Panel content..</p>
  </div>
  <div data-role="header">
    <h1>Standard Page Header</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>Click 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>

Closing the Panel

You can close the panel by clicking outside the panel area, pressing the Esc key, or swiping. You can disable swiping and clicking to close the panel using the data-* attributes:

Attribute	Value	Description	Example
data-dismissible	true	false	Specifies whether the panel can be closed by clicking outside the panel area.	Try it
data-swipe-close	true	false	Specifies whether the panel can be closed by swiping.	Try it

You can use a button to close the panel: simply add the data-rel="close" attribute to the <div> inside the panel. For performance reasons, ensure the href attribute of the close link points to the page's ID.

Example

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

Panel Display

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

Attribute Value	Description
data-display="overlay"	Displays the panel over the content
data-display="push"	Pushes both the panel and the page
data-display="reveal"	Default value, slides the page out like a reveal, showing the panel

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

Panel Positioning

By default, the panel appears on the left side of the screen. To make the panel appear on the right side of the screen, specify the data-position="right" attribute.

Example

<div data-role="panel" id="myPanel" data-position="right">

You can specify that the panel content scrolls with the page. By default, the panel scrolls with the page (but the panel content remains at the top of the page). If you need the panel content to be fixed and not scroll with the page, add the data-position-fixed="true" attribute to the panel:

Example

<div data-role="panel" id="myPanel" data-position-fixed="true">

❮ Event Scrollstop Event Pagecontainerload ❯