jQuery Mobile Cookbook电子书

jQuery Mobile Cookbook

Table of Contents

jQuery Mobile Cookbook

Credits

About the Author

Acknowledgement

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Get Rolling

Introduction

Writing your first jQuery Mobile application

Getting ready

How to do it...

How it works...

There's more...

The Page theme

See also

Using JS Bin to create a simple application

Getting ready

How to do it...

How it works...

There's more...

See also

2. Pages and Dialogs

Introduction

Writing a single-page template application

Getting ready

How to do it...

How it works...

There's more...

Turning off Ajax navigation

Using data-rel and data-direction

Page container is optional

See also

Writing a multi-page template application

Getting ready

How to do it...

How it works...

There's more...

Using transitions

Turning off Ajax navigation

Page container is mandatory

See also

Prefetching pages for faster navigation

Getting ready

How to do it...

How it works...

There's more...

When prefetch is not completed

Prefetched pages are not permanently cached

See also

Using the DOM cache to improve performance

Getting ready

How to do it...

How it works...

There's more...

DOM caching can slow down your app

See also

Custom styling a dialog

Getting ready

How to do it...

How it works...

There's more...

Customizing CSS

See also

Using CSS to create a bouncing page transition

Getting ready

How to do it...

How it works...

There's more...

Adding vendor prefixes to the customtransition.css file

When the CSS3 property becomes a standard

Progressive enhancement

See also

Using JS to create a slide and fade page transition

Getting ready

How to do it...

How it works...

There's more...

JavaScript transitions compared to CSS3 transitions

See also

Using data-url to handle the login page navigation

Getting ready

How to do it...

How it works...

There's more...

Using data-url as the href link

Working with sub-hash urls

See also

Using History API to create a custom error pop up

Getting ready

How to do it...

How it works...

There's more...

The popstate event on a dialog

The Popup widget

See also

3. Toolbars

Introduction

Using fullscreen fixed toolbars

Getting ready

How to do it...

How it works...

There's more...

The position—fixed CSS property

Toggling the fixed toolbar visibility

Toggling the fixed toolbar visibility using JavaScript

See also

Using persistent navbars in toolbars

Getting ready

How to do it...

How it works...

There's more...

3D page transitions with persistent fixed toolbars

See also

Customizing the header with multiple buttons

Getting ready

How to do it...

How it works...

There's more...

See also

Adding a customized round button to the header

Getting ready

How to do it...

How it works...

There's more...

See also

Adding an image to the header

Getting ready

How to do it...

How it works...

There's more...

See also

Adding a customized back button

Getting ready

How to do it...

How it works...

There's more...

See also

Adding a layout grid to the footer

Getting ready

How to do it...

How it works...

There's more...

Size of the controls in a layout grid

Breaking to the next row in a layout grid

See also

4. Buttons and Content Formatting

Introduction

Scripting a dynamically added button

Getting ready

How to do it...

How it works...

There's more...

Button options

Using a custom icon in a button

Getting ready

How to do it...

How it works...

There's more...

Using data-inline

Using data-iconpos

Using shadows and corners with buttons

See also

Adding a custom icon sprite

Getting ready

How to do it...

How it works...

There's more...

Specifying an invalid icon name

See also

Replacing the default icon sprite

Getting ready

How to do it...

How it works...

There's more...

See also

Using alternate icons in a collapsible

Getting ready

How to do it...

How it works...

There's more...

Setting a theme to the collapsible header

See also

Creating a nested accordion

Getting ready

How to do it...

How it works...

There's more...

See also

Creating a custom layout grid

Getting ready

How to do it...

How it works...

There's more...

Adding content to a layout grid cell

Adding a grid layout to any container

See also

Using XML content

Getting ready

How to do it...

How it works...

There's more...

Using native browser rendering for XML

See also

Using JSON content

Getting ready

How to do it...

How it works...

There's more...

JSON for data storage and data transfer

JSON parsers

See also

5. Forms

Introduction

Native styling of form controls

Getting ready

How to do it...

How it works...

There's more...

Setting multiple controls to use native style

The data-role='none' attribute

Disabling text controls

Getting ready

How to do it...

How it works...

There's more...

Auto-initialization of text controls

Grouping radio buttons in a grid

Getting ready

How to do it...

How it works...

There's more...

See also

Customizing a checkbox group

Getting ready

How to do it...

How it works...

There's more...

Auto-initialization of checkbox controls

See also

Creating dynamic flip switch and slider controls

Getting ready

How to do it...

How it works...

There's more...

Auto-initialization of sliders

Using options to auto-initialize a select menu

Getting ready

How to do it...

How it works...

There's more...

Opening and closing a select menu

Validating forms

Getting ready

How to do it...

How it works...

There's more...

Unique IDs in a form

See also

Submitting a form using POST

Getting ready

How to do it...

How it works...

There's more...

The Ajax response

Other ways of non-Ajax form submission

See also

Fetching data using GET

Getting ready

How to do it...

How it works...

There's more...

The Ajax response

Form submission defaults

See also

Creating an accessible form

Getting ready

How to do it...

How it works...

There's more...

Popular voice readers for mobile devices

Desktop voice readers

6. List Views

Introduction

Using inset and non-inset lists

Getting ready

How to do it...

How it works...

There's more...

Setting the listview theme

Setting the theme on list items

Creating a custom numbered list

Getting ready

How to do it...

How it works...

There's more...

Using a nested list

Getting ready

How to do it...

How it works...

There's more...

Theming the header of the sub page of a nested list

Configuring the header theme option of a list view

See also

Using a read-only nested list

Getting ready

How to do it...

How it works...

There's more...

See also

Formatting content in a list

Getting ready

How to do it...

How it works...

There's more...

Using form controls in a list item

See also

Using a split button list

Getting ready

How to do it...

How it works...

There's more...

Configuring the split button list using listview options

See also

Using image icons

Getting ready

How to do it...

How it works...

There's more...

See also

Creating a custom search filter

Getting ready

How to do it...

How it works...

There's more...

Using data-attribute to configure list divider themes

Using data-attribute to configure list search filters

Modifying a list with JavaScript

Getting ready

How to do it...

How it works...

There's more...

7. Configurations

Introduction

Configuring the active classes

Getting ready

How to do it...

How it works...

There's more...

Using the jQuery .extend() call

See also

Configuring ajaxEnabled

Getting ready

How to do it...

How it works...

There's more...

Configuring autoInitializePage

Getting ready

How to do it...

How it works...

There's more...

Configuring the default transitions

Getting ready

How to do it...

How it works...

There's more...

Using custom transitions

Transition fallbacks

See also

Configuring ignoreContentEnabled

Getting ready

How to do it...

How it works...

There's more...

Configuring the page loading and error messages

Getting ready

How to do it...

How it works...

Configuring the default namespace

Getting ready

How to do it...

How it works...

Configuring hashListeningEnabled and subPageUrlKey

Getting ready

How to do it...

How it works...

See also

Configuring pushStateEnabled and linkBindingEnabled

Getting ready

How to do it...

How it works...

There's more...

See also

8. Events

Introduction

Using orientation events

Getting ready

How to do it...

How it works...

There's more...

The orientationChangeEnabled global configuration

Using scroll events

Getting ready

How to do it...

How it works...

There's more...

Using touch events

Getting ready

How to do it...

How it works...

There's more...

The tapholdThreshold property

See also

Virtual mouse events

Getting ready

How to do it...

How it works...

There's more...

Mouse coordinates

Using vclick events on touch devices

See also

Page initialization events

Getting ready

How to do it...

How it works...

There's more...

Page initialization events fire only once

Do not use $(document).ready()

Page load and remove events

Getting ready

How to do it...

How it works...

There's more...

See also

Page change events

Getting ready

How to do it...

How it works...

There's more...

Sequence of pagechange event

See also

Page transition and animation events

Getting ready

How to do it...

How it works...

There's more...

See also

Using layout events

Getting ready

How to do it...

How it works...

There's more...

9. Methods and Utilities

Introduction

Using loadPage() to load a page

Getting ready

How to do it...

How it works...

There's more...

The loadPage() options

See also

Using changePage() to change a page

Getting ready

How to do it...

How it works...

There's more...

The changePage() options

See also

Using jqmData() and jqmRemoveData()

Getting ready

How to do it...

How it works...

There's more...

See also

Using jqmEnhanceable()

Getting ready

How to do it...

How it works...

There's more...

See also

Using jqmHijackable

Getting ready

How to do it...

How it works...

There's more...

$.mobile.ignoreContentEnabled configuration

See also

Using $.mobile.base

Getting ready

How to do it...

How it works...

Parsing an URL

Getting ready

How to do it...

How it works...

There's more...

See also

Using $.mobile.path utility methods

Getting ready

How to do it...

How it works...

There's more...

See also

Using silent scrolling

Getting ready

How to do it...

How it works...

There's more...

The $.mobile.defaultHomeScroll Property

See also

10. The Theme Framework

Introduction

Theming a nested list

Getting ready

How to do it...

How it works...

See also

Using a custom background

Getting ready

How to do it...

How it works...

There's more...

See also

Using custom fonts

Getting ready

How to do it...

How it works...

There's more...

Using TrueType fonts

Downloading the fonts

See also

Styling corners

Getting ready

How to do it...

How it works...

There's more...

See also

Overriding the global Active State theme

Getting ready

How to do it...

How it works...

There's more...

See also

Overriding an existing swatch

Getting ready

How to do it...

How it works...

There's more...

The buttonMarkup.hoverDelay configuration

See also

Using the ThemeRoller tool to create a swatch

Getting ready

How to do it...

How it works...

There's more...

Importing and upgrading themes

Sharing themes

11. HTML5 and jQuery Mobile

Introduction

Using the new HTML5 semantics

Getting ready

How to do it...

How it works...

There's more...

About using <div>

Using <section> with jQuery Mobile

Improving speed and taking your application offline

Getting ready

How to do it...

How it works...

There's more...

Restriction on the cache size

Refreshing the Application Cache

The MIME type of the manifest file

The Ajax pre-filter workaround

See also

Using Web Workers for intensive tasks

Getting ready

How to do it...

How it works...

There's more...

Using Modernizr to check for Web Worker support

See also

Using local and session storage

Getting ready

How to do it...

How it works...

There's more...

Inspecting the Web Storage

WebSQL Storage

IndexedDB Storage

2D drawing with Canvas

Getting ready

How to do it...

How it works...

There's more...

See also

Applying Gaussian blur on a SVG image

Getting ready

How to do it...

How it works...

There's more...

SVG Tiny specification

See also

Tracking your location with the Geolocation API

Getting ready

How to do it...

How it works...

There's more...

Google Gears

Geolocation on desktop browsers

Playing music with the <audio> element

Getting ready

How to do it...

How it works...

There's more...

See also

Viewing videos with the <video> element

Getting ready

How to do it...

How it works...

There's more...

The flash fallback

The Codecs

The Audio and Video API

HTML5 media players

See also

Index