Introducing jQuery Mobile
The newest member of the jQuery family of projects is jQuery Mobile. A good way to describe what jQuery Mobile is to think of it as jQuery UI for mobile devices. If you have wanted to write mobile-optimized UIs over your applications, jQuery Mobile is a library that you will want to add to your bag of tricks. Like jQuery UI, jQuery Mobile is themeable. This article makes two assumptions. First, you are familiar with jQuery and second, you are familiar with jQuery UI. If you are not familiar with jQuery or jQuery UI, I suggest that you take a moment to familiarize yourself with those libraries. Fortunately, the websites for these projects (jquery.com and jQueryUI.com respectively) are replete with comprehensive documentation and code examples. jQuery Mobile is no different. The official website for jQuery Mobile is jquerymobile.com. As of this writing, jQuery Mobile 1.0 Beta 3 has been released. Its beta status notwithstanding, jQuery Mobile is ready for primetime and has been incorporated into many applications already. In this article, I will cover what you need to get started with some simple examples that illustrate how to create one page and multi-page apps. In addition, I’ll touch upon the theming capabilities in jQuery Mobile. | " |
A good way to think of jQuery Mobile is that it is jQuery UI for mobile devices.
| " |
What You Need to Get Started You need three files to get started with jQuery Mobile (the X in the name is a placeholder for the version): In addition to these three files, you will also need the supporting image files. You can download these resources from the jQuery Mobile site: jquerymobile.com/download. The zip file contains both minified and unminified js files. The following code snippet shows how to bootstrap jQuery Mobile: <!--CSS-->
<link rel="stylesheet" href="jquery.mobile
-1.0b3.min.css"/>
<!--jQuery Core Library -->
<script type="text/javascript" src="jquery-
1.6.4.min.js"></script>
<!--jQuery Mobile Library -->
<script type="text/javascript" src="jquery.mobile-
1.0b3.min.js"></script>
Like all things jQuery related, everything starts with the core jQuery library, in this case, jquery-1.6.4.min.js. Like jQuery UI, jQuery Mobile extends the core library. The third file is the required CSS to format and theme the pages. This is exactly how jQuery UI works. Once you have the necessary js libraries and CSS in your project, you are ready to get up and running with jQuery Mobile. The Basic Page Template Let’s start with the simplest thing possible to get a page up and running. The following code, illustrated in Figure 1, shows the basic template that all jQuery Mobile pages would follow: 
Figure 1: The code in Listing 1 rendered on an iPhone.I need to point out two things in this example. First, you can see the viewport metatag working. The page has been formatted to fit within the iPhone display. Second, take a moment to review the code in Listing 1. Take note of the data-role attribute. This is what jQuery Mobile uses to identify the page components. The outer div is a page, which has a header, content and footer. Working with Multiple Pages, Transitions and Themes In the real world, our applications consist of more than just one page. This is where jQuery really shines because jQuery makes it easy to manage multiple pages and the transitions between those pages. For example, from page 1 to 2, you may want page 2 to fade in. Or, you may want page 2 to slide from the bottom, top or side. Or, you may want page 2 to flip as it displays in place of page 1. In order to see how these various transitions work, you can visit this demo page: http://jquerymobile.com/demos/1.0b3/docs/pages/page-transitions.html. Ideally, you will want to visit this page with a mobile device so that you can see exactly how jQuery Mobile optimized pages will appear. If you visit the site on your non-mobile device, make sure you use a webkit browser such as Chrome or Safari. With these browsers, you will get a sense of how the various page transitions will appear on a mobile device. Thanks to Irwin Hurst of CEI’s Microsoft Practice for pointing out this fact when I circulated a draft of this article for peer review. Listing 2 illustrates an html fragment of the code required to handle multiple pages. Note: For the sake of brevity, I have omitted the html and head tags. In many ways, the multi-page example works like the tabs and accordion widgets in jQuery UI. In both cases, there are nested divs, some of which have their display style set to “none.” It’s not something you have to do explicitly. Rather, jQuery Mobile handles that for you. Notice the anchor tags on each page. Each references the other page. Also note the data-transition attribute. This is how you control the way the linked page is displayed. In this example, from page 1, page 2 will flip. Page 1 flips and it appears like flipping a piece of paper over. In this case, page 2 is on the other side. From page 2, page 1 fades in and replaces page 2 in the display. It’s a very simple feat to accomplish and best of all, jQuery Mobile does the heavy lifting for you! Another element to note for the links is the data-role attribute. The links in this example will be displayed as buttons. Figure 2 illustrates how page 1 will appear on an iPhone. 
Figure 2: The data-role attribute determines how a given element will be displayed.You can also display a page as a dialog. Revising the example slightly, the second page has been refactored into its own html file. The following is the revised link to page 2 in the first page: <p><a href="page2.html" data-role="button"
data-rel="dialog">View Page 2</a></p>
The data-rel attribute specifies that the link target is to be displayed as a dialog. The code for page 2 is nearly identical to what is listed in Listing 2. I did make one change to the page div: <div data-role="page" id="page2" data-theme="e">
The data-theme attribute controls which theme, or as jQuery Mobile refers to them as swatches, is applied to the page. I also removed the button to navigate back to page 1 because dialogs are modal. jQuery Mobile adds a close button to the header for us. When that button is clicked, the display reverts back to the page that called the dialog. Figure 3 illustrates how page 2 appears. 
Figure 3: This dialog illustrates the Swatch E theme. | & | | 
By: John V. Petersen John Petersen has been developing software for over 20 years. It all started when, as a staff accountant, he was asked to get involved in a system upgrade to replace an old IBM Series 1 computer (about the size of a large refrigerator!). Those first programs were written in Clipper, Summer 87. Since that time, John’s tools included dBase, FoxBase, Visual FoxPro and Visual Basic. An early adopter of .NET, he then decided to go to law school. After practicing law for a few years, John realized that technology was a lot more interesting than the law. Today, John focuses on ASP.NET development and is having more fun than ever solving business problems for clients. John is a Practice Director for Custom Application Development at Neudesic, a Microsoft Gold Partner and the Trusted Technology Partner in Business Innovation. A 9-time recipient of Microsoft’s Most Valuable Professional Award, John is a current ASP.NET/IIS MVP. John is also an ASP Insider and is the INETA Mentor for PA and WV. John is the author of several books and is a frequent contributor to CODE Magazine and DevPro magazine. John holds a BS in Business Administration from Mansfield University, an MBA in Information Systems from St. Joseph’s University and a JD from the Rutgers School of Law – Camden.
email: johnvpetersen@gmail.com
blog: codebetter.com/johnvpetersen
twitter: @johnvpetersen
john.v.petersen@comcast.net |