You probably noticed that there are many mobile applications that make use of a panel that slide from the side of the screen and display additional information –typically more navigation options. These sliding panels are very useful since the allow a quick display of information that is typically accessible from any where in the application.

jQuery Mobile 1.3.0 now introduced an enhanced version of the Panels Widget. The new version can reveal content, giving the impression that the panel has always been underneath the active view. You can also specify the panel to be pushed which makes the panel feel like an extension of the current page. Finally, a panel can be setup as reveal, this will simple overlay the panel on top of the visibel content. You can also make the panel appear from the left or from the right.

Here is how you can open a panel using Javascript:

1

$( "#mypanel" ).panel( "open" , options );

$( "#mypanel" ).panel( "open" , options );

Open a panel from an anchor tag by linking to the panel ID:

1
2
3
4
5
6
7
8
9
10

<div data-role="page">
    <div data-role="panel" id="mypanel">
        <!-- panel content goes here -->
    </div><!-- /panel -->
 
    <!-- header -->
    <!-- content -->
        <a href="#mypanel">Open panel</a>
    <!-- footer -->
</div><!-- page -->

<div data-role="page">
    <div data-role="panel" id="mypanel">
        <!-- panel content goes here -->
    </div><!-- /panel -->

    <!-- header -->
    <!-- content -->
        <a href="#mypanel">Open panel</a>
    <!-- footer -->
</div><!-- page -->

Left or Right

If you would like to open the panel in an specific side of the screen, you must specified the the attribute data-position in the main panel container, and indicate in which side you with the panel to open:

1
2
3
4
5

<!-- right side -->
<div data-role="panel" id="mypanel" data-position="right">...</div>
 
<!-- left side -->
<div data-role="panel" id="mypanel" data-position="left">...</div>

<!-- right side -->
<div data-role="panel" id="mypanel" data-position="right">...</div>

<!-- left side -->
<div data-role="panel" id="mypanel" data-position="left">...</div>

Here is a great video tutorial form Pinehead.tv  that explains in detailes how to build a panel: