Book Details

About This Book

Packed with examples and clear explanations of how to easily design elegant and powerful front-end interfaces for your web applications

A section covering the widget factory including an in-depth example on how to build a custom jQuery UI widget

Updated code with significant changes and fixes to the previous edition

Who This Book Is For

This book is for front-end designers and developers who need to quickly learn how to use jQuery UI. To get the most out of this book you should have a good working knowledge of HTML, CSS, and JavaScript, and should ideally be comfortable using jQuery.

Table of Contents

Chapter 1: Introducing jQuery UI

Downloading the library

Setting up a development environment

The structure of the library

ThemeRoller

Component categories

Browser support

Book examples

Library licensing

API introduction

Summary

Chapter 2: The CSS Framework and Other Utilities

The files that make up the framework

Linking to the required framework files

Using the framework classes

Containers

Interactions

Icons

Interaction cues

Switching themes quickly and easily

Overriding the theme

The position utility

Collision avoidance

Positioning with a function

The widget factory

Creating the widget

The _create function

The common API methods

Adding custom methods

The widget style sheet

Using the widget

Summary

Chapter 3: Using the Tabs Widget

A basic tab implementation

Tab CSS framework classes

Applying a custom theme to the tabs

Configurable options

Tab events

Using tab methods

AJAX tabs

Changing the URL of a remote tab's content

Reloading a remote tab

Displaying data obtained via JSONP

Summary

Chapter 4: The Accordion Widget

Accordion's structure

Styling the accordion

Configuring an accordion

Accordion events

Accordion navigation

Accordion methods

Accordion interoperability

Summary

Chapter 5: The Dialog

Creating a basic dialog

Dialog options

Dialog's event model

Controlling a dialog programmatically

Getting data from the dialog

Dialog interoperability

Creating a dynamic image-based dialog

Summary

Chapter 6: The Slider Widget

Implementing a slider

Custom styling

Configurable options

Using slider's event API

Slider methods

Practical uses

A color slider

Summary

Chapter 7: The Datepicker Widget

The default datepicker

Configurable options of the datepicker

Utility methods

Date picking methods

An AJAX datepicker

Summary

Chapter 8: The Progressbar Widget

The default progressbar implementation

Progressbar's configuration options

Progressbar's event API

Progressbar methods

User initiated progress

Rich uploads with progressbar

Summary

Chapter 9: The Button and Autocomplete Widgets

The button widget

The autocomplete widget

Summary

Chapter 10: Drag and Drop

The deal with drag and droppables

Draggables

Configuring draggable options

Draggable event callbacks

Draggable's methods

Droppables

Configuring droppables

Droppable event callbacks

Droppable methods

A drag and drop game

Summary

Chapter 11: The Resizable Component

A basic resizable

Resizable options

Resizable callbacks

Resizable methods

Resizable tabs

Summary

Chapter 12: The Selectables Component

Basic implementation

Selectee classnames

Configurable options of the selectable component

Selectable callbacks

Selectable methods

A selectable image viewer

Summary

Chapter 13: The Sortables Component

The default implementation

Configuring sortable options

Reacting to sortable events

Connected callbacks

Sortable methods

Widget compatibility

Summary

Chapter 14: UI Effects

The core effects file

Highlighting specified elements

Bouncing

Shaking an element

Element scaling

Element explosion

The puff effect

The pulsate effect

Dropping elements onto the page

Sliding elements open or closed

The window-blind effect

Clipping elements

Folding elements

Summary

What You Will Learn

How the CSS framework consistently themes the widgets and how these styles can be used in your own code

Create a custom jQuery UI widget using the widget library

The underlying mark-up required by different components, and how each widget or interaction helper is initialized

Configure the different components, and the different options that each component uses

Work with each widget programmatically using its methods and event hooks

Practical examples of how each component can be used

Add flair to your interface with animation effects

In Detail

jQuery UI, the official suite of plugins for the jQuery JavaScript library, gives you a solid platform on which to build rich and engaging interfaces with maximum compatibility, stability, and a minimum of time and effort.

jQuery UI has a series of ready-made user interface widgets and a comprehensive set of core interaction helpers to reduce the amount of code that you need to write to take a project from conception to completion.

jQuery UI 1.8: The User Interface Library for jQuery has been specially revised for version 1.8 of jQuery UI. It is written to maximize your experience with the library by breaking down each component and walking you through examples that progressively build upon your knowledge, taking you from beginner to advanced usage in a series of easy-to-follow steps.

Throughout the book, you'll learn how each component can be initialized in a basic default implementation and then customize and configure each component to tailor it to your application. You'll look at the configuration options and the methods exposed by each component's API to see how these can be used to bring out the best of the library. Each chapter will also show you the custom events fired by the component covered and how these events can be intercepted and acted upon.

Authors

Dan Wellman

Dan Wellman is an author and frontend engineer living on the South Coast of the UK and working in London. By day he works for Skype and has a blast writing application-grade JavaScript. By night he writes books and tutorials focused mainly on frontend web development. He is also a staff writer for the Tuts+ arm of the Envato network, and occasionally writes for .Net magazine. He's the proud father of four amazing children, and the grateful husband of a wonderful wife.

Alerts & Offers

Series & Level

We understand your time is important. Uniquely amongst the major publishers, we seek to develop and publish the broadest range of learning and information products on each technology. Every Packt product delivers a specific learning pathway, broadly defined by the Series type. This structured approach enables you to select the pathway which best suits your knowledge level, learning style and task objectives.

Learning

As a new user, these step-by-step tutorial guides will give you all the practical skills necessary to become competent and efficient.

Beginner's Guide

Friendly, informal tutorials that provide a practical introduction using examples, activities, and challenges.

Essentials

Fast paced, concentrated introductions showing the quickest way to put the tool to work in the real world.

Cookbook

A collection of practical self-contained recipes that all users of the technology will find useful for building more powerful and reliable systems.

Blueprints

Guides you through the most common types of project you'll encounter, giving you end-to-end guidance on how to build your specific solution quickly and reliably.

Mastering

Take your skills to the next level with advanced tutorials that will give you confidence to master the tool's most powerful features.

Starting

Accessible to readers adopting the topic, these titles get you into the tool or technology so that you can become an effective user.

Progressing

Building on core skills you already have, these titles share solutions and expertise so you become a highly productive power user.