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:

 

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

 

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:

 

jQuery Mobile - widget Panel

 

 

Read more about jQuery Mobile Panels

 

I want to learn more about advanced customization of the Sliding Panel

  • (required)
  • Should be Empty:
In a nutshell: we DO NOT share your information with anyone. Learn more about our Privacy Policy.

 

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

What do you think of this post?

2 Responses to “Creating Sliding Panels in jQuery Mobile”

  1. DenimTornado July 22, 2013 at 1:11 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 July 23, 2013 at 12:30 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 ;-).

Leave a Reply

Create Mobile Websites In Minutes

Build Professional Mobile Websites

Read more about our Appcropolis Mobile Builder.

Over 50% of Internet traffic originates from smartphones and mobile devices. Use Appcropolis Mobile Builder to create your next mobile website. Save time, money, and increase your productivity.

About Our Mobile Builder →

1,000's Of Mobile Templates

Discover and download mobile templates from our Template Gallery

Start with the end in mind. Download any of our mobile templates and learn directly from the code. Save time using the Appcropolis Mobile Builder to create advance pages in just a few clicks.

Check out our Templates →

Get Updates from our Newsletter

Check out the latest news about mobile development and get notifications about new articles and templates added to the site

Stay in touch! When you subscribe to any of the Appcropolis newsletters we will send you only the information that is relevant to you. Learn out about the Appcropolis Mobile Builder and our new mobile templates.

Learn more →

Learn more about Appcropolis Mobile Builder.

' . get_option('firstvisit_successmessage') . '