O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

jQuery Mobile

Book Description

Native apps have distinct advantages, but the future belongs to mobile web apps that function on a broad range of smartphones and tablets. Get started with jQuery Mobile, the touch-optimized framework for creating apps that look and behave consistently across many devices. This concise book provides HTML5, CSS3, and JavaScript code examples, screen shots, and step-by-step guidance to help you build a complete working app with jQuery Mobile.

If you're already familiar with the jQuery JavaScript library, you can use your existing skills to build cross-platform mobile web apps right now. This book shows you how.

  • Get a high-level overview of jQuery Mobile: how it works and how to use it
  • Learn about paging and navigation, including dialogs, Ajax content, and history
  • Employ jQuery Mobile’s extensive event system to create rich interactions
  • Work with toolbars, buttons, lists, forms, and other UI elements
  • Create a variety of visual designs with jQuery Mobile’s sophisticated theming system
  • Use the jQuery Mobile API for finer control over elements and interactions
  • Put everything together and build a mobile app from start to finish

Table of Contents

  1. A Note Regarding Supplemental Files
  2. Preface
    1. Introduction
      1. What This Book Covers
      2. What You Need To Know
    2. Conventions Used In This Book
    3. Using Code Examples
    4. Safari® Books Online
    5. How to Contact Us
    6. Acknowledgments
  3. 1. Meet jQuery Mobile
    1. Overview of the jQuery Mobile Library
    2. How jQuery Mobile Works
    3. Create Your First jQuery Mobile Application
      1. Under The Hood: the jqmData() Custom Selector
  4. 2. Application Structure and Navigation
    1. Pages
      1. Internal Pages
      2. External Pages
        1. Overriding Asynchronous Page Fetching
      3. Under The Hood: Page Initialization in jQuery Mobile
      4. Page Hide and Show Events
        1. Under The Hood: A jQuery Mobile Page Initialization Pattern
    2. Dialogs
    3. Navigation and History
    4. Transitions
      1. Under The Hood: Animations in a jQuery Mobile Application
  5. 3. Page Elements
    1. Under The Hood: jQuery Plug-ins and Widgets
    2. List Views
      1. Basic List View
        1. List View Buttons
        2. List View Dividers
      2. Advanced List Views
        1. Nested Lists
        2. List View Split Buttons
        3. Thumbnails and Icons
        4. Count Bubbles
      3. Under The Hood: Updating a List View
    3. Toolbars
      1. Navigation Bars
      2. Positioning the Header and Footer
    4. Buttons
      1. Button Control Groups
      2. Button Icons
        1. Custom Icons
    5. Form Elements
      1. Accessing Form Elements with JavaScript
      2. Checkboxes and Radio Buttons
        1. Methods
      3. Flip Toggle
        1. Methods
      4. Input Fields and Textareas
        1. Methods
      5. Search Fields
        1. Methods
      6. Select Menus
        1. Custom Styled Select Menus
          1. Disabled Elements
          2. Multiple Selections
          3. Optgroups
          4. Placeholders
        2. Methods
      7. Sliders
        1. Methods
    6. Layout Grids
  6. Theming jQuery Mobile
    1. Themes and Swatches
      1. Under The Hood: Customizing a Swatch
      2. Theming List View Elements
  7. 5. jQuery Mobile API
    1. jQuery Mobile Methods
      1. changePage
      2. pageLoading
      3. silentScroll
      4. addResolutionBreakpoints
    2. Events
      1. Touch Events
        1. Under The Hood: Using Swipe Events to Trigger Page Transitions
      2. Initialization Events
      3. Page Hide and Show Events
      4. Scroll Events
      5. Orientation Change Events
    3. Responsive Layout API
      1. CSS Selectors
        1. Screen Size Breakpoint Classes
          1. Adding Size Breakpoints
        2. Orientation Change Events
        3. Media Queries
    4. Configuring jQuery Mobile
      1. Available Options
      2. Changing an Option via mobileinit
      3. Under The Hood: Namespacing Data Attributes
  8. 6. jQuery Mobile in Action
    1. Application Pages
    2. Initializing the Application
      1. The initMainPage Method
        1. Under The Hood: Passing Data Between jQuery Mobile Pages
        2. Accessing the Twitter API
          1. JSON or XML?
          2. Fetching the Data
      2. The initSettings Method
      3. The initDetailPage Method
      4. Error Dialog
    3. jqmTweet Take One
    4. Improving the Interface
      1. CSS Tweaks
      2. Interaction Tweaks
    5. Overall Approach
  9. About the Author
  10. Colophon
  11. Copyright