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:
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.
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:
For customizing this App we added some style in a CSS file as follows:
That's it....Hope you've enjoyed this article ,
by Carmel Schvartzman
כתב: כרמל שוורצמן