Creating Sliding Panels in jQuery Mobile

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:

By: Raul Sanchez
Categories: jQuery Mobile, News, Webclips
Posted on: Wednesday, January 30, 2013

2 comment

DenimTornado Monday 22nd, July 2013 - 01:11:10 PM

Hi! Thank you for that tutorial. Can you tell me please, how to open/close panel with data-role="content" or data-role="page"?

sanraul Tuesday 23rd, July 2013 - 12:30:02 PM

DenimTornado, A sliding panel must have its own data-role (panel). I believe you cannot assign two roles to the same element. By default a sliding panel must be a child a jQM page. I am sure you can use Javascript to manipulate the DOM and transform a page into a panel --that might by an interesting tutorial ;-).