O'Reilly logo

jQuery Mobile Web Development Essentials Second Edition by Andy Matthews, Raymond Camden

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Working with panels

The last 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 it.

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

Code 7-10: 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> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required