Buttons and Content Formatting | jQuery Mobile Cookbook

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

jQuery Mobile Cookbook

By : Chetan Jain

3 (1)

jQuery Mobile Cookbook

3 (1)

By: Chetan Jain

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

jQuery Mobile Cookbook

Credits

Credits

About the Author

About the Author

Acknowledgement

Acknowledgement

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Preface

Free Chapter

Get Rolling

Get Rolling

Introduction

Writing your first jQuery Mobile application

Using JS Bin to create a simple application

Pages and Dialogs

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

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

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

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

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

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

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

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

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

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

Viewing videos with the

Index

Index

Scripting a dynamically added button

Buttons are standard HTML form elements that are enhanced by the button plugin in the jQuery Mobile framework to make them finger friendly and also to look good in a wide variety of mobile devices. You can add buttons to your app by using the <button> tag or the <input> tag. You can also style the anchor element as a button by adding the data-role="button" attribute to it. This recipe shows you how to dynamically add a button to a page using JavaScript and bind an action to this newly added button.

Getting ready

Copy the full code of this recipe from the code/04/dynamic-button sources folder. You can launch this code using the URL http://localhost:8080/04/dynamic-button/main.html.

How to do it...

In main.html, create the #main page and add a button to it. When you click on this button, use JavaScript and create a second button and also assign an action to it:

Create the #main page in main.html and add the following code content to it:
```
<div data...
```

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

jQuery Mobile Cookbook

Search

Your notes and bookmarks