Building jQuery Mobile Apps in DreamWeaver: Part 9 – Panels

Building jQuery Mobile Apps in DreamWeaver: Part 9 – Panels

14:03 22 June in jQuery Mobile
0 Comments

One of my favorite new features in jQuery Mobile version 1.3 is the panels feature. The one of most useful parts of a panel is being able to place option content in the panel area.

It is actually pretty simple to implement and can be done in any text editor outside of DreamWeaver as well.

Let’s start with a typical jQuery Mobile page without a header or footer.

  1. <div data-role="page" id="page">
  2.  
  3.     <div data-role="content">  
  4.            
  5.     </div>
  6.    
  7. </div
  8. [/code]
  9.  
  10. <p>To make a hidden panel we need to have a div tag inside the data-role="page" div but not within the data-role="content" div tag. The reason is the content are is what is visible when the user comes to the page and since this is a hidden part of the page we need to place the panel outside.</p>
  11.  
  12. <p>You do this by wrapping whatever content will be in the panel within a div tag with data-role="panel". See here I added the panel right after the content but still within the page I want this panel to show.</p>
  13.  
  14. [code language="html" highlight="7,8,9"]
  15. <div data-role="page" id="page">
  16.  
  17.     <div data-role="content">  
  18.            
  19.     </div>
  20.  
  21.     <div data-role="panel">
  22.            
  23.     </div>
  24.  
  25. </div
  26. [/code]
  27.  
  28. <p>So we are part way there. For demo purposes I am just going to add a short line of text in both the content and panel areas.
  29. [code language="html" highlight="4,8"]
  30. <div data-role="page" id="page">
  31.  
  32.     <div data-role="content">  
  33.         <p>This is the content area</p>
  34.     </div>
  35.  
  36.     <div data-role="panel">
  37.         <p>This is the panel area</p>
  38.     </div>
  39.  
  40. </div
  41. [/code]
  42.  
  43. <p>Now the next thing you need to do is add an id on the panel. The reason? Well we need to call this panel to open and because we can have more than one panel on the page we need to know which one we are going to be calling. In this case I am going to give it an id of <strong>myPanel</strong></p>
  44.  
  45. [code language="html" highlight="7"]
  46. <div data-role="page" id="page">
  47.  
  48.     <div data-role="content">  
  49.         <p>This is the content area</p>
  50.     </div>
  51.  
  52.     <div data-role="panel" id="myPanel">   
  53.         <p>This is the panel area</p>
  54.     </div>
  55.  
  56. </div
  57. [/code]
  58.  
  59. <p>From here I just need to open the panel. You can do this in many different ways but for this example I am going to create a simple text link and link to it the same way I link to other pages in jQuery Mobile by using the <strong>#pageName</strong> method.
  60.  
  61. [code language="html" highlight="6"]
  62. <div data-role="page" id="page">
  63.  
  64.     <div data-role="content">  
  65.         <p>This is the content area</p>
  66.  
  67.         <a href="#myPanel"> Open Me </a>   
  68.     </div>
  69.  
  70.     <div data-role="panel" id="myPanel">   
  71.         <p>This is the panel area</p>
  72.     </div>
  73.  
  74. </div>

That is really all you have to do in order to open the panel. But there would be a few other things you would want to add to get the desired effect you want. One of this items is how the panel opens.

With panels you have three options Overlay, Reveal and Push. Each of these options will open up the panel but in 3 slightly different wants.

Overlay

Overlay will open the panel over the content area. This will cover up part of your content.

Reveal

Reveal will push the top layer over but it makes the panel look like it has always been there. The best example of this is the way the side menu shows in the Facebook app shows.

Push

Push may at first look like reveal but actually makes it look like both the panel and the content move over at the same time instead of just revealing the panel.

You add the desired effect on your panel div by added a simple data-display=”reveal” or whatever effect you want. So your page code should look like this now. With the data-display added.

  1. <div data-role="page" id="page">
  2.  
  3.     <div data-role="content">  
  4.         <p>This is the content area</p>
  5.  
  6.         <a href="#myPanel"> Open Me </a>   
  7.     </div>
  8.  
  9.     <div data-role="panel" id="myPanel" data-display="reveal"> 
  10.         <p>This is the panel area</p>
  11.     </div>
  12.  
  13. </div>

You can stylize your panel by adding data-theme to the div just like you can on anything else in jQuery Mobile. The last thing I want to cover is the position of the panel in jQuery Mobile. By default the panel will show up on the left hand side of the screen but if you want it to show on the right you just add one more attribute which is data-position=”right” to the panel div tag. So your code should look like this now.

  1. <div data-role="page" id="page">
  2.  
  3.     <div data-role="content">  
  4.         <p>This is the content area</p>
  5.  
  6.         <a href="#myPanel"> Open Me </a>   
  7.     </div>
  8.  
  9.     <div data-role="panel" id="myPanel" data-display="reveal" data-position="right">   
  10.         <p>This is the panel area</p>
  11.     </div>
  12.  
  13. </div>

Now your panel will open on the right hand side. This allows you to have more than one panel as well one on the left and one on the right. So you can add a new panel with a new id right below the first panel and give one the position of right. Again make sure you add a new attribute of data-position=”right”

  1. <div data-role="page" id="page">
  2.  
  3.     <div data-role="content">  
  4.         <p>This is the content area</p>
  5.  
  6.         <a href="#myPanel"> Open Me </a>   
  7.     </div>
  8.  
  9.     <div data-role="panel" id="myPanel" data-display="reveal"> 
  10.         <p>This is the panel area</p>
  11.     </div>
  12.  
  13.     <div data-role="panel" id="myPanel2" data-display="reveal" data-position="right">  
  14.         <p>This is the panel area</p>
  15.     </div>
  16.  
  17. </div
  18. [/code]
  19.  
  20. <p>The last thing you may want to do is call the open command by swiping left of right. You need to do this through a jQuery javascript call. I add the code below in my head tag and add the "swipeleft" event to the document so we can swipe anyway on the stage.</p>
  21.  
  22. [code language="javascript" highlight="2"]
  23. <script>
  24.     $(document).on("swipeleft", function(event, ui) {
  25.         $("#myPanel2").panel("open");
  26.     });
  27. </script>

Within the swipeleft event I do one simple call to open myPanel2.

  1. <script>
  2.     $(document).on("swipeleft", function(event, ui) {
  3.         $("#myPanel2").panel("open");
  4.     });
  5. </script>

You can download sample source files in the downloads area.

That is how you use the new jQuery Mobile Panels in version 1.3.1. Check out the video below to watch it done

Be Sociable, Share!

Jeff Batt

jeff@kinetic-media.com
No Comments

Post A Comment