How To Use jQuery Mobile Panels

Anthony James —  January 20, 2013

jQuery Mobile 1.3 has a great new feature called panels. Panels are very common in native iOS applications and most commonly seen on YouTube and Facebook apps. jQuery Mobile panels are extremely simple to use but there are a few things to be remembered when working with panels. Follow along below, or watch the video to learn how to use jQuery Mobile panels.


Start With The Basic Page Layout

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Slide Panel Pinehead.tv</title>
<link rel=”stylesheet” href=”../../css/themes/default/jquery.mobile.css” />
<script src=”../../js/jquery.js”></script>
<script src=”../../js/”></script>

</head>
<body>
<div data-role=”page”>
<!– Step 1 add panel code –>
<div data-role=”panel” id=”myPanel” data-theme=”a”>
<p>TRight options</p>
</div>
<div data-role=”panel” id=”myPanel2″ data-theme=”a”>
<p>Left options</p>
</div>
<!– add button code to show panels –>

<div data-role=”content”>

</div>
</div><!– /page –>
</body>
</html>

If you do not place your main page code inside of

<div data-role=”content”>
</div>

then the panel’s JavaScript will not work correctly or as smoothly as it’s supposed to.

Add The Panel HTML Code

Adding a panel is very simple as with most things in jQuery Mobile. All we need to do is make use of a couple of attributes.

<div data-role=”panel” id=”myPanel” data-theme=”a”>

<p>All content that goes on your panel goes in here</p>

</div>

Making The Panel Work

The panel works in two ways – 1) we can code the APIs to open and close the panels as we will do below or 2) you can use a button/hyperlink to open and close the panels. To make the panels work, there are a few options regarding the following attributes that you should be aware of.

  • data-display=”overlay|reveal|push” - Determines how the panel appears – whether it pushes your data-role content to the site, creates a box on top of your content, etc.
  • data-position=”right|left” – Determines whether your panel appears on the right or left hand side of your app.
  • data-dismissible=”true|false” – If set to true, the panel with auto-close when you click off the app while the panel is active. This function is similar to the native function in IOS apps. If set to false, you have to click the button again to close the panel or close it using JavaScript

Create A Hyperlink Or Button That Causes The Panel To Appear

<a href=”#myPanel” data-role=”button” data-position=”right” data-reveal=”overlay” data-dismissible=”true”>Show Panel</a>

Screen Shot 2012-12-11 at 8.52.33 PM

 

JavaScript Code That Causes The Panel To Appear By Swiping

<script>
$(document).on(“swiperight”, function(event, ui) {
$( “#panel1″ ).panel( “open” );

});
</script>

 

Putting It All Together

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Slide Panel Pinehead.tv</title>
<link rel=”stylesheet” href=”../../css/themes/default/jquery.mobile.css” />
<script src=”../../js/jquery.js”></script>
<script src=”../../js/”></script>
<script>
$(document).on(“swipeleft”, function(event, ui) {
$( “#myPanel”).panel(“open”, {display: ‘push’, position: ‘right’} );
});
$(document).on(“swiperight”, function(event, ui) {
$( “#myPanel”).panel(“open”, {display: ‘overlay’, position: ‘left’} );
});
</script>
</head>
<body>
<div data-role=”page”>
<!– Step 1 add panel code –>
<div data-role=”panel” id=”myPanel” data-theme=”a”>
<p>TRight options</p>
</div>
<div data-role=”panel” id=”myPanel2″ data-theme=”a” >
<p>Left options</p>
</div>

<!– add button code to show panels –>

<div data-role=”content”>
<a href=”#myPanel” data-role=”button” data-display=”reveal” data-position=”left” data-dismissible=”true”>Show panel</a>

</div>
</div><!– /page –>
</body>
</html>

 

Anthony James

Posts Twitter Facebook

Anthony is a Web Software Developer & Linux Systems Engineer. With 11 years of experience in these fields. He is also the founder and main contributor at Pinehead.tv. He is passionate about passing on his technical knowledge through training and educating others.

6 responses to How To Use jQuery Mobile Panels

  1. wow this looks cool.., need to get back into jquery mobile. thanks

  2. hi, thanks for this tutorial ! well explained

    I think it worth noticing that panel markup should be not only inside the content data-rol bute also before header or after footer in case they exist. It is written in the jquery mobile panel doc, and also that this limitation should be removed a day.

  3. Hello,

    Great video tutorial!!!
    I’ve got this thing to work but it seems that the latest stable version:

    is messing with my whole site. I found that I can compile my on javascript file here: http://jquerymobile.com/download-builder/

    can you help me determine what exactly i need to only make Panel work?
    Thanks!

  4. Love your tutorials I have spent countless hours on your site learning many things.

Trackbacks and Pingbacks:

  1. Mobile Developer News Round Up: Google Maps for iOS, jQuery Mobile Panels, Windows Store Apps for iOS Developers — Global Nerdy - December 13, 2012

    [...] Here’s a video that explains how to use jQuery Mobile 1.3′s “sliding panel” … You see them in native iOS apps such as YouTube, and you can now have them in your HTML5 mobile apps. [...]