jQuery Mobile Cookbook

jQuery Mobile Cookbook

By : Chetan Jain

Buy this Book

jQuery Mobile Cookbook

By: Chetan Jain

Buy this Book

Overview of this book

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.

jQuery Mobile Cookbook

Credits

About the Author

Acknowledgement

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Get Rolling

Introduction

Writing your first jQuery Mobile application

Using JS Bin to create a simple application

Pages and Dialogs

Introduction

Writing a single-page template application

Writing a multi-page template application

Prefetching pages for faster navigation

Using the DOM cache to improve performance

Custom styling a dialog

Using CSS to create a bouncing page transition

Using JS to create a slide and fade page transition

Using data-url to handle the login page navigation

Using History API to create a custom error pop up

Toolbars

Introduction

Using fullscreen fixed toolbars

Using persistent navbars in toolbars

Customizing the header with multiple buttons

Adding a customized round button to the header

Adding an image to the header

Adding a customized back button

Adding a layout grid to the footer

Buttons and Content Formatting

Introduction

Scripting a dynamically added button

Using a custom icon in a button

Adding a custom icon sprite

Replacing the default icon sprite

Using alternate icons in a collapsible

Creating a nested accordion

Creating a custom layout grid

Using XML content

Using JSON content

Forms

Introduction

Native styling of form controls

Disabling text controls

Grouping radio buttons in a grid

Customizing a checkbox group

Creating dynamic flip switch and slider controls

Using options to auto-initialize a select menu

Validating forms

Submitting a form using POST

Fetching data using GET

Creating an accessible form

List Views

Introduction

Using inset and non-inset lists

Creating a custom numbered list

Using a nested list

Using a read-only nested list

Formatting content in a list

Using a split button list

Using image icons

Creating a custom search filter

Modifying a list with JavaScript

Configurations

Introduction

Configuring the active classes

Configuring ajaxEnabled

Configuring autoInitializePage

Configuring the default transitions

Configuring ignoreContentEnabled

Configuring the page loading and error messages

Configuring the default namespace

Configuring hashListeningEnabled and subPageUrlKey

Configuring pushStateEnabled and linkBindingEnabled

Events

Introduction

Using orientation events

Using scroll events

Using touch events

Virtual mouse events

Page initialization events

Page load and remove events

Page change events

Page transition and animation events

Using layout events

Methods and Utilities

Introduction

Using loadPage() to load a page

Using changePage() to change a page

Using jqmData() and jqmRemoveData()

Using jqmEnhanceable()

Using jqmHijackable

Using $.mobile.base

Parsing an URL

Using $.mobile.path utility methods

Using silent scrolling

The Theme Framework

Introduction

Theming a nested list

Using a custom background

Using custom fonts

Styling corners

Overriding the global Active State theme

Overriding an existing swatch

Using the ThemeRoller tool to create a swatch

HTML5 and jQuery Mobile

Introduction

Using the new HTML5 semantics

Improving speed and taking your application offline

Using Web Workers for intensive tasks

Using local and session storage

2D drawing with Canvas

Applying Gaussian blur on a SVG image

Tracking your location with the Geolocation API

Playing music with the <audio> element

Viewing videos with the <video> element

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Adding an image to the header

The header of a jQuery Mobile page usually contains the text which is to be used as the page header. You can also add other content and markup to the header. This recipe shows you how to add an image to the header of your application.

Getting ready

Copy the full code of this recipe from the code/03/header-image sources folder. This code can be launched using the URL http://localhost:8080/03/header-image/main.html.

How to do it...

In this recipe, the image ABC.png is used as the logo image for a a fictitious company, ABC Inc.

Create main.html and add the above image to its header. The image is linked to a dialog as shown in the following code:

<div id="main" data-role="page" data-theme="a">
  <div data-role="header" data-theme="a">
    <h1>ABC Company</h1>
    <a href="#about" data-rel="dialog" data-theme="a" class="ui-btn ui-shadow ui-btn-up-a">
      <img src="../../resources/images/ABC.png" width="24" height="24" alt="About ABC"...

jQuery Mobile Cookbook

By : Chetan Jain

jQuery Mobile Cookbook

By: Chetan Jain

Overview of this book

Related Content you might be interested in

Current Title:

jQuery Mobile Cookbook

Adding an image to the header

Getting ready

How to do it...