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
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>Test Panel</h1> </div> <div role="main" class...