jQuery Mobile Web Development Essentials

By Raymond Camden , Andy Matthews
    Advance your knowledge in tech with a Packt subscription

  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Preparing your First jQuery Mobile Project

About this book

jQuery Mobile is a unified, HTML5-based user interface system for all popular mobile device platforms. It is compatible with all major mobile, tablet, e-reader and desktop platforms like iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, and Windows Phone 7.

jQuery Mobile Web Development Essentials will explain how to create mobile-optimized sites with the easiest, most practical HTML/JavaScript framework available and to add the framework to your HTML pages to create rich, mobile-optimized web pages with minimal effort.

Throughout the book, you'll learn details that help you become a pro at mobile web development. You begin with simple HTML and quickly enhance it using jQuery Mobile for incredible mobile-optimized sites. Start by learning the building blocks of jQuery Mobile’s component-driven design. Dig into forms, events, and styling, then finish by building native mobile applications. You will learn how to build websites and apps for touch devices such as iPhone, iPad, Android, and BlackBerry with the recently developed jQuery Mobile library through sample applications of increasing complexity.

Publication date:
May 2012
Publisher
Packt
Pages
246
ISBN
9781849517263

 

Chapter 1. Preparing your First jQuery Mobile Project

You know what jQuery Mobile is, the history of it as well as its features and goals. Now we're actually going to build our first jQuery Mobile website (well, web page) and see how easy it is to use.

In this chapter we will:

  • Create a simple HTML page

  • Add jQuery Mobile to the page

  • Make use of custom data attributes (data-*)

  • Update the HTML to make use of the data attributes jQuery Mobile recognizes

Important preliminary points

You can find all the source code for this chapter in the c1 folder of the ZIP file you downloaded from Github. If you wish to type everything out by hand, we recommend you use similar file names.

 

Important preliminary points


You can find all the source code for this chapter in the c1 folder of the ZIP file you downloaded from Github. If you wish to type everything out by hand, we recommend you use similar file names.

 

Building an HTML page


Let's begin with a simple web page that is not mobile optimized. To be clear, we aren't saying it can't be used on a mobile device. Not at all. But it may not be usable on a mobile device. It may be hard to read (text too small). It may be too wide. It may use forms that don't work well on a touch screen. We don't know what kinds of problems will have at all until we start testing. (And we've all done testing of our websites on mobile devices to see how well they work, right?)

Lets have a look at Listing 1-1:

Listing 1-1: test1.html
<html>
<head>
<title>First Mobile Example</title>
</head>
<body>
<h1>Welcome</h1>
<p>
Welcome to our first mobile web site. It's going to be the best site you've ever seen. Once we get some content. And a business plan. But the hard part is done!
</p>
<p>
<i>Copyright Megacorp &copy; 2012</i>
</p>
</body>
</html>

As we said, nothing too complex, right? Let's take a quick look at this in the browser:

Note

You can also download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Not so bad, right? But let's take a look at the same page in a mobile simulator:

Wow, that's pretty tiny. You've probably seen web pages like this before on your mobile device. You can, of course, typically use pinch and zoom or double click actions to increase the size of the text. But it would be preferable to have the page render immediately in a mobile friendly view. This is where jQuery Mobile enters.

 

Getting jQuery Mobile


In the preface we talked about how jQuery Mobile is "just" a set of files. That isn't said to minimize the amount of work done to create those files, or how powerful they are, but to emphasize that using jQuery Mobile means you don't have to install any special tools or server. You can download the files and simply include them in your page. And if that's too much work, you have an even simpler solution. jQuery Mobile's files are hosted on a Content Delivery Network (CDN). This is a resource hosted by them and guaranteed (as much as anything like this can be) to be online and available. Multiple sites are already using these CDN hosted files. That means when your users hit your site they will already have the resources in their cache. For this book we will be making use of the CDN hosted files, but just for this first example we'll download and extract the bits. I recommend doing this anyway for those times when you're on an airplane and wanting to whip up a quick mobile site.

To grab the bits, visit http://jquerymobile.com/download. There are a few options here but you want the ZIP file option. Go ahead and download that ZIP file and extract it. (The ZIP file you downloaded earlier from Github has a copy already.) The following screenshot demonstrates what you should see after extracting the files from the ZIP file:

Note

Important note: At the time this book was written, jQuery Mobile was preparing for the release of Version 1.1. The released version was 1.0.1. But with 1.1 so close to release, that version is in use. Obviously, by the time you read this book a later version may be released. The file names you see listed in the previous screenshot are version specific, so keep in mind they may look a bit different for you.

Notice the ZIP file contains a CSS and JavaScript file for jQuery Mobile, as well as a minified version of both. You will typically want to use the minified version in your production apps and the regular version while developing. The images folder has 6 images used by the CSS when generating mobile optimized pages. So, to be clear, the entire framework, and all the features we will be talking about over the rest of the book, will consist of a framework of 8 files. Of course, you also need to include the jQuery library. You can download that separately at www.jquery.com.

 

Implementing jQuery Mobile


Ok, we've got the bits, how do we use them? Adding jQuery Mobile support to a site requires the following three steps at a minimum:

  1. 1. First add the HTML 5 doctype to the page:<!DOCTYPE html>. This is used to help inform the browser about the type of content it will be dealing with.

  2. 2. Add a viewport metatag:<meta name="viewport" content="width=device-width, initial-scale="1">. This helps set better defaults for pages when viewed on a mobile device.

  3. 3. Finally - the CSS, JavaScript library, and jQuery itself need to be included into the file.

Let's look at a modified version of our previous HTML file that adds all of the above:

Listing 1-2: test2.html
<!DOCTYPE html>
<html>
<head>
<title>First Mobile Example</title>
<meta name="viewport" content="width=device-width, initial- scale=1">
<link rel="stylesheet" href ="jquery.mobile-1.1.0-rc.1.css" />
<script type="text/javascript" src ="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.1.0- rc.1.min.js"></script>
</head>
<body>
<h1>Welcome</h1>
<p>
Welcome to our first mobile web site. It's going to be the best site you've ever seen. Once we get some content. And a business plan. But the hard part is done!
</p>
<p>
<i>Copyright Megacorp &copy; 2012</i>
</p>
</body>
</html>

For the most part, this version is the exact same as listing 1, except for the addition of the doctype, the CSS link, and our two JavaScript libraries. Notice we point to the hosted version of the jQuery library. It's perfectly fine to mix local JavaScript files and remote ones. If you wanted to ensure you could work offline, you can simply download the jQuery library as well.

So while nothing changed in the code between the body tags, there is going to be a radically different view now in the browser. The following screenshot shows how the Android mobile browser renders the page now:

Right away you see a couple of differences. The biggest difference is the relative size of the text. Notice how much bigger it is and easier to read. As we said, the user could have zoomed in on the previous version, but many mobile users aren't aware of this technique. This page loads up immediately in a manner that is much more usable on a mobile device.

 

Working with data attributes


As we saw in the previous example, just adding in jQuery Mobile goes a long way to updating our page for mobile support. But there's a lot more involved to really prepare our pages for mobile devices. As we work with jQuery Mobile over the course of the book, we're going to use various data attributes to mark up our pages in a way that jQuery Mobile understands. But what are data attributes?

HTML5 introduced the concept of data attributes as a way to add ad-hoc values to the DOM (Document Object Model). As an example, this is a perfectly valid HTML:

<div id="mainDiv" data-ray="moo">Some content</div>

In the previous HTML, the data-ray attribute is completely made up. However, because our attribute begins with data-, it is also completely legal. So what happens when you view this in your browser? Nothing! The point of these data attributes is to integrate with other code, like JavaScript, that does... whatever it wants basically with them. So for example, you could write JavaScript that finds every item in the DOM with the data-ray attribute and change the background color to whatever was specified in the value.

This is where jQuery Mobile comes in, making extensive use of data attributes, both for markup (to create widgets) and behavior (to control what happens when links are clicked). Let's look at one of the main uses of data attributes within jQuery Mobile - defining pages, headers, content, and footers:

Listing 1-3: test3.html
<!DOCTYPE html>
<html>
<head>
<title>First Mobile Example</title>
<meta name="viewport" content="width=device-width, initial- scale=1">
<link rel="stylesheet" href ="jquery.mobile-1.1.0-rc.1.css" />
<script type="text/javascript" src ="http://code.jquery .com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery. mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">Welcome</div>
<div data-role="content">
<p>
Welcome to our first mobile web site. It's going to be the best site you've ever seen. Once we get some content. And a business plan. But the hard part is done!
</p>
</div>
<div data-role="footer">
<i>Copyright Megacorp &copy; 2012</i>
</div>
</div>
</body>
</html>

Compare the previous code snippet to listing 1-2 and you can see that the main difference was the addition of the div blocks. One div block defines the page. Notice it wraps all of the content inside the body tags. Inside the body tag, there are three separate div blocks. One has a role of "header", another a role of "content", and the final one is marked as "footer". All the blocks use data-role which should give you a clue that we're defining a role for each of the blocks. As we stated above, these data attributes mean nothing to the browser itself. But let's look what at what jQuery Mobile does when it encounters these tags:

Notice right away that both the header and footer now have a black background applied to them. This makes them stick out even more from the rest of the content. Speaking of content, the page text now has a bit of space between it and the sides. All of this was automatic once the div tags with the recognized data-roles were applied. This is a theme you're going to see repeated again and again as we go through this book. A vast majority of the work you'll be doing will involve the use of data attributes.

 

Summary


In this chapter, we talked a bit about how web pages may not always render well in a mobile browser. We talked about how the simple use of jQuery Mobile can go a long way to improving the mobile experience for a website. Specifically, we discussed how you can download jQuery Mobile and add it to an existing HTML page, what data attributes mean in terms of HTML, and how jQuery Mobile makes use of data attributes to enhance your pages. In the next chapter, we will build upon this usage and start working with links and multiple pages of content.

About the Authors

  • Raymond Camden

    Raymond Camden is a developer advocate for IBM. His work focuses on the StrongLoop platform, Bluemix, hybrid mobile development, Node.js, HTML5, and web standards in general. He's a published author and presents at conferences and user groups on a variety of topics. Raymond can be reached at his blog (http://www.raymondcamden.com), @raymondcamden on Twitter, or via e-mail at [email protected].

    Raymond Camden is the author of many development books, including Apache Cordova in Action, Manning Publications and Client-Side Data Storage, O'Reilly Media, Inc.

    Browse publications by this author
  • Andy Matthews

    Andy Matthews has been working as a software engineer for nearly 20 years with experience in a wide range of industries and a skillset that includes UI/UX, graphic design, and programming. He is the coauthor of the books Creating Mobile Apps with jQuery Mobile and jQuery Mobile Web Development Essentials by Packt Publishing. He has written for online publications, such as Adobe, NetTuts, and .NET Magazine. He has spoken at conferences all over the country, and has developed a number of projects for the open source community.

    Browse publications by this author
jQuery Mobile Web Development Essentials
Unlock this book and the full library for FREE
Start free trial