Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying jQuery Mobile Web Development Essentials-Third Edition
  • Table Of Contents Toc
  • Feedback & Rating feedback
jQuery Mobile Web Development Essentials-Third Edition

jQuery Mobile Web Development Essentials-Third Edition - Third Edition

By : Raymond Camden, Matthews
3 (1)
Buy this Book
close
close
jQuery Mobile Web Development Essentials-Third Edition

jQuery Mobile Web Development Essentials-Third Edition

3 (1)
By: Raymond Camden, Matthews
Buy this Book

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 (15 chapters)
close
close
close
Preface
Icon
What is jQuery Mobile?
Icon
What's the cost?
Icon
What do you need to know?
Icon
What about native apps?
Icon
Help!
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Preparing Your First jQuery Mobile Project
chevron up
Icon
1. Preparing Your First jQuery Mobile Project
Icon
Important preliminary points
Icon
Building an HTML page
Icon
Getting jQuery Mobile
Icon
Implementing jQuery Mobile
Icon
Working with data attributes
Icon
Summary
2
2. Working with jQuery Mobile Pages
Icon
2. Working with jQuery Mobile Pages
Icon
Important preliminary points
Icon
Adding multiple pages to one file
Icon
jQuery Mobile, links, and you
Icon
Working with multiple files
Icon
jQuery Mobile and URLs
Icon
Additional customization
Icon
Summary
3
3. Enhancing Pages with Headers, Footers, and Toolbars
Icon
3. Enhancing Pages with Headers, Footers, and Toolbars
Icon
Important preliminary points
Icon
Adding headers
Icon
Icon sneak peek
Icon
Working with back buttons
Icon
Working with footers
Icon
Creating fixed and fullscreen headers and footers
Icon
Working with navigation bars
Icon
Summary
4
4. Working with Lists
Icon
4. Working with Lists
Icon
Creating lists
Icon
Working with list features
Icon
Summary
5
5. Getting Practical – Building a Simple Hotel Mobile Website
Icon
5. Getting Practical – Building a Simple Hotel Mobile Website
Icon
Welcome to Hotel Camden
Icon
The home page
Icon
Finding the hotel
Icon
Listing the hotel rooms
Icon
Contacting the hotel
Icon
Summary
6
6. Working with Forms and jQuery Mobile
Icon
6. Working with Forms and jQuery Mobile
Icon
Before you begin
Icon
What jQuery Mobile does with forms
Icon
Working with mini fields
Icon
Summary
7
7. Creating Grids, Panels, and Other Widgets
Icon
7. Creating Grids, Panels, and Other Widgets
Icon
Laying out content with grids
Icon
Working with collapsible content
Icon
Using popups
Icon
Responsive tables
Icon
Working with panels
Icon
Using filterable widgets
Icon
Working with tabs
Icon
Summary
8
8. Moving Further with the Notekeeper Mobile Application
Icon
8. Moving Further with the Notekeeper Mobile Application
Icon
What is a mobile application?
Icon
Designing your first mobile application
Icon
Adding functionality with JavaScript
Icon
Summary
9
9. jQuery Mobile Configuration, Utilities, and JavaScript Methods
Icon
9. jQuery Mobile Configuration, Utilities, and JavaScript Methods
Icon
Configuring jQuery Mobile
Icon
Using jQuery Mobile utilities
Icon
jQuery Mobile widget and form utilities
Icon
Summary
10
10. Working with Events
Icon
10. Working with Events
Icon
Working with physical events
Icon
Handling page events
Icon
Summary
11
11. Enhancing jQuery Mobile
Icon
11. Enhancing jQuery Mobile
Icon
What's possible for designs?
Icon
The visual building blocks of jQuery Mobile
Icon
The basics of jQuery Mobile theming
Icon
Creating and using a custom theme
Icon
Updating the Notekeeper app
Icon
Summary
12
12. Creating Native Applications
Icon
12. Creating Native Applications
Icon
HTML as a native application
Icon
Summary
13
13. Becoming an Expert – Building an RSS Reader Application
Icon
13. Becoming an Expert – Building an RSS Reader Application
Icon
RSS reader – the application
Icon
Creating the RSS reader application
Icon
Summary
14
Index
Icon
Index

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:

Implementing jQuery Mobile

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.

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
jQuery Mobile Web Development Essentials-Third Edition
End of Section 1
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon