Cover image for jQuery Mobile Cookbook

jQuery Mobile Cookbook

Author Chetan K Jain
Release Date: 2012/11/01
ISBN: 9781849517225
Topic:
0%
116
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Over 90 recipes with examples and practical tips to help you quickly learn and develop cross-platform applications with jQuery Mobile

  • Create applications that use custom animations and use various techniques to improve application performance
  • Use and customize the various controls such as toolbars, buttons, and lists with custom icons, icon sprites, styles, and themes
  • Write simple but powerful scripts to manipulate the various configurations and work with the events, methods, and utilities which are provided by the framework

In Detail

jQuery Mobile is an award winning, HTML5/CSS3 based open source cross-platform UI framework. It offers a very cool and highly customizable UX. It is built on the popular jQuery library and uses declarative coding making it easy to use and learn. It is the market leader today considering the numerous browsers and platforms that it supports.

"jQuery Mobile Cookbook" presents over a hundred recipes written in a simple and easy manner. You can quickly learn and start writing code immediately. Advanced topics such as using scripts to manipulate, customize, and extend the framework are also covered. These tips address your common everyday problems. The book is very handy for both beginner and experienced jQuery Mobile developers.

You start by developing simple apps using various controls and learn to customize them. Later you explore using advanced aspects like configurations, events, and methods.

Develop single and multi-page applications. Use caching to boost performance. Use custom transitions, icon sprites, styles, and themes. Learn advanced features like configurations, events, and methods. Explore future trends by using HTML5 new features and semantics with jQuery Mobile.

"jQuery Mobile Cookbook" is an easy read and is packed with practical tips and screenshots.

Table of Contents

  1. jQuery Mobile Cookbook
    1. Table of Contents
    2. jQuery Mobile Cookbook
    3. Credits
    4. About the Author
    5. Acknowledgement
    6. About the Reviewers
    7. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    8. 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
    9. 1. Get Rolling
      1. Introduction
      2. Writing your first jQuery Mobile application
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. The Page theme
        5. See also
      3. Using JS Bin to create a simple application
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
    10. 2. Pages and Dialogs
      1. Introduction
      2. Writing a single-page template application
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Turning off Ajax navigation
          2. Using data-rel and data-direction
          3. Page container is optional
        5. See also
      3. Writing a multi-page template application
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Using transitions
          2. Turning off Ajax navigation
          3. Page container is mandatory
        5. See also
      4. Prefetching pages for faster navigation
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. When prefetch is not completed
          2. Prefetched pages are not permanently cached
        5. See also
      5. Using the DOM cache to improve performance
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. DOM caching can slow down your app
        5. See also
      6. Custom styling a dialog
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Customizing CSS
        5. See also
      7. Using CSS to create a bouncing page transition
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Adding vendor prefixes to the customtransition.css file
          2. When the CSS3 property becomes a standard
          3. Progressive enhancement
        5. See also
      8. Using JS to create a slide and fade page transition
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. JavaScript transitions compared to CSS3 transitions
        5. See also
      9. Using data-url to handle the login page navigation
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Using data-url as the href link
          2. Working with sub-hash urls
        5. See also
      10. Using History API to create a custom error pop up
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. The popstate event on a dialog
          2. The Popup widget
        5. See also
    11. 3. Toolbars
      1. Introduction
      2. Using fullscreen fixed toolbars
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. The position—fixed CSS property
          2. Toggling the fixed toolbar visibility
          3. Toggling the fixed toolbar visibility using JavaScript
        5. See also
      3. Using persistent navbars in toolbars
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. 3D page transitions with persistent fixed toolbars
        5. See also
      4. Customizing the header with multiple buttons
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      5. Adding a customized round button to the header
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      6. Adding an image to the header
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      7. Adding a customized back button
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      8. Adding a layout grid to the footer
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Size of the controls in a layout grid
          2. Breaking to the next row in a layout grid
        5. See also
    12. 4. Buttons and Content Formatting
      1. Introduction
      2. Scripting a dynamically added button
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Button options
      3. Using a custom icon in a button
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Using data-inline
          2. Using data-iconpos
          3. Using shadows and corners with buttons
        5. See also
      4. Adding a custom icon sprite
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Specifying an invalid icon name
        5. See also
      5. Replacing the default icon sprite
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      6. Using alternate icons in a collapsible
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Setting a theme to the collapsible header
        5. See also
      7. Creating a nested accordion
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      8. Creating a custom layout grid
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Adding content to a layout grid cell
          2. Adding a grid layout to any container
        5. See also
      9. Using XML content
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Using native browser rendering for XML
        5. See also
      10. Using JSON content
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. JSON for data storage and data transfer
          2. JSON parsers
        5. See also
    13. 5. Forms
      1. Introduction
      2. Native styling of form controls
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Setting multiple controls to use native style
          2. The data-role='none' attribute
      3. Disabling text controls
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Auto-initialization of text controls
      4. Grouping radio buttons in a grid
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      5. Customizing a checkbox group
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Auto-initialization of checkbox controls
        5. See also
      6. Creating dynamic flip switch and slider controls
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Auto-initialization of sliders
      7. Using options to auto-initialize a select menu
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Opening and closing a select menu
      8. Validating forms
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Unique IDs in a form
        5. See also
      9. Submitting a form using POST
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. The Ajax response
          2. Other ways of non-Ajax form submission
        5. See also
      10. Fetching data using GET
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. The Ajax response
          2. Form submission defaults
        5. See also
      11. Creating an accessible form
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Popular voice readers for mobile devices
          2. Desktop voice readers
    14. 6. List Views
      1. Introduction
      2. Using inset and non-inset lists
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Setting the listview theme
          2. Setting the theme on list items
      3. Creating a custom numbered list
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      4. Using a nested list
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Theming the header of the sub page of a nested list
          2. Configuring the header theme option of a list view
        5. See also
      5. Using a read-only nested list
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      6. Formatting content in a list
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Using form controls in a list item
        5. See also
      7. Using a split button list
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Configuring the split button list using listview options
        5. See also
      8. Using image icons
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      9. Creating a custom search filter
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Using data-attribute to configure list divider themes
          2. Using data-attribute to configure list search filters
      10. Modifying a list with JavaScript
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
    15. 7. Configurations
      1. Introduction
      2. Configuring the active classes
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Using the jQuery .extend() call
        5. See also
      3. Configuring ajaxEnabled
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      4. Configuring autoInitializePage
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      5. Configuring the default transitions
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Using custom transitions
          2. Transition fallbacks
        5. See also
      6. Configuring ignoreContentEnabled
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      7. Configuring the page loading and error messages
        1. Getting ready
        2. How to do it...
        3. How it works...
      8. Configuring the default namespace
        1. Getting ready
        2. How to do it...
        3. How it works...
      9. Configuring hashListeningEnabled and subPageUrlKey
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      10. Configuring pushStateEnabled and linkBindingEnabled
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
    16. 8. Events
      1. Introduction
      2. Using orientation events
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. The orientationChangeEnabled global configuration
      3. Using scroll events
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      4. Using touch events
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. The tapholdThreshold property
        5. See also
      5. Virtual mouse events
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Mouse coordinates
          2. Using vclick events on touch devices
        5. See also
      6. Page initialization events
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Page initialization events fire only once
          2. Do not use $(document).ready()
      7. Page load and remove events
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      8. Page change events
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Sequence of pagechange event
        5. See also
      9. Page transition and animation events
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      10. Using layout events
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
    17. 9. Methods and Utilities
      1. Introduction
      2. Using loadPage() to load a page
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. The loadPage() options
        5. See also
      3. Using changePage() to change a page
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. The changePage() options
        5. See also
      4. Using jqmData() and jqmRemoveData()
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      5. Using jqmEnhanceable()
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      6. Using jqmHijackable
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. $.mobile.ignoreContentEnabled configuration
        5. See also
      7. Using $.mobile.base
        1. Getting ready
        2. How to do it...
        3. How it works...
      8. Parsing an URL
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      9. Using $.mobile.path utility methods
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      10. Using silent scrolling
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. The $.mobile.defaultHomeScroll Property
        5. See also
    18. 10. The Theme Framework
      1. Introduction
      2. Theming a nested list
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      3. Using a custom background
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      4. Using custom fonts
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Using TrueType fonts
          2. Downloading the fonts
        5. See also
      5. Styling corners
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      6. Overriding the global Active State theme
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      7. Overriding an existing swatch
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. The buttonMarkup.hoverDelay configuration
        5. See also
      8. Using the ThemeRoller tool to create a swatch
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Importing and upgrading themes
          2. Sharing themes
    19. 11. HTML5 and jQuery Mobile
      1. Introduction
      2. Using the new HTML5 semantics
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. About using <div>
          2. Using <section> with jQuery Mobile
      3. Improving speed and taking your application offline
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Restriction on the cache size
          2. Refreshing the Application Cache
          3. The MIME type of the manifest file
          4. The Ajax pre-filter workaround
        5. See also
      4. Using Web Workers for intensive tasks
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Using Modernizr to check for Web Worker support
        5. See also
      5. Using local and session storage
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Inspecting the Web Storage
          2. WebSQL Storage
          3. IndexedDB Storage
      6. 2D drawing with Canvas
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      7. Applying Gaussian blur on a SVG image
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. SVG Tiny specification
        5. See also
      8. Tracking your location with the Geolocation API
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Google Gears
          2. Geolocation on desktop browsers
      9. Playing music with the <audio> element
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      10. Viewing videos with the <video> element
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. The flash fallback
          2. The Codecs
          3. The Audio and Video API
          4. HTML5 media players
        5. See also
    20. Index
18.216.190.167