Stacking Elements Widgets that stack, or move in front of other elements, often present challenges when placed into real world pages. It's usually easy to either change the z-index or parent of the stacked element to avoid any collisions on the page. However, jQuery UI needs a generic solution that doesn't require manually playing with z-index values. This is accomplished via the ui-front class, and usually an accompanying appendTo option on stacking widgets. The ui-front class The ui-front c

Duplicates and extends the functionality of a native HTML select element to overcome the limitations of the native control. Selectmenu transforms a <select> element into a themeable and customizable control. The widget acts as a proxy to the original <select>; therefore the original element's state is maintained for form submission and serialization. Selectmenu supports <optgroup> elements and custom markup to render specific present

Display or hide the matched elements, using custom effects. This plugin extends jQuery's built-in .toggle() method. If jQuery UI is not loaded, calling the .toggle() method may not fail directly, as the method still exists. However, the expected behavior will not occur. .toggle( effect [, options ] [, duration ] [, complete ] ) effect

Shakes the element multiple times, vertically or horizontally. shake direction (default: "left") String A value of "left" or "right" will shake the element horizontally, and a value of "up" or "down" will shake the element vertically. The value specifies which direction the element should move

Adds and removes the specified class(es) to each of the set of matched elements while animating all style changes. The .switchClass() method allows you to animate the transition of adding and removing classes at the same time. Similar to native CSS transitions, jQuery UI's class animations provide a smooth transition from one state to another while allowing you to keep all the details about which styles to change in CSS and out of your JavaScript. Al

Display the matched elements, using custom effects. This plugin extends jQuery's built-in .show() method. If jQuery UI is not loaded, calling the .show() method may not fail directly, as the method still exists. However, the expected behavior will not occur. .show( effect [, options ] [, duration ] [, complete ] ) effect

Resize an element to a specified width and height. size to Object Height and width to resize to. origin (default: [ "top", "left" ]) Array The vanishing point.

Slides the element out of the viewport. slide direction (default: "both") String The direction of the effect. Possible values: "left", "right", "up", "down". distance (default: element's outerWidth) Number

Use the mouse to select elements, individually or in a group. The jQuery UI Selectable plugin allows for elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Elements can also be selected via click or drag while holding the ctrl/meta key, allowing for multiple (non-contiguous) selections. Dependencies UI Core Widget Factory Mouse Interaction This widget requires some functional CSS, otherwise it won

Reorder elements in a list or grid using the mouse. The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse. Note: In order to sort table rows, the tbody must be made sortable, not the table. Dependencies UI Core Widget Factory Mouse Interaction appendTo Type: jQuery or Element or Selector or String Default: "parent" Defines where the helper that moves with the mouse is being appended