JQUERY UI

ICS 665

Jesse Abdul

jQuery UI Overview

jQuery UI javascript libraryIncludes all UI component functionality

jQuery UI CSS frameworkIncludes standard images and CSS for all UI

components including icons

jQuery UI Overview jQuery UI was first released in September 2007 jQuery UI is a curated set of user interface

interactions, effects, widgets and themes built on top of the jQuery JavaScript Library. This library provides all of the UI components

necessary to develop rich interactive web applications with all of the standard UI functionality available on desktop applications

Free open source software, licensed under the MIT license

Requires on the jQuery library for functionality

jQuery UI Advantages Quick and easy to implement

Can quickly add UI components to your application with minimal effort (e.g. adding a date picker)

Extensive demos available including source code for all examples

Leverages the advantages that the jQuery library provides (e.g. cross browser compatibility, call chaining, etc.)

Themeing ability for all widgets and icons

jQuery UI Components

Interactions Effects Methods Widgets

Interactions

InteractionsInteractions add basic mouse-based

behaviors to any element and can be used by many of the widgets and effects. You can create sortable lists, resizable elements, and drag & drop behaviors with minimal code

Effects Effects

Extends jQuery’s built-in effects by adding support for animating colors and class transitions as well as providing several easings○ Easing functions specify the speed at which animation

progresses at different points within the animation. jQuery core’s default has two easings: linear (constant speed) and swing (progresses slower at beginning and end of animation)

A full suite of custom effects are available for use when showing and hiding elements or just to add some visual appeal○ Examples: bounce, drop, fade, etc.

These effects can provide rich user interaction and are very configurable

Methods

Methods are added for convenience. They extend some of the jQuery functionality to provide extra UI functionalityExample: jQuery UI show() method

functions exactly like the jQuery show() method except it accepts parameters for animations and UI effects for the elements that are affected by the method call

Widgets Plugins

○ Object implementation including options, methods (both private and public) and events

○ jQuery UI widgets maintain state information e.g. Tabs widget maintains information on which tab is selected

○ jQuery UI widgets have a slightly different usage pattern than typical jQuery plugins jQuery plugins will use a named plugin method and supply arguments to the method

jQuery UI widgets use the widget name as a method call and then pass in arguments to the call to inform the behavior of the plugin

○ All of the jQuery UI widgets use the same patterns so if you learn how to use one, then you’ll know how to use all of them

Fully featured UI controls; each has a range of options and is fully themeable

All widgets provide a solid core with numerous extension points for customizing behavior (e.g. specifying options)

Available Widgets (Accordion)

Accordion – displays content panels for presenting information in a limited amount of space

Available Widgets (Tabs)

Tabs – a single content area with multiple panels, each associated with a header in a list

Also includes native ability to load remote content via Ajax for the panel content

Available Widgets (Dialog) Dialog – Open content in an interactive

overlay

Available Widgets (Tooltip) Tooltip – Customizable, themeable

tooltips, replacing native tooltips

Available Widgets (continued) Autocomplete – Allows users to quickly find and select from a

pre-populated list of values as they type Button – Enhances standard form elements like buttons,

inputs and anchors to themeable buttons with appropriate hover and active styles

Datepicker – Select a date from a popup or inline calendar Menu – Themeable menu with mouse and keyboard

interactions for navigation Progressbar – Display status of a determinate or

indeterminate process Slider – Drag a handle to select a numeric value Spinner – Enhance an HTML text input field for entering

numeric values with up/down buttons and arrow key handling

Getting Started Build custom jQuery UI download

Choose which version of jQuery UI (stable vs. legacy) Allows a developer to choose which components to download to get a

custom version of the library for a particular project. (This reduces the amount of unnecessary code)○ Download provides a “minified” version of the code to reduce JavaScript file

size Select an existing theme or build your own custom theme using the

ThemeRoller Interface○ Allows all aspects of a global jQuery UI theme to be defined from color

schemes and fonts to border radiuses. ○ Provides a very flexible framework to allow multiple themes to be implemented

on a single web application that will apply to all UI components○ A new theme can be easily applied to an existing application without disrupting

any of the application code itself (just by downloading a new theme and switching the external css reference to the new theme directory)

Extract the zip file to a web-enabled directory The index page contains working examples of all default functionality for the

downloaded widgets

Getting Started (Installing jQuery) Setting up jQuery is very straightforward

and easyInclude the CSS framework fileInclude the jQuery fileInclude the jQuery UI file

Getting Started (Adding a Widget) Simple example (date picker)

To add a date picker to your application create the HTML text field

To implement the date picker widget simply initialize the date picker widget and bind it to the text field (using the HTML id attribute)

The result is the fully functional date picker widget to help a user pick a date

Getting Started (Customizing Widget) jQuery UI allows you to customize widgets in

several ways including implementation Using Options

Each widget in jQuery UI has a default configuration which is catered to the most basic and common use case. If you want a widget to behave different from its default configuration you can override each of its default settings using options.

Options are a set of properties passed into a jQuery UI widget as an argument. The defined set of available options are listed in the API reference

Getting Started (Widget Options) Example:

A slider widget’s default behavior is a horizontal bar for specifying numeric values

Configuration options can be specified to modify default behavior

If there is more than one option specified they are supplied as comma-delimited name/value pairs

Getting Started (Widget Events)

Widgets can also be customized by specifying event handlers for various widget events. This can modify the default behavior by executing custom client-side code when various widget events occur.

Extending jQuery UI

Widget FactoryThis module provides a developer with the

ability to create stateful jQuery UI plugins using the same abstraction as all jQuery UI widgets.

A developer can develop custom widgets from scratch or extend the functionality of an existing widget.○ Allows a new widget to inherit from an existing

parent widget (subclassing)

Widget Factory (Continued) Inheritance:

This simple example creates a new widget called superDialog based on the native jQuery UI dialog widget.

The $.widget call defines the new widget using the widget factory

The second argument can be an existing widget to inherit from ($.ui.dialog)

This widget defines one additional method “red” that changes the color of the dialog text to red. Otherwise superDialog can be called just like a native jQuery UI dialog widget

Widget Factory (Continued) Instantiating widget

To create the instance of the widget simply add the HTML code for the superDialog

Instantiate the superDialog widget and call the red() method (supports call chaining)

The result is the default dialog widget with red body text

Widget Factory Possibilities Integrating Ajax into existing widgets by

creating new Ajax-enabled widgets based on the core jQuery UI widgets

Creating new widgets that perform application-specific functions that can make development easier by customizing the widgets and making the javascript calling code cleaner.

Sources

http://jqueryui.com/ http

://learn.jquery.com/jquery-ui/widget-factory/how-to-use-the-widget-factory/

http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/