jQuery UI Library Getting started with jQuery UI Library Setting up jQuery UI for the First Time Example
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.js
You 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.css
Putting 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>
