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:
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.
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 ,
by Carmel Schvartzman
כתב: כרמל שוורצמן