Thursday, May 21, 2015

jQueryMobile App using header and footer Buttons For Android and BlackBerry

In this post we describe Step by step How to create a jQueryMobile App using header and footer Buttons For Android and BlackBerry.
In this article we build from scratch in 20 minutes a small jQuery Mobile HTML5 App using Buttons with Grouping , icons , header and footer buttons , fixed positions  , for use on all kind of Mobile Devices  : Nexus Galaxy, BlackBerry, Acer , Nokia, iPad, iPhone, and more...
This Mobile App shows like this:
jQueryMobile App using header and footer Buttons For Android and BlackBerry

jQueryMobile App using header and footer Buttons For Android and BlackBerry   1


jQueryMobile App using header and footer Buttons For Android and BlackBerry 


The complete code for this App can be downloaded from this GitHub rep:
https://github.com/CarmelSoftware/jQueryMobile_Buttons


We need the jQuery Mobile and the jQuery Frameworks, so go to http://jquerymobile.com/ and to  the  jQuery official web site  to get the latest version of the frameworks on CDN  . Also we  need a Mobile Emulator, to test our App on different Mobile devices. Follow this 5 minutes tutorial on installing a Mobile Emulator.
A more detailed explanation on downloading the frameworks and emulator, can be found at this "First jQueryMobile App" Tutorial.  :

jQueryMobile App using header and footer Buttons For Android and BlackBerry   2



1) Header's Buttons with Icons , Shadows and Round Corners:


Let's write a div to hold the first Page of our jQueryMobile App , beginning with its Header:
jQueryMobile App using header and footer Buttons For Android and BlackBerry   3

Use the data-role jQuery Mobile directive to define a Page and a Header.
We add here two buttons with Icons, shadows and round corners.

2) Content's Buttons with Horizontal Grouping, Icons , Shadows and Round Corners:

Next, we create the content of the Page, grouping two buttons using the data-role "controlgroup" directive and data-type "horizontal" (you can use also the "vertical" option) :

jQueryMobile App using header and footer Buttons For Android and BlackBerry  4


Notice that at the Header we use the data-position "fixed" directive, for fixing the header while the user is scrolling the page. For demonstrating this, add some text to the contents:


jQueryMobile App using header and footer Buttons For Android and BlackBerry   5


3) Footer's Buttons with Horizontal Grouping, Icons , Shadows and Round Corners:

Now we do the same at the Footer of the App, grouping two buttons with icons, shadows and round corners:

jQueryMobile App using header and footer Buttons For Android

4) PopUp Dialog's Buttons with Icons , Shadows and Round Corners:

Finally, we can create a Dialog to be displayed as a PopUp, with buttons with transitions, icons, shadows etc.

jQueryMobile App using header and footer Buttons


For this App we added some style in a CSS file as follows:


jQueryMobile App  Buttons


Now let's try our Mobile App:

jQueryMobile App  Buttons For Android and BlackBerry


The dialog popup:

jQueryMobile App using   Buttons For Android




Scrolling the page down:


jQueryMobile App

That's it....Hope you've enjoyed this article  ,

Happy programming.....

      by Carmel Schvartzman


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