You are previewing jQuery Mobile Web Development Essentials - Third Edition.
O'Reilly logo
jQuery Mobile Web Development Essentials - Third Edition

Book Description

Build a powerful and practical jQuery-based framework in order to create mobile-optimized websites

About This Book

  • 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

  • Who This Book Is For

    This book is for any web developer who is looking to create mobile-optimized websites. Basic knowledge of HTML is required. Minor familiarity with JavaScript would help but is not required.

    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

  • In Detail

    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.

    Style and approach

    Through a set of easy to follow instructions, we’ll show you how to use jQuery Mobile’s features one easy-to-use widget at a time. You’ll see examples for each feature as well as screenshots to demonstrate what they should look like on a mobile device. You can then take these example files and modify them as you learn to experiment.

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the code file.

    Table of Contents

    1. jQuery Mobile Web Development Essentials Third Edition
      1. Table of Contents
      2. jQuery Mobile Web Development Essentials Third Edition
      3. Credits
      4. About the Authors
      5. About the Reviewer
        1. eBooks, discount offers, and more
          1. Why subscribe?
      7. Preface
        1. What is jQuery Mobile?
        2. What's the cost?
        3. What do you need to know?
        4. What about native apps?
        5. Help!
        6. What this book covers
        7. What you need for this book
        8. Who this book is for
        9. Conventions
        10. Reader feedback
        11. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      8. 1. Preparing Your First jQuery Mobile Project
        1. Important preliminary points
        2. Building an HTML page
        3. Getting jQuery Mobile
        4. Implementing jQuery Mobile
        5. Working with data attributes
        6. Summary
      9. 2. Working with jQuery Mobile Pages
        1. Important preliminary points
        2. Adding multiple pages to one file
        3. jQuery Mobile, links, and you
        4. Working with multiple files
        5. jQuery Mobile and URLs
        6. Additional customization
          1. Page titles
          2. Prefetching content
          3. Changing page transitions
        7. Summary
      10. 3. Enhancing Pages with Headers, Footers, and Toolbars
        1. Important preliminary points
        2. Adding headers
        3. Icon sneak peek
        4. Working with back buttons
        5. Working with footers
        6. Creating fixed and fullscreen headers and footers
          1. Fullscreen headers and footers
        7. Working with navigation bars
          1. Persisting navigation bar footers across multiple pages
        8. Summary
      11. 4. Working with Lists
        1. Creating lists
        2. Working with list features
          1. Creating inset lists
          2. Creating list dividers
            1. Autodividers
          3. Creating lists with count bubbles
          4. Using thumbnails and icons
          5. Creating split button lists
        3. Summary
      12. 5. Getting Practical – Building a Simple Hotel Mobile Website
        1. Welcome to Hotel Camden
        2. The home page
        3. Finding the hotel
        4. Listing the hotel rooms
        5. Contacting the hotel
        6. Summary
      13. 6. Working with Forms and jQuery Mobile
        1. Before you begin
        2. What jQuery Mobile does with forms
          1. Working with radio buttons and checkboxes
          2. Working with select menus
            1. Custom select fields
          3. Search, toggle, and slider fields
            1. Search fields
            2. Flip switch fields
            3. Slider fields
          4. Using native form controls
        3. Working with mini fields
        4. Summary
      14. 7. Creating Grids, Panels, and Other Widgets
        1. Laying out content with grids
          1. Making responsive grids
        2. Working with collapsible content
        3. Using popups
        4. Responsive tables
        5. Working with panels
        6. Using filterable widgets
        7. Working with tabs
        8. Summary
      15. 8. Moving Further with the Notekeeper Mobile Application
        1. What is a mobile application?
        2. Designing your first mobile application
          1. Listing out the requirements
            1. Building your wireframes
            2. Designing the Add Note wireframe
            3. The Display Notes wireframe
            4. The View Note/Delete button wireframe
          2. Writing the HTML
        3. Adding functionality with JavaScript
          1. Storing Notekeeper data
            1. Using localStorage
          2. Effective use of boilerplates
          3. Building the Add Note feature
            1. Adding bindings
            2. Collecting and storing data
            3. Building the Display Notes feature
          4. Dynamically adding notes to our listview
          5. Viewing a note
            1. Using the .on() method
          6. Dynamically creating a new page
          7. Deleting a note
        4. Summary
      16. 9. jQuery Mobile Configuration, Utilities, and JavaScript Methods
        1. Configuring jQuery Mobile
        2. Using jQuery Mobile utilities
          1. Page methods and utilities
          2. Utilities related to path and URL
        3. jQuery Mobile widget and form utilities
        4. Summary
      17. 10. Working with Events
        1. Working with physical events
        2. Handling page events
          1. What about $(document).ready?
          2. Creating a real example
        3. Summary
      18. 11. Enhancing jQuery Mobile
        1. What's possible for designs?
        2. The visual building blocks of jQuery Mobile
          1. Border-radius
          2. Applying drop shadows
            1. Using text-shadow
            2. Using box-shadow
            3. CSS gradients
        3. The basics of jQuery Mobile theming
          1. Bars (.ui-bar-?)
          2. Content blocks (.ui-body-?)
          3. Buttons and listviews (.ui-btn-?)
          4. Mixing and matching swatches
          5. Site-wide active state
          6. Default icons
        4. Creating and using a custom theme
          1. What's ThemeRoller?
          2. Using ThemeRoller
          3. Preview
          4. Colors
          5. Inspector
          6. Tools
          7. Creating a theme for Notekeeper
          8. Exporting your theme
        5. Updating the Notekeeper app
          1. Adding our custom theme
        6. Summary
      19. 12. Creating Native Applications
        1. HTML as a native application
          1. Working with PhoneGap
          2. Adding the PhoneGap functionality
        2. Summary
      20. 13. Becoming an Expert – Building an RSS Reader Application
        1. RSS reader – the application
        2. Creating the RSS reader application
          1. The displayFeeds function
          2. Storing our feeds
          3. Adding an RSS feed
          4. Viewing a feed
          5. Creating the entry view
          6. Going further
        3. Summary
      21. Index