jquery

How To Use jQuery Mobile Panels

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>

 

8 thoughts on “How To Use jQuery Mobile Panels

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

  2. Hi nice video… I would like to know how to set this panels open by default, I mean, when you refresh the page, this panels are open. It would be possible?

  3. When I add the panel, my background image on the page div gets removed. Any idea what is causing this and how to fix it?

Leave a Reply

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