The Panel

Any HTML can be placed in the panel.

Barry's jQuery Mobile Demos: Panels

Panels

A panel in jQuery Mobile is a section of HTML that can be displayed or hidden as required. The panel is usually opened by a button or link and can be closed by "swiping" or a touch/click outside the panel. To define a panel we create a new <div> tag. This definition must be before the page header definition or after the page footer definition. The following page definition has a small panel that is displayed when the button defined in the main page body is touched/pressed. Notice how it is defined before the page header and there is a link to it from the button definition. It could have been defined after the footer.

<div data-role="page" id="page1">
  <div data-role="panel" id="panel1">
    <h2>The Panel</h2>
    <p>Any HTML can be placed in the panel.</p>
  </div>
  
  <div data-role="header">
    <h1>My Header</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>Click the button to reveal the panel.</p>
    <a href="#panel1" class="ui-btn ui-btn-inline">Open Panel</a>
  </div>
  <div data-role="footer">
    <h2>Footer</h2>
  </div>
</div>

Try it

To close a panel we can click/touch outside it, swipe the main text to cover it again or type the Esc key. You have the flexibility to disable the click/touch and/or the swipe closing by adding the following values to the following attributes to the panel header.

data-dismissible="false" - click/touch will not close

data-swipe-close="false" - swipe close disabled

You can also add a button to the panel that can be used to close it. This is achieved by adding the data-rel="close" attribute to the button definition. The target of the button can be the page id value but this is not really necessary. For example, the following panel definition has the click/touch and swipe close disabled but contains a button to close the panel.

<div data-role="panel" id="panel2" data-dismissible="false" data-swipe-close="false">
    <h2>The Panel</h2>
    <p>This panel can only be closed by the button.</p>
    <a href="#page" data-rel="close" class="ui-btn ui-btn-inline">Close Me!</a>
</div>

In this definition the button has a target of "#page" which is the id attribute value associated with the page.

Try it

We can also change the way a panel is open and closed. This is down by setting the value of the data-display attribute in the panel definition header. The three options are:

We can also make the panel appear on the right hand side of the window instead of the default left hand side. This is done by adding the attribute data-position="right" to the panel definition. By default, if you scroll the page then the panel moves with the main page text. You can also change this behavior to make the panel stay visible with the additional attribute data-position-fixed="true". For example, the following panel header will define a panel that will appear on the right hand side and stay fixed when the window scrolls.

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

Try it

You will find the data-position-fixed="true" attribute very useful in long pages because, by default, a panel opening will reset the page to the top. This means the panel closing will leave the page away from where it started. The three panels above all have this attribute set to make the pages stay where the button was touched/clicked.

Home

The Panel

This panel can only be closed by the button.

Close Me!

The Panel

This panel is defined to push the main text:

Close Me!

The Panel

This panel is defined to push the main text:

Close Me!

The Panel

This panel is defined to reveal the main text:

Close Me!

The Panel

This panel is defined to appear on right had side and scroll with the rest of the window. Its header is defined:

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

Close Me!