jQuery UI

Introduction to jQuery UI

  • JQuery UI is a organized set of user interface interactions, effects, widgets and themes built on top of the JQuery JavaScript Library.
  • JQuery UI is the perfect choice for designers and developers.
  • It is a widget and interaction library built on top of the JQuery JavaScript Library that can be used for building highly interactive web applications.
  • It is used to design the speed on how JQuery UI works.
  • The JQuery UI API is designed to be as simple and intuitive as the jQuery API.

Widgets in jQuery UI

  • Widget is a simple and easy-to-use component.
  • Widgets are feature-rich, stateful plugins that have a full life-cycle, along with methods and events.
  • It is a generic term for a bit of self-contained code that displays a program, or a piece of a program.
Following are the widgets and their uses:

WidgetDescription
Accordion WidgetIt converts a pair of headers and content panels into an accordion.
Autocomplete WidgetAutocomplete enables user to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.
Button WidgetThemeable buttons.
Buttonset WidgetThemeable button sets.
Datepicker WidgetIt selects a date from a popup or inline calendar.
Dialog WidgetIt opens the content in an interactive overlay.
Widget FactoryIt creates stateful JQuery plugins using the same abstraction as all JQuery UI widgets.
Widget Plugin BridgePart of the JQuery Widget Factory is the jQuery.widget.bridge() method.

This acts as the middleman between the object created by $.widget() and the JQuery API.
Menu WidgetThemeable menu with mouse and keyboard interactions for navigation.
Progressbar WidgetIt displays status of a determinate or indeterminate process.
Selectmenu WidgetIt duplicates and extends the functionality of a native HTML select element to overcome the limitations of the native control.
Slider WidgetIt drags a handle to select a numeric value.
Spinner WidgetIt enhances a text input for entering numeric values, with up/down buttons and arrow key handling.
Tabs WidgetA single content area with multiple panels, each associated with a header in a list.
Tooltip WidgetCustomizable, themeable tooltips, replacing native tooltips.

Selectors in jQuery UI

SelectorsDescription
:data() SelectorIt selects element which have data stored under the specified key.
:focusable SelectorIt selects element which can be focused.
:tabbable SelectorIt selects element which the user can focus via tabbing.

Methods in jQuery UI

JQuery UI MethodsDescription
.disableSelection()It disables selection of text content within the set of matched elements.
.effect()It applies an animation effect to an element.
.enableSelection()It enables selection of text content within the set of matched elements.
.focus()Asynchronously set focus to an element.
.hide()It hides the matched elements, using custom effects.
.position()Position an element relative to another.
.removeUniqueId()It removes id that were set by .uniqueId() for the set of matched elements.
.scrollParent()It gets the closest ancestor element that is scrollable.
.show()It displays the matched elements, using custom effects.
.toggle()It displays or hides the matched elements, using custom effects.
.uniqueId()It generates a unique id for the set of matched elements.
.zIndex()It gets the z-index for an element.

Effects used in JQuery UI

JQuery UI EffectsDescription
.addClass()It adds the specified classes to each of the set of matched elements while animating all style changes.
Blind EffectIt hides or shows an element by wrapping the element in a container and pulling the blinds.
Bounce EffectIt bounces an element by clipping the element vertically or horizontally.
Color AnimationIt animates the colors using .animate().
Drop EffectsIt hides or shows an element fading in / out and sliding in a direction.
Clip EffectIt hides or shows an element by clipping the element vertically or horizontally.
EasingsIt specifies the speed at which an animation progresses at different points within the animation.
.effect()It applies an animation effect to an element.
Explode EffectIt hides or shows an element by splitting it into pieces.
Fade EffectIt hides or shows an element by fading it.
Fold EffectIt hides or shows an element by folding it.
.hide()It hides the matched elements, using custom effects.
Highlight EffectIt hides or shows an element by animating its background color first.
Puff EffectIt creates a puff effect by scaling the element up and hiding it at the same time.
Pulsate EffectIt hides or shows an element by pulsing it in or out.
.removeClass()It removes the specified class(es) from each of the set of matched elements while animating all style changes.
Scale EffectIt shrinks or grows an element by a percentage factor.
Shake EffectIt shakes the element multiple times, vertically or horizontally.
.show()It displays the matched elements, using custom effects.
Size EffectIt resizes an element to a specified width and height.
Slide EffectIt slides the element out of the viewport.
.switchClass()It adds and removes the specified class(es) to each of the set of matched elements while animating all style changes.
.toggle()It displays or hides the matched elements, using custom effects.
.toggleClass()It adds or removes one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the switch argument, while animating all style changes.
Transfer EffectTransfers the outline of an element to another element.