Working with panels

The next widget we will discuss is the panel widget. The panel widget sits on the left- or right-hand side of your page and can be shown or hidden dynamically. Because of the limited real estate on mobile devices, panels are a nice way to hide navigation or other content until the user requests for them.

Creating a panel in jQuery Mobile is simple. First, add a new <div> block with data-role of panel. This must be done inside the div block that defines your page, and should be outside of the content region. The code in Listing 7-10 demonstrates an example of this:

Listing 7-8: test_panel.html
<div data-role="page" id="first">

   <div data-role="panel" id="leftPanel">
         This is the left panel.

         <p>
               <a data-role="button" data-rel="close">Close</a>
         </p>

   </div>

   <div data-role="header">
         <h1&gt...