Book Image

jQuery Mobile Web Development Essentials - Third Edition

By : Raymond Camden, Andy Matthews
Book Image

jQuery Mobile Web Development Essentials - Third Edition

By: Raymond Camden, Andy Matthews

Overview of this book

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.
Table of Contents (20 chapters)
jQuery Mobile Web Development Essentials Third Edition
About the Authors
About the Reviewer

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>
    <title>First Mobile Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="" />
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
       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!
      <i>Copyright Megacorp &copy; 2015</i>

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.