jQueryMobile App using Navbars For Android and BlackBerry

In this post we describe Step by step How to create a jQueryMobile App using Navbars For Android and BlackBerry.

In this article we'll build from scratch in 20 minutes a small jQuery Mobile HTML5 App using Navbars at both  header and footer , for use on all kind of Mobile Devices  : Nexus Galaxy, BlackBerry, Acer , Nokia, iPad, iPhone, and more...
This Mobile App can be downloaded from the following GitHub repository:
https://github.com/CarmelSoftware/jQueryMobile_Navbars
This small Mobile App shows like this:

This is how it is displayed on the Ripple Mobile emulator:

jQueryMobile App using Navbars For Android and BlackBerry 

For this tutorial we will need the jQuery Mobile and the jQuery Frameworks, therefore go to http://jquerymobile.com/ and to  the  jQuery official web site  and copy the URLs of the latest version of the frameworks on CDN  . We  will also need a Mobile Emulator, for testing purposes, so please follow this 5 minutes tutorial on installing the Ripple Mobile Emulator.

There is a more detailed explanation on installing the frameworks and the emulator,  at this "First jQueryMobile App" Tutorial.  :

After you got the frameworks, add the references to a new HTML5 file:

1) Header's Navbar with Shadows and Round Corners:

Write a div to be a Page of our jQueryMobile App , and insert another <div> in it , to be its Header:

We use the data-role jQuery Mobile directive to define a "navbar" inside the Header.

This Navbar will hold a <ul> list which its <li> list items will contain jQuery Mobile Buttons , based on <a> hyperlinks.

Also, we add to the three buttons , Icons, shadows and round corners, using jQuery Mobile classes.

Next, if you like, add some text to the page, and some more buttons:

2) Footer's Navbar with Horizontal Grouping, Icons , Shadows and Round Corners:

Next, we add a Navbar to the Footer, which is a fixed footer :

Again, we create a <ul> list with some <a> buttons in it. They will have icons, defined with the data-icon directive.

But this time we do not add shadows nor round corners, to attain a more compact group of Navbar buttons.

The complete list of icons can be found at the  jQuery Mobile official web site.

We used the data-position "fixed" directive at the header and the footer, in order to stuck them while the user is scrolling the page.  

Now let's open our jQuery Mobile App in the Ripple emulator to check it:

 As you can see, the Navbar at the Header has shadows and round corners, making it more appealing and good looking:

 The Footer Navbar that we did , contains five buttons with icons, but we refused to add shadows and round corners. However, it looks very nice either:

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

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

Happy programming.....

      by Carmel Schvartzman

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