Wednesday, June 10, 2015

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:

jQueryMobile Panels For Android and BlackBerry

jQueryMobile Panels For Android and BlackBerry   1



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 :
jQueryMobile Panels For Android and BlackBerry  2



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:
jQueryMobile Panels For Android and BlackBerry   3



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 :
jQueryMobile Panels For Android and BlackBerry    4


Now add a "main" div including text and a button which will open the Panel, and will be coded this way:
jQueryMobile Panels For Android and BlackBerry   5



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

jQueryMobile Panels For Android and BlackBerry   6





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

jQueryMobile Panels For Android and BlackBerry   7




And this is how the jQuery Mobile Panel looks like:


jQueryMobile Panels For Android

jQueryMobile Panels

Panels For Android and BlackBerry



Hoping this post was helpful for you...


      Carmel Schvartzman


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