You are previewing Mastering jQuery Mobile.
O'Reilly logo
Mastering jQuery Mobile

Book Description

Design and develop cutting-edge mobile web applications using jQuery Mobile to work across a number of platforms

In Detail

jQuery Mobile is a touch-optimized JavaScript framework. Using this framework, we can create mobile web applications using standard web technologies such as HTML5, CSS3, and JavaScript which will function and behave consistently across multiple devices of different form factors.

The book starts with you setting up the development environment that will enable you to complete the project that accompanies the book. Furthermore, you will get a brief overview of developing for mobile devices and a brief look at RESS. You will then start putting together a touch-based navigation system as you link pages together and explore the various widgets and controls used to build the project. Finally, some mobile best practices that will benefit you will be looked at as you go deeper into jQuery Mobile development. By the end of the book, you will be well equipped with an extensive knowledge of jQuery Mobile, not only to build applications, but to effectively customize and maintain them.

What You Will Learn

  • Create a theme for your jQuery Mobile application by using the ThemeRoller tool

  • Test your application on a variety of resolutions through Screenfly

  • Master pages, panels, popups, toolbars, and navbars in jQuery Mobile

  • Understand how mobile web design best practices can enhance your mobile web application

  • Allow your users to navigate pages with a swipe gesture and add transitions and effects to the page changes

  • Discover how to create jQuery Mobile widgets that will extend the framework to suit your needs

  • See how Apache Cordova can turn your web application into a native Android or iOS app

  • Use jQuery Mobile with other popular JavaScript frameworks and technologies such as Backbone.js and Node.js

  • 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 files e-mailed directly to you.

    Table of Contents

    1. Mastering jQuery Mobile
      1. Table of Contents
      2. Mastering jQuery Mobile
      3. Credits
      4. About the Authors
      5. About the Reviewers
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      8. 1. Getting Started
        1. Overview
        2. Installing XAMPP for Windows
        3. Installing XAMPP for Mac OS X
        4. Installing Aptana Studio
        5. Downloading jQuery Mobile
        6. Using the framework via the CDN
          1. Google's CDN
          2. Microsoft's CDN
          3. jQuery's CDN
        7. Seeing the framework in action
        8. Summary
      9. 2. Tools and Testing
        1. Overview
        2. Theming with jQuery ThemeRoller
          1. The basics
          2. Rolling into your own theme
            1. Inspector
            2. Preview
            3. Color
            4. Tools
          3. Creating a theme
        3. Using Aptana Studio 3
          1. The interface
          2. Toolbar
            1. Project Explorer
            2. Console, terminal, and problems
            3. The Editor window
            4. Suggested customizations
            5. Creating a new project
        4. Testing with Screenfly
          1. The interface
          2. More information
        5. Summary
      10. 3. Mobile Design
        1. Overview
        2. Responsive web design techniques
          1. Flexible layouts
          2. Images
          3. Media queries
            1. Media queries in action
        3. Feature detection with Modernizr
          1. Getting started
          2. Testing for geolocation
          3. Testing for web storage
        4. Device detection with WURFL
          1. Getting started with the ScientiaMobile cloud
          2. Device detection example – tablet brand
        5. RESS introduction
          1. Getting started with RESS
        6. Summary
      11. 4. Call to Action – Our Main Project
        1. Overview
        2. Pages
        3. Panels
        4. Popups
        5. Toolbars
          1. Creating a Home button
        6. Navbars
        7. Summary
      12. 5. Navigation
        1. Overview
        2. Links and page navigation
          1. Ajax page linking
          2. Non-Ajax page linking
          3. Multipage document linking
        3. Working with transitions and effects
        4. Navigating with swipe gestures
        5. Working with page loaders
        6. Summary
      13. 6. Controls and Widgets
        1. Overview
        2. Widgets
        3. Input with touch
        4. Working with plugins
        5. Accessibility
        6. Summary
      14. 7. Working with Data
        1. Overview
        2. Setting up our database
        3. A dab of PHP
        4. Fetching data
        5. Displaying information
        6. Some more PHP
        7. Forms and validation
        8. Inserting data into the database
        9. Summary
      15. 8. Finishing Touches
        1. Overview
        2. Creating custom icons
        3. Introduction to Cordova
        4. Configuring Cordova
          1. Step 1 – install XCode
          2. Step 2 – the iOS SDK
          3. Step 3 – install Command Line Tools
          4. Step 4 – install Android SDK
          5. Step 5 – install Apache Cordova
        5. Notifications
        6. Geolocation
        7. Offline storage
          1. Local storage
          2. WebSQL database
        8. Summary
      16. 9. The Next Level
        1. Overview
        2. Working with Node.js
          1. Getting started
          2. Creating a starting JavaScript file
          3. Creating our jade views
          4. Creating our routes
        3. Working with RequireJS and Backbone.js
        4. Building a WordPress mobile theme
          1. Getting ready
          2. Creating the style sheet
          3. Creating the header file
          4. Creating the footer file
          5. Creating the function file
          6. Creating the index file
          7. Seeing the theme in action
        5. Summary
      17. 10. Mobile Best Practices and Efficiency
        1. Best practices for design and layout
          1. Icon size
          2. Designing with Photoshop
          3. Fluid design
          4. Avoiding fixed footers or headers
          5. Avoiding tables
          6. Dialogs and popups
          7. Forms
        2. Best practices for images
          1. Don't use images at all
          2. Optimizing images
          3. Image sprites
          4. The same image set for retina and non-retina devices
          5. Lazy loading
        3. Best practices for CSS
          1. Customizing the jQuery Mobile download
          2. Removing unused CSS
          3. Combining multiple CSS files
          4. Minify and gzip
        4. jQuery optimizations
          1. Selector caching
          2. Script files at the end or in the head?
          3. Combining the JavaScript files
          4. Using the latest jQuery version
          5. jQuery Mobile custom build
          6. Don't always use jQuery
          7. Minify and gzip
        5. jQuery Mobile optimizations
          1. A multipage template
          2. Prefetching pages
          3. Server-side processing for single-page templates
          4. Pre-enhanced markup
          5. Using data defaults
          6. Number of widgets on a page
          7. Limiting the size of widgets
        6. Performance tools for optimization
          1. The Google Chrome developer tools
          2. Firefox tools and the Firebug plugin
          3. Remote debugging on Android
          4. Remote debugging on iOS
          5. The Google PageSpeed tools
        7. Summary
      18. Index