jQuery UI 1.10: The User Interface Library for jQuery

Need to learn how to use JQuery UI speedily? Our guide will take you through implementing and customizing each library component in clear, concise steps, all supported by practical examples to make learning faster.

jQuery UI 1.10: The User Interface Library for jQuery

Progressing
Alex Libby, Dan Wellman

Need to learn how to use JQuery UI speedily? Our guide will take you through implementing and customizing each library component in clear, concise steps, all supported by practical examples to make learning faster.
$29.99
$49.99
RRP $29.99
RRP $49.99
eBook
Print + eBook
$12.99 p/month

Get Access

Get Unlimited Access to every Packt eBook and Video course

Enjoy full and instant access to over 3000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781782162209
Paperback502 pages

About This Book

  • Packed with clear explanations of how to easily design elegant and powerful frontend interfaces for your web applications
  • A section covering the widget factory including an in-depth example of how to build a custom jQuery UI widget
  • Revised with updated code and targeted at both jQuery UI 1.10 and jQuery 2

Who This Book Is For

This book is for frontend designers and developers who need to learn how to use jQuery UI quickly. 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
Understanding the structure of the library
Working with ThemeRoller
Categorizing the component categories
Browser support
Using the book examples
Library licensing
Introducing the API
Summary
Chapter 2: The CSS Framework and Other Utilities
Working with the files that make up the framework
Linking to the required framework files
Using the framework classes
Switching themes quickly and easily
The position utility
Positioning with a function
Using the position widget in a real-world example
The widget factory
Summary
Chapter 3: Using the Tabs Widget
Implementing a tab widget
Styling the Tabs widget
Applying a custom theme to the tabs
Configuring the Tabs widget
Working with tabs
Working with the Tab events
Using tab methods
Enabling and disabling tabs
Adding and removing tabs
Simulating clicks
Destroying tabs
Getting and setting options
Working with AJAX tabs
Changing the URL of a remote tab's content
Displaying data obtained via JSONP
Summary
Chapter 4: The Accordion Widget
Structuring the accordion widget
Styling the accordion
Configuring an accordion
Changing the trigger event
Changing the default active header
Filling the height of its container
Using the accordion animation
Listing the accordion events
Using the change event
Configuring the beforeActivate event
Explaining the accordion methods
Adding or removing panels
Resizing an accordion panel
Accordion interoperability
Summary
Chapter 5: The Dialog
Creating a basic dialog
Listing the dialog options
Adding buttons
Enabling dialog animations
Configuring the dialog's dimensions
Setting the z-index order of dialogs
Handling the dialog's event callbacks
Controlling a dialog programmatically
Getting data from the dialog
Exploring dialog interoperability
Creating a dynamic image-based dialog
Summary
Chapter 6: The Slider and Progressbar Widgets
Introducing the slider widget
Custom styling
Configuring a basic slider
Using the slider's event API
Practical uses
Creating a color slider
Introducing the progressbar widget
Responding to user interaction
Implementing rich uploads with a progressbar
Summary
Chapter 7: The Datepicker Widget
Implementing the datepicker widget
Configurable options of the datepicker
Minimum and maximum dates
Changing the elements in the datepicker UI
Configuring alternative animations
Updating an additional input element
Changing the date format
Introducing the utility methods
Listing the datepicker methods
Implementing an AJAX-enabled datepicker
Summary
Chapter 8: The Button and Autocomplete Widgets
Introducing the button widget
Introducing the autocomplete widget
Configurable autocomplete options
Working with autocomplete events
The autocomplete methods
Displaying HTML in the list of suggestions
Summary
Chapter 9: Creating Menus
Implementing a basic menu widget
Exploring the menu CSS framework classes
Configuring menu options
Styling menus
Using menu methods
Enabling and disabling menu options programmatically
Adding and removing menu items
Working with menu events
Binding to events
Creating horizontal menus
Combining with other widgets
Designing context menus
Enhancing a select menu
Summary
Chapter 10: Working with Tooltips
Implementing a default tooltip
Exploring the tooltip CSS framework classes
Overriding the default styles
Configuring tooltip options
Positioning tooltips accurately
Tracking mouse movement with tooltips
Displaying certain tooltips
Displaying AJAX content in tooltips
Using effects in tooltips
Working with HTML in tooltips
Using tooltip methods
Enabling and disabling tooltips
Displaying tooltips programmatically
Handling tooltip events
Playing videos
Filling out and validating forms
Summary
Chapter 11: Drag and Drop
The deal with draggables and droppables
Getting started with the draggable widget
Configuring the draggable options
Draggable event callbacks
Draggable's methods
Getting started with the droppable widget
Configuring droppables
Configuring drop tolerance
Understanding the droppable callback options
Droppable methods
Creating a maze game using the widgets
Summary
Chapter 12: The Resizable Component
Implementing a basic resizable widget
Listing the resizable options
Defining resizable events
Looking at the resizable methods
Creating resizable tabs
Summary
Chapter 13: Selecting and Sorting with jQuery UI
Introducing the selectable widget
Introducing the Selectee class names
Configuring the selectable component
Handling selectable events
Working with selectable methods
Creating a selectable image viewer
Getting started with the sortable widget
Styling the sortable widget
Configuring sortable options
Reacting to sortable events
Connecting callbacks
Listing the sortable methods
Exploring widget compatibility
Summary
Chapter 14: UI Effects
Using the core effects file
Highlighting specified elements
Bouncing
Shaking an element
Scaling elements on a page
Exploding elements on a page
Creating a puff effect
Working with the pulsate effect
Adding the drop effect to elements
Implementing the sliding effect
Understanding the blind effect
Clipping elements
Folding elements
Summary

What You Will Learn

  • Theming of the widgets through the CSS framework
  • Apply themes and widgets to style your interface
  • Configure the different components, including the new Tooltip and Menu widgets
  • Understand the different options that each component uses
  • Learn more about each widget programmatically using its methods and event hooks
  • Add flair to your interface with animation effects
  • Discover advanced functionality supported by the different Tabs

In Detail

jQuery UI, the official UI widget library for jQuery, gives you a solid platform on which to build rich and engaging interfaces quickly, with maximum compatibility, stability, and effort. jQuery UI’s ready-made widgets help to reduce the amount of code that you need to write to take a project from conception to completion.

jQuery UI 1.10: The User Interface Library for jQuery has been specially revised for Version 1.10 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 up your knowledge, taking you from beginner to advanced user in a series of easy-to-follow steps.

Throughout the book, you'll learn how to create a basic implementation of each component, then customize and configure the components to tailor them to your application.

Each chapter will also show you the custom events fired by the components covered and how these events can be intercepted and acted upon to bring out the best of the library.

We will then go on to cover the use of visually engaging, highly configurable user interface widgets. At the end of this book, we'll look at the functioning of all of the UI effects available in the jQuery UI library.

Authors

Table of Contents

Chapter 1: Introducing jQuery UI
Downloading the library
Setting up a development environment
Understanding the structure of the library
Working with ThemeRoller
Categorizing the component categories
Browser support
Using the book examples
Library licensing
Introducing the API
Summary
Chapter 2: The CSS Framework and Other Utilities
Working with the files that make up the framework
Linking to the required framework files
Using the framework classes
Switching themes quickly and easily
The position utility
Positioning with a function
Using the position widget in a real-world example
The widget factory
Summary
Chapter 3: Using the Tabs Widget
Implementing a tab widget
Styling the Tabs widget
Applying a custom theme to the tabs
Configuring the Tabs widget
Working with tabs
Working with the Tab events
Using tab methods
Enabling and disabling tabs
Adding and removing tabs
Simulating clicks
Destroying tabs
Getting and setting options
Working with AJAX tabs
Changing the URL of a remote tab's content
Displaying data obtained via JSONP
Summary
Chapter 4: The Accordion Widget
Structuring the accordion widget
Styling the accordion
Configuring an accordion
Changing the trigger event
Changing the default active header
Filling the height of its container
Using the accordion animation
Listing the accordion events
Using the change event
Configuring the beforeActivate event
Explaining the accordion methods
Adding or removing panels
Resizing an accordion panel
Accordion interoperability
Summary
Chapter 5: The Dialog
Creating a basic dialog
Listing the dialog options
Adding buttons
Enabling dialog animations
Configuring the dialog's dimensions
Setting the z-index order of dialogs
Handling the dialog's event callbacks
Controlling a dialog programmatically
Getting data from the dialog
Exploring dialog interoperability
Creating a dynamic image-based dialog
Summary
Chapter 6: The Slider and Progressbar Widgets
Introducing the slider widget
Custom styling
Configuring a basic slider
Using the slider's event API
Practical uses
Creating a color slider
Introducing the progressbar widget
Responding to user interaction
Implementing rich uploads with a progressbar
Summary
Chapter 7: The Datepicker Widget
Implementing the datepicker widget
Configurable options of the datepicker
Minimum and maximum dates
Changing the elements in the datepicker UI
Configuring alternative animations
Updating an additional input element
Changing the date format
Introducing the utility methods
Listing the datepicker methods
Implementing an AJAX-enabled datepicker
Summary
Chapter 8: The Button and Autocomplete Widgets
Introducing the button widget
Introducing the autocomplete widget
Configurable autocomplete options
Working with autocomplete events
The autocomplete methods
Displaying HTML in the list of suggestions
Summary
Chapter 9: Creating Menus
Implementing a basic menu widget
Exploring the menu CSS framework classes
Configuring menu options
Styling menus
Using menu methods
Enabling and disabling menu options programmatically
Adding and removing menu items
Working with menu events
Binding to events
Creating horizontal menus
Combining with other widgets
Designing context menus
Enhancing a select menu
Summary
Chapter 10: Working with Tooltips
Implementing a default tooltip
Exploring the tooltip CSS framework classes
Overriding the default styles
Configuring tooltip options
Positioning tooltips accurately
Tracking mouse movement with tooltips
Displaying certain tooltips
Displaying AJAX content in tooltips
Using effects in tooltips
Working with HTML in tooltips
Using tooltip methods
Enabling and disabling tooltips
Displaying tooltips programmatically
Handling tooltip events
Playing videos
Filling out and validating forms
Summary
Chapter 11: Drag and Drop
The deal with draggables and droppables
Getting started with the draggable widget
Configuring the draggable options
Draggable event callbacks
Draggable's methods
Getting started with the droppable widget
Configuring droppables
Configuring drop tolerance
Understanding the droppable callback options
Droppable methods
Creating a maze game using the widgets
Summary
Chapter 12: The Resizable Component
Implementing a basic resizable widget
Listing the resizable options
Defining resizable events
Looking at the resizable methods
Creating resizable tabs
Summary
Chapter 13: Selecting and Sorting with jQuery UI
Introducing the selectable widget
Introducing the Selectee class names
Configuring the selectable component
Handling selectable events
Working with selectable methods
Creating a selectable image viewer
Getting started with the sortable widget
Styling the sortable widget
Configuring sortable options
Reacting to sortable events
Connecting callbacks
Listing the sortable methods
Exploring widget compatibility
Summary
Chapter 14: UI Effects
Using the core effects file
Highlighting specified elements
Bouncing
Shaking an element
Scaling elements on a page
Exploding elements on a page
Creating a puff effect
Working with the pulsate effect
Adding the drop effect to elements
Implementing the sliding effect
Understanding the blind effect
Clipping elements
Folding elements
Summary

Book Details

ISBN 139781782162209
Paperback502 pages
Read More