The jQuery framework not only allows you to manage DOM elements, send AJAX requests, but is a good tool for building a user interface using widgets. A special jQuery UI library is designed to work with the interface.
The jQuery UI library is downloaded separately from the main jQuery library and can be found at https://jqueryui.com/download/. At this address at the bottom of the page you can see a list of library topics. Themes affect the appearance of the applied components. But in the beginning, the choice of theme is not so important, so you can leave the default UI lightness theme. Also on the downloads page, you can detail the download – what will be included in the downloaded package, but you can leave all the default settings and click the Download button at the bottom of the page to download.
You can also use CDNs, since the library is quite popular, so many CDNs have it.
Let’s unpack the package. It will contain several folders and files that include all the options that we selected on the jQueryUI download page.
As well as an index.html file containing examples of using widgets and logic from the jQueryUI library. If we open this file in a text editor, we will see that it references the theme we have chosen, the jQuery library, and the jQuery UI library. At the beginning of the file, the jquery-ui stylesheet will be included:
<link href="jquery-ui.css" rel="stylesheet">
And towards the end of the file, the jQuery library and the jQuery UI library will be included:
<script src="external/jquery/jquery.js"></script> <script src="jquery-ui.js"></script>
Typically, to take advantage of the power of jquery, we will need to include these three files in our html page. They can be connected both from the package downloaded from the official site, and from CDN networks
Let’s connect the library first from the downloaded package. To do this, in the unpacked package, create the following html page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
</head>
<body>
<p><a>Hello</a></p>
<script type="text/javascript">
$(function(){
$('a').button().click(function(){alert('Hello jQuery UI');});
});
</script>
</body>
</html>
Here, the standard link element is simply replaced with a button widget, and a click handler is added to it. The main jQuery library must be included first, since jQuery UI depends on it.
Also download from Microsft CDN:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/ui-lightness/jquery-ui.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.2/jquery-ui.min.js"></script>
</head>
<body>
</body>
</html>