jQuery Mobile Panel
The panel in jQuery Mobile slides out from the left side of the screen to the right.
Create a panel by adding the data-role="panel" attribute to a <div> element with a specified id.
Add HTML markup within the <div> to display your panel content:
<div data-role="panel" id="myPanel"> <h2>面板标题..</h2> <p>文本内容..</p> </div>
Note:The panel markup must be placed before or after the page, which consists of header, content, and footer.
To access the panel, you need to create a link that points to the id of the panel's <div>. Click the link to open the panel:
<a href="../index.html" class="ui-btn ui-btn-inline">打开面板</a>
Simple Panel Example
Example
<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>
Try it Yourself »
Close Panel
You can close the panel by clicking outside the panel, pressing the Esc key, or swiping. You can disable swiping and clicking to close the panel by using the data-* attributes:
| Attributes | Value | Description | Example |
|---|---|---|---|
| data-dismissible | true | false | Specifies whether the panel can be closed by clicking outside the panel. | Try it Yourself |
| data-swipe-close | true | false | Specifies whether the panel can be closed by swiping. | Try it Yourself |
You can use a button to close the panel: just add the data-rel="close" attribute inside the panel's <div>. For performance reasons, we need to point the href attribute of the close link to the page ID.
Example
<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>
Try it Yourself »
Panel Display
You can control the display mode of the panel by using the data-display attribute:
| Attribute Value | Description |
|---|---|
| data-display="overlay" | Displays the panel over the content |
| data-display="push" | It 'pushes' the panel and the page at the same time. |
| data-display="reveal" | Default value; slides the page off the screen like a slide and shows the panel. |
Example
<div data-role="panel" id="revealPanel" data-display="reveal">
<div data-role="panel" id="pushPanel" data-display="push">
Try it Yourself »
Panel Positioning
By default, the panel will be displayed on the left side of the screen. If you want the panel to appear on the right side of the screen, you can specify the data-position="right" attribute.
You can specify whether the panel content scrolls with the page. By default, the panel scrolls together with the page (but the panel content still remains at the top of the page). If you need the panel content to be fixed and not scroll with the page, you can add the data-position-fixed="true" attribute to the panel:
Other Extensions