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>

 

Get actionable training and tech advice

We'll email you our latest articles up to once per week.