JQuery UI: Difference between revisions

Revision as of 20:56, 30 June 2015

Latest revision as of 14:39, 20 July 2025

(43 intermediate revisions by 32 users not shown)

Line 1:

{{Short description|JavaScript library}}

{{lowercase title}}

{{Infobox software

| logo = [[File:JQuery UI Logo.svg|220px]]

| logo size = 220px

| developer = {{Plainlist|

* Paul Bakaus

* Kris Borchers

* Scott González

* Jörn Zaefferer

* Felix Nagel

* Mike Sherov

* Rafael Xavier de Souza<ref>{{cite web |url = http://jqueryui.com/about/#jquery-ui-team |title = jQuery UI Team |website=jqueryui.com |access-date = 5 February 2016 |publisher = The jQuery Foundation}}</ref>

* Adam Sontag

* Jörn Zaefferer<ref>{{cite web |url = https://jquery.org/team/ |title = The jQuery Team |website=jQuery.com |accessdate = 12 June 2014 |publisher = The jQuery Foundation}}</ref>

}}

| latest release version = {{wikidata|property|preferred|references|edit@end|Q285960|P348|P548=Q2804309}}

| status = Active

| latest release date = {{release date and age|{{wikidata|qualifier|preferred|single|Q285960|P348|P548=Q2804309|P577}}}}

| latest release version = 1.11.4

| latest release date = {{release date|2015|03|11|df=yes}}<ref>{{cite web

| first = Scott

| last = González

| date = 11 March 2015

| url = http://blog.jqueryui.com/2015/03/jquery-ui-1-11-4/

| website = jqueryui.com

| title = jQuery UI 1.11.3

}}</ref>

| latest preview version = 1.11.0 beta 2

| latest preview date ={{release date|2014|05|23|df=yes}}<ref>{{cite web

| first = Jörn

| last = Zaefferer

| date = 23 May 2014

| url = http://blog.jqueryui.com/2014/05/jquery-ui-1-11-0-beta-2/

| website = jqueryui.com

| title = jQuery UI 1.11.0-beta.2

}}</ref>

| genre = [[Plug-in (computing)|Plug-in]]

| programming language = [[JavaScript]]

| license = [[MIT License]]<ref name="license">{{cite web |url = http://jquery.org/license/ |title = License |website=jQuery.com |accessdateaccess-date = 12 June 2014 |publisher = The jQuery Foundation}}</ref>

| website = {{URL|httphttps://jqueryui.com/}}

}}

{{Portal|Free and open-source software}}

'''jQuery UI''' is a collection of [[GUI widget]]s, animated visual effects, and [[Theme (computing)|themes]] implemented with [[jQuery]] (a [[JavaScript]] [[Library (computing)|library]]), [[Cascading Style Sheets]], and [[HTML]].<ref>{{cite book |last=Sarrion |first=Eric |date=2012 |title=jQuery UI |___location=Sebastopol |publisher=O'Reilly Media |pages=1–4 |isbn=9781449316990 |oclc=768796881}}</ref> AccordingUsing to JavaScript analytics service,the [[LibscoreShodan_(website)|Shodan]], jQuerysearch UIengine isquery usedterm on'''cpe:"cpe:/a:jquery/jquery_ui"''' overwe 176,000can websites,determine makingthat itjQuery theUI secondis mostused popularon JavaScriptapproximately library800k onweb the Websites.<ref>http://libscore.com/#libs</ref> Notable users include [[Pinterest]], [[PayPal]], [[IMDBIMDb]], [[Huffington PostHuffPost]], and [[Netflix]] are utilizing the library.<ref>http://libscore.com/#$.ui</ref>

Both jQuery and jQuery UI are [[free and open-source software]] distributed by the jQuery Foundation under the [[MIT License]]; jQuery UI was first published in September 2007.<ref name="license"/><ref name=release>{{cite web |url=http://blog.jquery.com/2007/09/17/jquery-ui-interactions-and-widgets |title=jQuery UI: Interactions and plug-ins |author=John Resig |date=17 September 2007 |accessdateaccess-date=12 August 2012 |publisher=jQuery blog}}</ref>

As of October 7, 2021 jQuery UI is in maintenance mode, with no new features being planned.<ref>{{cite web| url = https://blog.jquery.com/2021/10/07/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/| title =

jQuery maintainers update and transition jQuery UI as part of overall modernization efforts| date =

7 October 2021|access-date=6 December 2022|publisher=jQuery Blog}}</ref>

==Features==

As of the 1.911.04 andrelease, 2.0.3 release:<ref>{{cite web| url = http://jqueryui.com/demos/| title = jQuery UI Demos |accessdateaccess-date=125 AugustFebruary 20122016|publisher=jQuery UI}}</ref> interactions such as draggable/droppable and sortable are supported. jQueryUI comes with fully themeable widgets using a consolidated, coordinated theme mechanism,<ref>{{cite web| url = http://jqueryui.com/themeroller| title = jQuery UI: ThemeRoller|access-date=5 February 2016|publisher=jQuery UI}}</ref> such as Autocomplete, Datepicker, ProgressBar, Sliders, and more.

Effects include color animations, class toggling.

===Interactions= Example ==

<syntaxhighlight lang="javascript">

Draggable,

// Make the element with id "draggable" draggable

Droppable,

$(function () {

Resizable,

$("#draggable").draggable();

Selectable,

});

Sortable

</syntaxhighlight>

<syntaxhighlight lang="html">

===Widgets===

<div id="draggable">

All of jQuery UI's widgets are fully themeable using a consolidated, coordinated theme mechanism.<ref>{{cite web| url = http://jqueryui.com/themeroller| title = jQuery UI: ThemeRoller|accessdate=12 August 2012|publisher=jQuery UI}}</ref>

<p>Drag me around</p>

* '''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

* '''Menu''' – Show a Menu

* '''Progressbar''' – Progress bars, both animated and not

* '''Slider''' – Fully customizable sliders<ref>{{cite web

| url = http://www.innovativephp.com/jquery-featured-page-content-slider-plugin-tutorial-for-beginners/

| title = Jquery UI Examples – Creating a Page Content Slider |date=21 July 2011|accessdate=12 August 2012|publisher=Innovative PHP

}}</ref>

* '''Spinner''' – Show a Number Spinner

* '''Tabs''' – Tabbed user interface handling, with both inline and demand-loaded content

* '''Tooltip''' – Show a Tooltip

===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==

<source lang = "javascript">

<script type="text/javascript">

// Make #draggable draggable

$(function () {

$("#draggable").draggable();

});

</script>

</source>

<source lang="html4strict">

<div id="draggable" class="ui-widget-content">

<p>Drag me around</p>

</div>

</syntaxhighlight>

</source>

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

== See also ==

<source lang = "javascript">

* [[JavaScript framework]]

<script type="text/javascript">

* [[JavaScript library]]

// change css of an element

$(function () {

$("#demo").css('color','#069');

});

</script>

</source>

<source lang="html4strict">

<div id="demo">

Some text

</div>

</source>

This changes the css of the div with the ID "demo".

==Release history==

jQuery UI was launched on September 17, 2007.<ref name=release/>

{| class="wikitable sortable" border="0" style="width:600px;"

|-

! Release date<ref name="Changelog">{{cite web|url=http://jqueryui.com/docs/Changelog|title=jQuery UI - Documentation: UIChangelog|accessdate=April 2, 2012}}</ref>

! Version number

! [[jQuery]] Dependency

! Additional notes

|-

|

|

|

| Initial release<ref name=release/>

|-

|Jun 8, 2008

|1.5

|

|

|-

|Apr 16, 2009

|1.6

|1.2.6

|Compatibility release for jQuery 1.2.6.

|-

|Mar 3, 2009

|1.7

|1.3.2+

|

|-

|Mar 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+

|

|-

| Mar 15, 2011

| 1.8.11

| 1.3.2+

|

|-

| Apr 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+

|

|-

| Jun 5, 2012

| 1.8.21

| 1.3.2+

|

|-

| Jul 24, 2012

| 1.8.22

| 1.3.2+

|

|-

| Aug 15, 2012

| 1.8.23

| 1.3.2+

|

|-

| Sep 28, 2012

| 1.8.24

| 1.3.2+

|

|-

| Oct 8, 2012

| 1.9.0

| 1.6+

|

|-

| Oct 25, 2012

| 1.9.1

| 1.6+

|

|-

| Nov 23, 2012

| 1.9.2

| 1.6+

|

|-

| Jan 17, 2013

| 1.10.0

| 1.6+

| Dropped support for IE6<ref>[http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/ jQuery UI 1.10.0], retrieved on Feb 15, 2013</ref>

|-

| Feb 15, 2013

| 1.10.1

| 1.6+

|

|-

| Mar 14, 2013

| 1.10.2

| 1.6+

|

|-

| May 3, 2013

| 1.10.3

| 1.6+

|

|-

| Jan 17, 2014

| 1.10.4

| 1.6+

|

|-

| Apr 25, 2014

| 1.11.0-beta.1

| 1.6+

| Dropped support for IE7<ref>[http://blog.jqueryui.com/2014/04/jquery-ui-1-11-0-beta-1/ jQuery UI 1.11.0-beta.1], retrieved on May 1, 2014</ref>

|-

| May 23, 2014

| 1.11.0-beta.2

| 1.6+

|

|-

| Jun 26, 2014

| 1.11.0

| 1.6+

|

|-

| Aug 13, 2014

| 1.11.1

| 1.6+

|

|-

| Oct 16, 2014

| 1.11.2

| 1.6+

|

|-

| Feb 12, 2015

| 1.11.3

| 1.6+

|

|}

==References==

Line 302 ⟶ 59:

{{refbegin}}

* {{cite book

| first = Eric

| last = Sarrion

| date = March 24, 2012

| title = jQuery UI

| publisher = [[O'Reilly Media]]

| edition = 1st

| page = 244

| isbn = 978-1449316990

| url = http://shop.oreilly.com/product/0636920023159.do

}}

* {{cite book

| first = Dan

| last = Wellman

| date = August 23, 2011

| title = jQuery UI 1.8: The User Interface Library for jQuery

| publisher = [[Packt Publishing]]

| edition = 1st

| page = 424

| isbn = 978-1849516525

| url = http://www.packtpub.com/jquery-ui-1-8-user-interface-library/book

|archive-date = June 28, 2014

|access-date = April 29, 2012

|archive-url = https://web.archive.org/web/20140628090434/http://www.packtpub.com/jquery-ui-1-8-user-interface-library/book

|url-status = dead

}}

* {{cite book

| first = Dutson, Phillip

| last = de Jonge, Adriaan

| date = November 2, 2012

| title = jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples

| publisher = [[Addison-Wesley Professional]]

| edition = 1st

| page = 400

| isbn = 978-0-321-82208-6

| url = http://www.informit.com/title/0321822080

}}

{{refend}}

==External links==

* {{Official website|http://jqueryui.com/}}

{{Widget toolkits}}

{{Authority control}}

{{DEFAULTSORT:Jquery Ui}}

[[Category:JavaScript libraries]]

[[Category:2006 introductionssoftware]]

[[Category:Software using the MIT license]]

[[Category:CSS frameworks]]

[[Category:Drupal]]