Description
"jQuery Mobile Panels" chapter explains about panels in jQuery Mobile which moves in and out from left or the right side of the screen. The panel can also contain contents.
Add
data-role="panel" attribute to to a <div> element in order to create jQuery Mobile Panels and specify the respective id. Inside <div> tag, add HTML markup that has to be displayed in the Panel.
The below code must be placed before or after the data-roles of jQuery Mobile page i.e header, content and footer.
[html]
<div data-role="panel" id="panel1">
<h2>Header</h2>
<p>Text to display</p>
</div>
[/html]
Description
To open a panel, initially create a link that refers to the id of the <div> panel. When clicked on the link, it opens the panel.
Eg:
[html]<a href="#panel1" class="ui-btn ui-btn-inline">Open Panel</a>[/html]
Description
To close panels just click outside of the panel or swipe or press "Esc" key. This can also be done using a button with link inside the
<div> panel that has attribute data-rel="close". Also specify the href attribute to refer page id that has to be displayed while closing the panel.
Eg:
[html]
<div data-role="panel" id="panel1">
<h2>Header</h2>
<p>Text to display</p>
<a href="#info" data-rel="close" class="ui-btn ui-btn-inline">Close</a>
</div>
[/html] Description
To disable the clicking and swiping features of panel just add data-dismissible or data-swipe-close attribute to the panel <div>.
Eg:
[html]
<div data-role="panel" id="panel1" data-dismissible="false">
<h1>Header</h1>
<p>Text to display</p>
<a href="#info" data-rel="close" class="ui-btn ui-btn-inline">Close</a>
</div>
[/html]
| Attribute | Value | Description |
|---|---|---|
| data-dismissible | true | false | It checks if the panel can be closed or not when clicked outside of it. |
| data-swipe-close | true | false | It checks if the panel is closed or not by swiping. |
Description
Panel can be displayed in different mode with the
Example:
[html]
<div data-role="panel" id="overlayP1" data-display="overlay">
<div data-role="panel" id="revealp2" data-display="reveal">
<div data-role="panel" id="pushp3" data-display="push">[/html]
data-display attribute.
| Attribute Value | Description |
|---|---|
| data-display="overlay" | Panel is displayed over the content when used this attribute. |
| data-display="push" | Used to animate the page and the panel simultaneously. |
| data-display="reveal" | This is a default attribute.The panel will be below the page and are shown when the page moves away. |
Description
Panels appears on the left of the screen by default. To make it to view on the right of the screen, specify the
data-position="right" attribute.
Eg:
[html]<div data-role="panel" id="panel1" data-position="right">[/html]
Position of the panel content can also be specified as per rest of the page when a user begins scrolling. The panel scrolls along with the page by default (but the panel's content will stay on top of the page). In order to display the panel content, even it is far from page which is being scrolled, add the attribute data-position-fixed="true" to the panel.
Eg:
[html]<div data-role="panel" id="panel1" data-position-fixed="true">[/html] Example
[html]
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Panel</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />
<!-- jQuery CDN hosted files -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="info">
<!-- Panel(Info) -->
<div data-role="panel" id="panel1" data-display="reveal" data-position="left" data-position-fixed="true" data-dismissible="false">
<h1>Info</h1>
<p>Welcome to SPLesson's jQuery Mobile(Info)</p>
<a href="#info" data-rel="close" class="ui-btn ui-btn-inline">Close</a>
</div>
<!-- Main Page(Home) -->
<div data-role="header">
<h1>Home</h1>
<a href="#panel1" class="ui-btn ui-btn-inline ui-icon-info ui-btn-icon-notext">Open Panel</a>
</div>
<div data-role="main" class="ui-content">
<p>Welcome to SPLesson's jQuery Mobile(Home)</p>
</div>
<div data-role="footer" data-position="fixed">
<h1>About Us</h1>
</div>
</div>
</body>
</html>
[/html]
Output:
When clicked on info button "i" in the header, the panel will open showing the information as given below.
Key Points
- jQuery Mobile Panels are created with the class class "data-role" and the attribute value "panel".
- data-dismissible or data-swipe-close attributes disables the panel.
- Panel positioning can be done using the attribute data-position.