jQuery Mobile - SPLessons

jQuery Mobile Panels

Chapter 10

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

jQuery Mobile Panels

jQuery Mobile Panels

shape 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.

<div data-role="panel" id="panel1">
  <h2>Header</h2>
  <p>Text to display</p>
</div>

Opening Panel

shape 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:

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

Closing Panel

shape 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:

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

Disable Panel

shape Description

To disable the clicking and swiping features of panel just add data-dismissible or data-swipe-close attribute to the panel <div>.

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.

Eg:

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

Panel Display

shape Description

Panel can be displayed in different mode with the 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.

Example:

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

Positioning Panels

shape 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:

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

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:

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

shape Example

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

Output:

When clicked on info button “i” in the header, the panel will open showing the information as given below.

Summary

shape 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.