jQueryMobile Panels For Android and BlackBerry

Here we see Step by step How to create jQueryMobile Panels For Android and BlackBerry

In this post we create in 10 minutes a jQuery Mobile App using sliding Panels,  for use on all Mobiles  : Nexus , BlackBerry, Nokia, iPad, iPhone,  Acer ,  ...
The additional content displayed in the Panel will be shown in Reveal mode, which together with the Push and the Overlay modes, are the ways to the Panel to be displayed.
This App will look like this:

How to create jQueryMobile Panels For Android and BlackBerry

We'll need the  jQuery and jQueryMobile Frameworks . Therefore , go to  http://jquerymobile.com/ and to the  jQuery web site , and retrieve the latest versions of jQuery and jQueryMobile via Content Delivery Network (CDN)  . Because we  will also use a Mobile Emulator, please learn this 5 minutes tutorial about Ripple Emulator setup.

After you got the URLs of the frameworks, add them to the Head element of the HTML5 file, as follows :

This is the most important part of this tutorial. Here you add your Panel to the App. The Panel must be add before or after the Header/Footer parts of the Page.
In the Panel, you define a data-role="panel", and a data-display="reveal" , which you can change to "Overlay" or to "Push" options.
Then you add a data-swipe-close="true", in order to allow closing the Panel by swiping the page. Elsewhere, the Panel will be closed by clicking the "Close" Button, by pressing the "Esc" keyboard key, or by clicking anywhere outside the Panel:

Then, add a data-role=header including a NavBar , by using the data-role="page" and also the data-role="header" , together with a "fixed" attribute to stack it as the user scrolls the screen :

Now add a "main" div including text and a button which will open the Panel, and will be coded this way:

Finally, we code the markup for the Footer of the page , including a Navbar,  as follows:

We customized this Mobile App by adding the following styles inside a CSS3 file in the Styles folder:

And this is how the jQuery Mobile Panel looks like:

Hoping this post was helpful for you...

      Carmel Schvartzman

כתב: כרמל שוורצמן