Search icon CANCEL
Subscription
0
Cart icon
Close icon
You have no products in your basket yet
Save more on your purchases!
Savings automatically calculated. No voucher code required
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
$9.99 | ALL EBOOKS & VIDEOS
Save more on purchases! Buy 2 and save 10%, Buy 3 and save 15%, Buy 5 and save 20%
jQuery Mobile Web Development Essentials-Third Edition - Third Edition
jQuery Mobile Web Development Essentials-Third Edition - Third Edition

jQuery Mobile Web Development Essentials-Third Edition: Build a powerful and practical jQuery-based framework in order to create mobile-optimized websites, Third Edition

By Raymond Camden , Andy Matthews
$39.99 $9.99
Book Mar 2016 266 pages 3rd Edition
eBook
$39.99 $9.99
Print
$48.99
Subscription
$15.99 Monthly
eBook
$39.99 $9.99
Print
$48.99
Subscription
$15.99 Monthly

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now
Table of content icon View table of contents Preview book icon Preview Book

jQuery Mobile Web Development Essentials-Third Edition - Third Edition

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 be covering the following topics:

  • Creating a simple HTML page

  • Adding jQuery Mobile to the page

  • Updating 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 to use similar filenames.

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 viewed on a mobile device. Not at all! But it may not be usable on a mobile device. It may be hard to read (the text may be too small). It may be too wide. It may use forms that don't work well on a touchscreen. We don't know the kinds of problems we will face until we start testing (and we've all tested our websites on mobile devices to see how well they work, right?).

Let's 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; 2015</i>
    </p>
  </body>
</html>

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

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

Wow, the text is in a barely readable font size. 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. This wasn't said to minimize the amount of work done to create those files or to play down how powerful they are, but to emphasize that using jQuery Mobile means that 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 it is guaranteed (as much as anything like this can be) to be online and available. Multiple websites are already using these CDN hosted files. This means that when users hit your website, they may already have the resources in their cache. For this book, we will be making use of the CDN hosted files. Just for this first example, we'll download the ZIP file and extract the files we need.

Tip

I recommend doing this anyway for the times when you're on an airplane and wanting to whip up a quick mobile website.

To grab the files, visit http://jquerymobile.com/download. There are a few options here, but you want the ZIP file option. Go ahead and download the 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 content from the ZIP file:

Note

An important note: at the time this book was written, jQuery Mobile was at version 1.4.5. Obviously, by the time you read this book, a later version may be released. The filenames you see listed in the previous screenshot are version-specific, so keep in mind that they may look a bit different for you.

The ZIP file contains demos and both the minified and regular versions of the jQuery Mobile framework. Additional files are provided for theming and other purposes, but your main concern will be with jquery.mobile-1.4.5.min.css and jquery.mobile-1.4.5.min.js. You will typically want to use the minified version in your production apps though. The images folder contains various images used by jQuery Mobile's CSS file. Of course, you also need to include the jQuery library.

Note

You can download this separately at http://www.jquery.com.

Implementing jQuery Mobile


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

  1. First, add the HTML5 DOCTYPE declaration to the page:

    <!DOCTYPE html>
    

    This is used to help inform the browser about the type of content it will be dealing with

  2. Add a viewport meta tag:

    <meta name="viewport" content="width=device-width, initial-scale=1">
    

    This will help set better defaults for pages when viewed on a mobile device

  3. Finally, the CSS, the 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 these:

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.4.5.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.4.5.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; 2015</i>
    </p>
  </body>
</html>

For the most part, this version is the exact same as listing 1, except for the addition of the DOCTYPE declaration, the CSS link, and our two JavaScript libraries. Notice that we pointed to the hosted version of the jQuery library. It's perfectly fine to mix local JavaScript files and remote ones. If you want to ensure that you can 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 iOS 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 and easier to read it is. 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 Document Object Model (DOM). 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 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.4.5.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

<div data-role="page">

   <div data-role="header"><h1>Welcome</h1></div>

   <div role="main" class="ui-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">
   <h4>Copyright Megacorp &copy; 2015</h4>
   </div>
   
</div>

</body>
</html>

Compare the previous code snippet to listing 1-2 and you will see that the main difference was the addition of the div blocks. One div block defines the page. Notice that 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. The header and footer blocks use data-role, which should give you a clue that we're defining a role for each of the blocks. The center div block, the one for content, uses the role attribute instead of data-role and adds a class. This is a special exception where jQuery Mobile (most recently) has switched to using a class directly to help speed up the initial layout of the page. As we stated earlier, these data attributes mean nothing to the browser itself, but jQuery Mobile can recognize them and enhance them.

Let's look at the new version of the page:

Notice right away that both the header and footer now have a gray 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. The header and footer were enhanced automatically by the jQuery Mobile JavaScript library, while the use of the ui-class style on the main content made use of the CSS provided with the framework. This is a theme you will 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 or a bit of CSS.

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 improve the mobile experience of 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.

Left arrow icon Right arrow icon

Key benefits

  • Build websites with jQuery Mobile that work beautifully across a wide range of mobile devices
  • Become a competent jQuery Mobile developer and learn the building blocks of jQuery Mobile’s component-driven design
  • This book covers key concepts but with a focus on providing the practical skills required

Description

jQuery Mobile is a HTML5-based touch-optimized web framework. jQuery Mobile can be used to build responsive cross-platform websites and apps for a wide range of smartphones, tablets, and desktop devices. The jQuery Mobile framework can be integrated with other mobile app frameworks such as PhoneGap, IBM Worklight, and more. Introduction to jQuery Mobile explains how to add the framework to your HTML pages to create rich, mobile-optimized web pages with minimal effort. You’ll learn how to use jQuery Mobile’s automatic enhancements and configure the framework for customized, powerful mobile-friendly websites. We then dig into forms, events, and styling. You'll see how jQuery Mobile automatically enhances content, and will find out how to use the JavaScript API to build complex sites. We’ll introduce you to how jQuery Mobile can be themed as well looking into how JavaScript can be used for deep sets of customizations. The examples are ready to run and can be used to help kick-start your own site. Along the way, you will leverage all the concepts you learn to build three sample mobile applications.

What you will learn

[*] Create mobile-optimized sites using simple HTML [*] Structure your sites so users can browse them on mobile devices [*] Find out how to work with multiple pages in the JQM framework and embed multiple pages in HTML files [*] Enhance simple pages using various toolbars [*] Include mobile-optimized forms for interactive sites [*] Convert desktop sites into mobile versions [*] Use HTML5’s local storage feature in jQuery Mobile to include persistent client-side storage [*] Explore the rich sets of widgets and themes available and discover how to modify them for use in your jQuery Mobile site

Product Details

Country selected

Publication date : Mar 28, 2016
Length 266 pages
Edition : 3rd Edition
Language : English
ISBN-13 : 9781783555055
Category :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now

Product Details


Publication date : Mar 28, 2016
Length 266 pages
Edition : 3rd Edition
Language : English
ISBN-13 : 9781783555055
Category :

Table of Contents

20 Chapters
jQuery Mobile Web Development Essentials Third Edition Chevron down icon Chevron up icon
Credits Chevron down icon Chevron up icon
About the Authors Chevron down icon Chevron up icon
About the Reviewer Chevron down icon Chevron up icon
www.PacktPub.com Chevron down icon Chevron up icon
Preface Chevron down icon Chevron up icon
1. Preparing Your First jQuery Mobile Project Chevron down icon Chevron up icon
2. Working with jQuery Mobile Pages Chevron down icon Chevron up icon
3. Enhancing Pages with Headers, Footers, and Toolbars Chevron down icon Chevron up icon
4. Working with Lists Chevron down icon Chevron up icon
5. Getting Practical – Building a Simple Hotel Mobile Website Chevron down icon Chevron up icon
6. Working with Forms and jQuery Mobile Chevron down icon Chevron up icon
7. Creating Grids, Panels, and Other Widgets Chevron down icon Chevron up icon
8. Moving Further with the Notekeeper Mobile Application Chevron down icon Chevron up icon
9. jQuery Mobile Configuration, Utilities, and JavaScript Methods Chevron down icon Chevron up icon
10. Working with Events Chevron down icon Chevron up icon
11. Enhancing jQuery Mobile Chevron down icon Chevron up icon
12. Creating Native Applications Chevron down icon Chevron up icon
13. Becoming an Expert – Building an RSS Reader Application Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Empty star icon Empty star icon Empty star icon Empty star icon Empty star icon 0
(0 Ratings)
5 star 0%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
Filter icon Filter
Top Reviews

Filter reviews by


No reviews found
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.