Book Image

jQuery UI 1.10: The User Interface Library for jQuery - Fourth Edition

Book Image

jQuery UI 1.10: The User Interface Library for jQuery - Fourth Edition

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
jQuery UI 1.10: The User Interface Library for jQuery - Fourth Edition
Dec, 2013 | 502 pages
No titles found
Table of Contents (22 chapters)
jQuery UI 1.10: The User Interface Library for jQuery
jQuery UI 1.10: The User Interface Library for jQuery
Credits
Credits
About the Authors
About the Authors
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Introducing jQuery UI
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
2
The CSS Framework and Other Utilities
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
3
Using the Tabs Widget
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
4
The Accordion Widget
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
5
The Dialog
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
6
The Slider and Progressbar Widgets
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
7
The Datepicker Widget
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
8
The Button and Autocomplete Widgets
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
9
Creating Menus
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
10
Working with Tooltips
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
11
Drag and Drop
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
12
The Resizable Component
The Resizable Component
Implementing a basic resizable widget
Listing the resizable options
Defining resizable events
Looking at the resizable methods
Creating resizable tabs
Summary
13
Selecting and Sorting with jQuery UI
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
14
UI Effects
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
Help and Support
Help and Support
Downloading jQuery
Getting help
Changing themes
Getting help from the community
Need to ask a question?
Getting help via IRC chat
Asking at Stack Overflow
Reporting a bug in the library
Index
Index

Setting the z-index order of dialogs

The dialog is made so that it appears above any of the existing page content. We can alter its z-index setting using CSS, or by ensuring it is correctly appended to its parent element using the appendTo option, in case we need to raise it slightly to cover our existing content. But what if we have two dialogs on the page? Do we need to separately define zIndex for each dialog? How is focus taken into consideration?

Let's see if we can answer these questions by looking at another example; change the <body> tag of dialog7.html so that it has two dialog boxes on it:

<div id="dialog1" title="Dialog 1">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean sollicitudin. Sed interdum pulvinar justo. Nam aculis
volutpat ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est.
</div>
<div id="dialog2" title="Dialog 2">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin...
Previous Section
End of Section 7
Next Section