Here we see Step by step How to create jQueryMobile Panels For Android and BlackBerryIn 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: