jQuery UI

jQuery UI

Developer(s)	The jQuery Project
Stable release	1.8.23 / August 15, 2012 (2012-08-15)
Preview release	1.9 RC / August 24, 2012 (2012-08-24)
Repository	github.com/jquery/jquery-ui
Written in	JavaScript
Type	Web application framework Plugin
License	GPL and MIT
Website	http://jqueryui.com/

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 blog post by John Resig on jquery.com. The latest release requires jQuery 1.3.2 or later.

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:

Interactions

• Draggable – Make elements draggable
• Droppable – Control where dragged elements may be dropped
• Resizable – Make elements resizeable:
• 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.

• 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:
• 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

 $(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.

Release date	Version number	jQuery Dependency	Additional notes
			Initial release
June 8, 2008	1.5
April 16, 2009	1.6	1.2.6	Compatibility release for jQuery 1.2.6.
March 3, 2009	1.7	1.3.2+
March 18, 2010	1.8	1.3.2+
Jan 19, 2011	1.8.9	1.3.2+
Feb 22, 2011	1.8.10	1.3.2+
March 15, 2011	1.8.11	1.3.2+
April 13, 2011	1.8.12	1.3.2+
May 12, 2011	1.8.13	1.3.2+
Jun 17, 2011	1.8.14	1.3.2+
Aug 1, 2011	1.8.15	1.3.2+
Aug 15, 2011	1.8.16	1.3.2+
Jan 10, 2012	1.8.17	1.3.2+
Feb 20, 2012	1.8.18	1.3.2+
Apr 16, 2012	1.8.19	1.3.2+
Apr 30, 2012	1.8.20	1.3.2+
June 5, 2012	1.8.21	1.3.2+
July 24, 2012	1.8.22	1.3.2+
August 15, 2012	1.8.23	1.3.2+

Further reading

• Sarrion, Eric (March 24, 2012). jQuery UI (1st ed.). O'Reilly Media. p. 244. ISBN 978-1449316990.
• Wellman, Dan (August 23, 2011). jQuery UI 1.8: The User Interface Library for jQuery (1st ed.). Packt Publishing. p. 424. ISBN 978-1849516525.

External links

• Official website