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 

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.  :

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:

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) :

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:

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:

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.

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

Now let's try our Mobile App:

The dialog popup:

Scrolling the page down:

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

Happy programming.....

      by Carmel Schvartzman

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