| Widget | Description |
|---|
| Accordion Widget | It converts a pair of headers and content panels into an accordion. |
| Autocomplete Widget | Autocomplete enables user to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. |
| Button Widget | Themeable buttons. |
| Buttonset Widget | Themeable button sets. |
| Datepicker Widget | It selects a date from a popup or inline calendar. |
| Dialog Widget | It opens the content in an interactive overlay. |
| Widget Factory | It creates stateful JQuery plugins using the same abstraction as all JQuery UI widgets. |
| Widget Plugin Bridge | Part 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 Widget | Themeable menu with mouse and keyboard interactions for navigation. |
| Progressbar Widget | It displays status of a determinate or indeterminate process. |
| Selectmenu Widget | It duplicates and extends the functionality of a native HTML select element to overcome the limitations of the native control. |
| Slider Widget | It drags a handle to select a numeric value. |
| Spinner Widget | It enhances a text input for entering numeric values, with up/down buttons and arrow key handling. |
| Tabs Widget | A single content area with multiple panels, each associated with a header in a list. |
| Tooltip Widget | Customizable, themeable tooltips, replacing native tooltips. |
| Selectors | Description |
|---|
| :data() Selector | It selects element which have data stored under the specified key. |
| :focusable Selector | It selects element which can be focused. |
| :tabbable Selector | It selects element which the user can focus via tabbing. |
| JQuery UI Methods | Description |
|---|
| .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. |
| JQuery UI Effects | Description |
|---|
| .addClass() | It adds the specified classes to each of the set of matched elements while animating all style changes. |
| Blind Effect | It hides or shows an element by wrapping the element in a container and pulling the blinds. |
| Bounce Effect | It bounces an element by clipping the element vertically or horizontally. |
| Color Animation | It animates the colors using .animate(). |
| Drop Effects | It hides or shows an element fading in / out and sliding in a direction. |
| Clip Effect | It hides or shows an element by clipping the element vertically or horizontally. |
| Easings | It specifies the speed at which an animation progresses at different points within the animation. |
| .effect() | It applies an animation effect to an element. |
| Explode Effect | It hides or shows an element by splitting it into pieces. |
| Fade Effect | It hides or shows an element by fading it. |
| Fold Effect | It hides or shows an element by folding it. |
| .hide() | It hides the matched elements, using custom effects. |
| Highlight Effect | It hides or shows an element by animating its background color first. |
| Puff Effect | It creates a puff effect by scaling the element up and hiding it at the same time. |
| Pulsate Effect | It 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 Effect | It shrinks or grows an element by a percentage factor. |
| Shake Effect | It shakes the element multiple times, vertically or horizontally. |
| .show() | It displays the matched elements, using custom effects. |
| Size Effect | It resizes an element to a specified width and height. |
| Slide Effect | It 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 Effect | Transfers the outline of an element to another element. |
