Getting started with jQuery UI Library
Remarks#
jQuery UI is a JavaScript UI library, built on top of jQuery, offering a set of user interface interactions, effects and widgets.
Versions#
| Version | Release Date |
|---|---|
| 1.7.0 | 2009-03-06 |
| 1.7.1 | 2009-03-19 |
| 1.7.2 | 2009-06-12 |
| 1.7.4 | 2010-05-04 |
| 1.8.0 | 2010-03-23 |
| 1.8.1 | 2010-05-04 |
| 1.8.2 | 2010-06-07 |
| 1.8.4 | 2010-08-10 |
| 1.8.5 | 2010-09-17 |
| 1.8.6 | 2010-10-02 |
| 1.8.7 | 2010-12-10 |
| 1.8.8 | 2011-01-14 |
| 1.8.9 | 2011-01-21 |
| 1.8.10 | 2011-02-24 |
| 1.8.11 | 2011-03-18 |
| 1.8.12 | 2011-04-23 |
| 1.8.13 | 2011-05-17 |
| 1.8.14 | 2011-06-28 |
| 1.8.15 | 2011-08-08 |
| 1.8.16 | 2011-08-18 |
| 1.8.17 | 2012-01-10 |
| 1.8.18 | 2012-02-23 |
| 1.8.19 | 2012-04-17 |
| 1.8.20 | 2012-04-30 |
| 1.8.21 | 2012-06-05 |
| 1.8.22 | 2012-07-24 |
| 1.8.23 | 2012-08-15 |
| 1.8.24 | 2012-09-28 |
| 1.9.0 | 2012-10-08 |
| 1.9.1 | 2012-10-25 |
| 1.9.2 | 2012-11-23 |
| 1.10.0 | 2013-01-17 |
| 1.10.1 | 2013-02-15 |
| 1.10.2 | 2013-03-14 |
| 1.10.3 | 2013-05-03 |
| 1.10.4 | 2014-01-17 |
| 1.11.0 | 2014-06-26 |
| 1.11.1 | 2014-08-13 |
| 1.11.2 | 2014-10-16 |
| 1.11.3 | 2015-02-12 |
| 1.11.4 | 2015-03-11 |
Adding the jQuery UI script & basic usage
To get started with the jQuery UI library, you’ll need to add the jQuery script, the jQuery UI script, and the jQuery UI stylesheet to your HTML.
First, download jQuery UI; choose the features you need on the download page. Unzip your download, and put jquery-ui.css and jquery-ui.js (and jquery.js) in a folder where you can use them from your HTML (e.g. with your other scripts and stylesheets.)
jQuery UI depends on jQuery, so remember to include jquery.js before jquery-ui.js.
<link rel="stylesheet" href="stylesheets/jquery-ui.css">
<script src="scripts/jquery.js"></script>
<script src="scripts/jquery-ui.js"></script>That’s it! You can now use jQuery UI. For example, use the datepicker with the following HTML:
<input type="text" name="date" id="date">Then use the following JavaScript:
$("#date").datepicker();Which will get you a nice datepicker popup:
For more, see the official “Getting started” gude.
Setting up jQuery UI for the First Time Example
The jQuery UI framework helps to extend and increase the User Interface controls for jQuery JavaScript library.
When you wish to use jQuery UI, you will need to add these libraries to your HTML. A quick way to start is using the Content Delivery Network available code sources:
jQuery Libraries
https://code.jquery.com/jquery-3.1.0.js
https://code.jquery.com/ui/1.12.0/jquery-ui.jsYou can choose many different themes for jQuery UI and even Roll your Own Theme. For this example, we will use ‘Smoothness’. You add the theme via CSS.
jQuery UI CSS
https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.cssPutting it all Together
When you have downloaded or selected your CDN, you will now want to add these libraries and style sheets to your HTML so that your web page can now make use of the jQuery and jQuery UI. The order in which you load the libraries is important. Call the jQuery library first, and then your jQuery UI library. Since jQuery UI extends jQuery, it must be called after. Your HTML may look something like the following.
<html>
<head>
<title>My First UI</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
</body>
</html>