Free software portal

jQuery UI is a JavaScript library that provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript library, that can be used to build interactive web applications. It was released in September 2007 announced in a jQuery's blog post by John Resig.^[2] The latest release requires jQuery 1.3.2 or later^[3]

jQuery UI is free, open source software, dual-licensed under the MIT License and the GNU General Public License, Version 2.

Features

As of the 1.8.11 release^[4]:

Interactions

• Draggable - Make elements draggable
• Droppable - Control where dragged elements may be dropped
• Resizable - Make elements resizeable ^[5]:
• Selectable - Advanced selection features for lists of elements
• Sortable - Make a list of elements easily sortable

Widgets

All of jQuery UI's widgets are fully themeable using a consolidated, coordinated theme mechanism demonstrated by their ThemeRoller.

• Accordion - Accordion containers
• Autocomplete - Auto-complete boxes based on what the user types
• Button - Enhanced button appearance, turn radio buttons and checkboxes into pushbuttons
• Datepicker - Advanced date-picker
• Dialog - Show dialog boxes on top of other content, easily and robustly
• Progressbar - Progress bars, both animated and not
• Slider - Fully customizable sliders with various features ^[6]:
• Tabs - Tabbed user interface handling, with both inline and demand-loaded content

Effects

• Color Animation - Animate the transition from one color to another
• Toggle Class, Add Class, Remove Class, Switch Class - Animate the transition from one set of styles to another
• Effect - A variety of effects (appear, slide-down, explode, fade-in, etc.)
• Toggle - Toggle an effect on and off
• Hide, Show - Using the effects above

Utilities

• Position - Set an element's position relative to another element's position (alignment)

Example

<script type="text/javascript">
 // Make #draggable draggable when the page has loaded.
 // $(f) is shorthand for $(document).ready(f),
 // after document loading has been completed, f is called.
 
 $(function() {
 $("#draggable").draggable();
 });
</script>

<div id="draggable" style = "width: 150px; height: 150px; padding: 0.5em;" class="ui-widget-content">
 <p>Drag me around</p>
</div>

This makes the div with the ID "draggable" draggable by the user's mouse.

Release history

jQuery UI was launched on September 17th 2007^[7].

References

External links

• Official website