jQuery Mobile 1.3 Swipe to Reveal Panel with Demo

I wanted to make use of the new jQuery Mobile 1.3.0-beta1 feature called Panels, allowing you to overlay, push, or reveal a hidden panel of content on the left or right of the main window. This is most commonly used to provide extra navigation options. In my case, I wanted to show static content that is hyper relevant, but without crowding up the main window.

However, the docs recommend and demonstrate how to use a hyperlink to activate the panel, which is great in a header, footer, or in a button, but it seemed more natural to allow the user to swipe the screen either left or right to show the panel. Thus, I need to add the following code to the bottom of the page:

<script type='text/javascript'>
$(document).on('pageinit',function(){
	$("#content").on("swiperight",function(){
		$("#leftpanel").panel( "open");
	});
	$("#content").on("swipeleft",function(){
		$("#rightpanel").panel( "open");
	});
});
</script>


Note that, as recommended by jQuery Mobile, I am not using $(document).ready(), but rather $(document).on(‘pageinit’). The simple JavaScript code identifies when the user swipes anywhere in the main content area and reveals the appropriate panel. Here is the simplified code used in the demo:

<!DOCTYPE html> 
<html> 
<head> 
	<title>jQuery Mobile 1.3 | Swipe to Reveal Panel Demo</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
</head> 
<body> 
<div data-role="page" data-theme='c'>
 
	<div data-role="header">
		<h1>Swipe for Panel Demo</h1>
	</div><!-- /header -->
 
	<div data-role="content" id="content">	
			<h2>If you swipe left-right</h2>	
			<h2>If you swipe right-left</h2>		
		</div>
		<p><em>This page uses jQuery Mobile 1.3.0-beta 1</em></p>
	</div><!-- /content -->
 
	<div data-role="panel" id="leftpanel" data-display="reveal" data-position="left">
		<ul data-role='listview'>
			<li data-theme='a'>Listview</li>
			<li>Item A<span class='ui-li-count'>24</span></li>
		</ul>
 
	</div><!-- /leftpanel -->
	<div data-role="panel" id="rightpanel" data-display="push" data-position="right"data-theme="b">
		<h2>What are you looking for?</h2>
	</div><!-- /rightpanel -->
</div><!-- /page -->
<script type='text/javascript'>
$(document).on('pageinit',function(){
	$("#content").on("swiperight",function(){
		$("#leftpanel").panel( "open");
	});
	$("#content").on("swipeleft",function(){
		$("#rightpanel").panel( "open");
	});
});
</script>
</body>
</html>

You should be aware that since it is based on the “#content” section, any short pages that don’t have content completely down the screen will have areas where the user cannot swipe. You should not attach it to the page as the page includes the panels, so very strange things start happening. Also note that an ID was added to the content div for easy addressing in the jQuery selector.

Share and Enjoy:
  • Facebook
  • Twitter
  • Reddit
  • StumbleUpon
  • Digg
  • del.icio.us
  • Tumblr
  • PDF

5 thoughts on “jQuery Mobile 1.3 Swipe to Reveal Panel with Demo”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>