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/