jQuery Mobile Cookbook by Jain, Chetan K. -- Read -- Imperial Library of Trantor

Index

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

← Prev
Back
Next →

← Prev
Back
Next →