Introducing jQuery Mobile
jQuery Mobile (http://jquerymobile.com/) is a unified HTML5-based user interface for most popular mobile device platforms. It is based on jQuery (http://jquery.com/) and jQuery UI (http://jqueryui.com/). Our focus in this section is on jQuery Mobile, so let’s get our hands dirty. We’ll start by implementing jQuery Mobile using the example we created in Chapter 3, Extending WordPress Using JSON-API.
Installing jQuery Mobile and theming
Installing jQuery Mobile is straightforward and easy:
-
Open up app_advanced.html and copy and paste the following code directly within the <head> tags:
<meta name="viewport" content="width=device-width, initialscale= 1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/ jquery.mobile-1.1.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"> </script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile- 1.1.1.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/ jquery.min.js"> </script>
-
Now save your code and open up app_advanced.html in your favourite browser. You should be seeing the following screen:
Well, it looks like the webpage has gotten some form of theming, but it looks a little weird. This is because we have not implemented various HTML elements required for jQuery Mobile.
Again, as mentioned in the previous chapter, the code sample assumes that your app has Internet access and hence access to jQuery and jQuery Mobile’s CDN. This might reduce the app’s startup time. To avoid the problem related to having no network or flaky connectivity, one basic thing you can do is to package your app together with a local copy of jQuery and jQuery Mobile.
Let us move on to the next section and see how we can fix this.
jQuery Mobile page template
Let’s go back to app_advanced.html and do some editing. Let us focus on the HTML elements found within <body> tags; change them to look like the following code snippet:
<div id="main" data-role="page"> <div data-role="header"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" id="previous" data-role="button">Previous</a> <a href="#" id="next" data-role="button">Next</a> <!-- <button type="button" id="create" datarole=" button">Create</button> --> <a href="#create_form" data-role="button" datatransition=" slide">Create</a> </div> </div> <div id="contents" data-role="content"></div> </div> <div data-role="page" id="create_form" data-theme="c"> <div data-role="header" addBackBtn="true"> <a href="#" data-rel="back">Back</a> <h1>Create a new Post</h1> </div> <div id="form" style="padding:15px;"> Title: <br /><input type="text" name="post_title" id="post_ title" /><br /> Content: <br /> <textarea name="post_contents" id="post_contents"></textarea> <br /> <input type="submit" value="Submit" id="create_post"/> <div id="message"></div> </div> </div>
Now save your code and open it in your favourite web browser. You should see the following screen:
The app now looks great! Feel free to click on the Next button and see how the app works.
How does this all work? For a start, check out the highlighted lines of code. In the world of HTML5, the additional lines of HTML code we wrote, such as data-role=”page” or data-theme=”c”, are known as custom data attributes. jQuery Mobile makes use of these specifications to denote the things we need in our mobile web app. For example, data-role=”page” denotes that this particular element (in our case, a div element) is a page component. Similarly, datatheme=”c” in our case refers to a particular CSS style. For more information about data theme, feel free to check out http://jquerymobile.com/test/docs/content/content-themes.html.
Animation effects
Now let us try a little bit with animation effects . We can create animation effects by simply leveraging what we know with jQuery. What about jQuery Mobile? There are several animation effects that are distinct to jQuery Mobile, and in this section we will try out animation effects in terms of page transitions.
We will create a page transition effect using the following steps:
-
Click on the Create button, and we will get a page transition effect to a new page, where we see our post creation form.
-
On this Create a new Post form, as usual, type in some appropriate text in the Title and Content fields.
-
Finally, click on the Submit button.
Let’s see how we can achieve the page transition effect:
-
We need to make changes to our code. For the sake of simplicity, delete all HTML code found within your <body> tags in app_advanced.html, and then copy the following code into your <body> tags:
<div id="main" data-role="page"> <div data-role="header"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" id="previous" data-role="button">Previous</a> <a href="#" id="next" data-role="button">Next</a> <!-- <button type="button" id="create" datarole=" button">Create</button> --> <a href="#create_form" data-role="button" datatransition=" slide">Create</a> </div> </div> <div id="contents" data-role="content"></div> </div> <div data-role="page" id="create_form" data-theme="c"> <div data-role="header" addBackBtn="true"> <a href="#" data-rel="back">Back</a> <h1>Create a new Post</h1> </div> <div id="form" style="padding:15px;"> Title: <br /><input type="text" name="post_title" id="post_ title" /><br /> Content: <br /> <textarea name="post_contents" id="post_contents"></ textarea> <br /> <input type="submit" value="Submit" id="create_post"/> <div id="message"></div> </div> </div>
-
Take note that we have used the transition=”slide” attribute, so we have a “slide” effect. For more details or options, visit http://jquerymobile.com/test/docs/pages/page-transitions.html.
-
Now, save your code and open it in your favorite web browser. Click on the Create button, and you will first see a slide transition, followed by the post creation form, as follows:
-
Now type in some text, and you will see that jQuery Mobile takes care of the CSS effects in this form as well:
-
Now click on the Submit button, and you will see a Success message below the Submit button, as shown in the following screenshot:
-
If you see the Success message, as shown in the earlier screenshot, congratulations! We can now move on to extending our PhoneGap app, which we built in Chapter 4, Building Mobile Applications Using PhoneGap.
