jQuery Mobile: Up and Running

jQuery Mobile: Up and Running

by Maximiliano Firtman
Released February 2012
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449331092

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Would you like to build one mobile web application that works on iPad and Kindle Fire as well as iPhone and Android smartphones? This introductory guide to jQuery Mobile shows you how. Through a series of hands-on exercises, you’ll learn the best ways to use this framework’s many interface components to build customizable, multiplatform apps. You don’t need any programming skills or previous experience with jQuery to get started.

By the time you finish this book, you’ll know how to create responsive, Ajax-based interfaces that work on a variety of smartphones and tablets, using jQuery Mobile and semantic HTML5 code.

  • Understand how jQuery Mobile works with HTML5, CSS3, and JavaScript
  • Work with UI components to format content and create forms, lists, navbars, and buttons
  • Create dynamic content with JavaScript, Ajax, and the jQuery core framework
  • Customize your entire user interface with themes and CSS3
  • Enable users to install your app from the browser and work with it offline
  • Distribute through app stores by packaging your creation as a native app

Publisher resources

View/Submit Errata

Table of contents

  1. jQuery Mobile: Up and Running
  2. SPECIAL OFFER: Upgrade this ebook with O’Reilly
  3. A Note Regarding Supplemental Files
  4. Preface
    1. Conventions Used in This Book
    2. Using Code Examples
    3. Safari® Books Online
    4. How to Contact Us
  5. 1. The Mobile Platform
    1. Why Do We Need jQuery Mobile?
      1. Myths of the Mobile Web
        1. It’s not the mobile web; it’s just the Web!
        2. You don’t need to do anything special when designing for the mobile web
        3. One website should work for all devices (desktop, mobile, TV, etc.)
        4. Just create an HTML file with a width of 240 pixels, and you have a mobile website
      2. Mobile Webapps
      3. So, Again…Why Do We Need jQuery Mobile?
    2. What Is jQuery Mobile?
      1. What jQuery Mobile Is Not
      2. The Framework
    3. The Mobile and Tablet World
      1. Device Categories
        1. Mobile phones
        2. Low-end mobile devices
        3. Mid-end/high-end mobile devices
        4. Smartphones
        5. Tablets
      2. Operating Systems and Browsers
      3. jQuery Mobile Compatibility
        1. Mobile graded browser support
    4. HTML5 and CSS3
    5. Main Features
      1. Use of Nonintrusive Semantic HTML5
      2. Progressive Enhancement
      3. Accessibility Support
    6. Testing Webapps
      1. Emulators and Simulators
      2. Remote Labs
  6. 2. Starting with the Framework
    1. Preparing the Document
      1. Requirements
      2. Hosting the Files
      3. Using a CDN
        1. Latest builds
      4. Main HTML5 Template
        1. The viewport
        2. Performance on JavaScript
    2. Adobe Dreamweaver Support
      1. Previewing Files
    3. Architecture
      1. Roles
      2. Theming
      3. The Page
        1. The header and the footer
        2. The content
    4. Navigation
      1. Back Button
      2. Internal Page Links
      3. External Page Links
      4. Absolute External Links
      5. Mobile Special Links
      6. Transition Between Pages
      7. Reverse Transition
    5. Dialogs
      1. Closing or Going Back?
      2. Opening Pages from Dialogs
    6. Integrating with the Phone
      1. Making a Call
      2. Video and VoIP Calls
      3. Sending Email
      4. Sending an SMS
      5. Other URI Schemes
      6. Bringing It All Together
  7. 3. UI Components
    1. Toolbars
      1. Positioning
      2. True Fixed Toolbars
      3. Adding Content to the Header
        1. Adding buttons
        2. Adding a logo
        3. Customizing the header
      4. Adding Content to the Footer
      5. Navigation Bars
        1. Using icons
        2. Selected element
      6. Persistent Footer
    2. Formatting Content
      1. Collapsible Content
        1. Nested collapsible contents
      2. Accordion
    3. Columns
    4. Buttons
      1. Inline Buttons
      2. Grouped Buttons
      3. Effects
      4. Icons
      5. Creating Custom Icons
      6. Icon Positioning
      7. Icon-Only Buttons
      8. Icon Shadow
  8. 4. Lists
    1. Full-Page Lists Versus Inset Lists
    2. Visual Separators
    3. Interactive Rows
      1. Nested Lists
      2. Split Button Lists
        1. Managing row importance
      3. Ordered Interactive Lists
    4. Using Images
      1. Row Icons
      2. Thumbnails
    5. Aside Content
    6. Title and Description
    7. Using Count Bubbles
    8. Filtering Data with Search
    9. List Views Cheat Sheet
  9. 5. Form Components
    1. Form Action
      1. Forcing a Non-AJAX Form
    2. Form Elements
      1. Labels
      2. Field Containers
      3. Text Fields
      4. Auto-Growing Text Area
      5. New HTML5 Attributes
      6. Date Fields
      7. Slider
      8. Flip Toggle Switch
      9. Select Menus
        1. Grouping select menus
        2. Non-native select menus
      10. Radio Buttons
      11. Checkboxes
      12. File Uploads
  10. 6. The Framework and JavaScript
    1. Document Events
    2. Configuration
      1. Global Configuration
        1. User interface
        2. Core and AJAX functionalities
        3. Localizable strings
        4. Touch overflow
      2. Page Configuration
        1. Page loading
      3. Widgets Configuration
    3. Utilities
      1. Data-* Utilities
      2. Page Utilities
        1. Page transition options
      3. Platform Utilities
      4. Path Utilities
      5. UI Utilities
    4. Custom Transitions
    5. Dynamic Content
      1. Creating Pages
      2. Creating Widgets
      3. Updating Widgets
    6. Creating Grids
    7. Changing Page Contents
    8. Event Handling
      1. Page Events
        1. Creation events
        2. Loading events
        3. Showing events
      2. Widget Events
      3. Orientation Event
      4. Gesture Events
      5. Virtual Clicks Events
  11. 7. Creating Themes
    1. ThemeRoller
      1. Global Settings
      2. Swatch Color Settings
      3. Inspector
      4. Adobe Kuler
      5. Exporting Your Theme
    2. Fireworks Theme Editor
    3. Editing Themes
    4. Custom Transitions
  12. 8. Installation and Offline Access
    1. Package Definition
      1. HTML Manifest
      2. Download Process
      3. Accessing Online Resources
      4. Updating Resources
      5. JavaScript Object
      6. Events
    2. Icon Installation
      1. Invitation
      2. Icon Name
      3. Icon Definition
    3. Full Screen
      1. Detecting Full Screen
      2. Styling the Webapp
    4. Mixing It All Together
    5. Storing Offline Data
  13. 9. A Complete Webapp
    1. Webapp Structure
      1. Offline Manifest
      2. Pages
      3. Stylesheet
      4. Data
      5. Script
  14. 10. Extending the Framework
    1. Creating a Plug-in
      1. Basic Template
      2. Creating Our Plug-in
        1. Usage
        2. The widget
        3. Auto-initialization
        4. Using our plug-in
        5. Full source code
    2. Notable Plug-ins
      1. Pagination
      2. Bartender
      3. DateBox
      4. Simple Dialog
      5. Action Sheet
    3. Plug-ins for Tablets
      1. SplitView
      2. MultiView
    4. Compatible Plug-ins
  15. 11. Packaging for Stores
    1. Store Distribution
    2. Custom Distribution
    3. Preparing the Package
    4. Packaging with PhoneGap
      1. PhoneGap Build
  16. Index
  17. About the Author
  18. Colophon
  19. SPECIAL OFFER: Upgrade this ebook with O’Reilly

Product information

  • Title: jQuery Mobile: Up and Running
  • Author(s): Maximiliano Firtman
  • Release date: February 2012
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449331092