Simple First jQueryMobile App For Android and BlackBerry in 20 minutes

In this post we describe Step by step How to create a Simple First jQueryMobile App For Android and BlackBerry in 20 minutes.

In this article we make from scratch in 20 minutes a small jQuery Mobile HTML5 App with buttons and paging , for use on the kind of Mobile Device that you wish: Nexus Galaxy, BlackBerry, Acer , Nokia, iPad, iPhone, and more...
This jquery Mobile App will show as the following:

Simple First jQueryMobile App For Android and BlackBerry in 20 minutes 

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

First , we need the jQuery Mobile files, so browse to http://jquerymobile.com/and get the latest version of the framework  :

Since jQuery Mobile uses jQyery, do the same thing to get the jQuery Framework from the  jQuery official web site:

Next, we'll need an emulator, to see how our App will show on Mobile devices. 

So open the Chrome Webstore and search for the FREE "Ripple" Emulator:

After the installation check that the Emulator has access to file URLs , and that it's enabled:

Open the jQueryMobile and the jQuery downloaded files and find the following .js javascript files:

Copy them to a "script" folder in your project. Do the same which the "jquery.mobile-X.X.X.css" CSS file, inside a "style" folder (the "X.X.X" are for the current CSS version of the file).
Add all the references to a new HTML5 file at the "head" element :

Next, let's write a div to contain the first Page of our jQueryMobile App:

Take a close look at the code: there is a <div> with ID="page1" : that is our first page. Inside there are three <div>s for a Header , Content and a Footer, all of them identified by the "data-role" jQueryMobile  directive. Also, we add some style using the "data-theme" directive.

Let's try it. Open Chrome and click the Ripple button at the top-right:

The HTML page will open and you can choose the kind of Mobile Device that you want: Nexus Galaxy, BlackBerry, Acer, Nokia, iPad, iPhone, and more:

Provided everything's ok, we proceed to add a button to open a second page, as follows:

The directives are as before, and we add a new one data-transition directive for the animation between pages.
Now let's append a second page as follows:

We did the same as before, but this time there are two buttons, one for the previous page and another for the next one.

Let's see how it is displayed at the mobile emulator:

Click the button to browse to the second page:

Next, let's add a third page as follows:

As you see, now the button reference points to the second page. Also, we try different transitions : pop, flip, slide, slideup, slidedown, fade....Choose the one that you wish...
And finally, let's add some text to make it more realistic:

Do the same for all pages:

Now let's try our Mobile App:

All three pages look fine , and the animations are attractive: Flip:

 jQueryMobile SlideDown animation:

 Fade animation:

That's it....Hoping you enjoyed this article  ,

Happy programming.....

      by Carmel Schvartzman

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