Фреймворк jQuery позволяет не только управлять элементами DOM, отправлять запросы AJAX, но представляет неплохой инструмент для построения пользовательского интерфейса с помощью виджетов. Для работы с интерфейсом предназначена специальная библиотека jQuery UI.
Библиотека jQuery UI загружается отдельно от основной библиотеки jQuery: ее можно найти по адресу https://jqueryui.com/download/. По этому адресу внизу страницы вы можете увидеть список тем библиотеки. Темы влияют на оформление применяемых компонентов. Но в начале работы выбор темы не столь важен, поэтому можно оставить стандартную тему UI lightness. Также на странице загрузок можно детализировать загрузку - что будет входить в загружаемый пакет, но можно оставить все установки по умолчанию и внизу страницы нажать кнопку Download для загрузки.
Также можно использовать сети CDN, поскольку библиотека довольно популярная, то она есть во многих CDN.
Распакуем пакет. В нем будут несколько папок и файлов в состав которых включены все опции, что мы выбрали на странице загрузки jQueryUI.
А также файл index.html, содержащий примеры использования виджетов и логики из библиотеки jQueryUI. Если мы откроем данный файл в текстовом редакторе, то увидим, что он ссылается на выбранную нами тему, библиотеку jQuery и библиотеку jQuery UI. В начале файла будет подключен файл стилей jquery-ui:
<link href="jquery-ui.css" rel="stylesheet">
А ближе к концу файла будет поключена библиотека jQuery и библиотека jQuery UI:
<script src="external/jquery/jquery.js"></script> <script src="jquery-ui.js"></script>
Как правило, чтобы воспользоваться возможностями jquery, нам нужно будет подключить эти три файла на нашу html-страницу. Их можно подключать как и из пакета, скачанного с официального сайта, так и из сетей CDN
Подключим библиотеку сначала из загруженного пакета. Для этого в распакованном пакете создадим следующую страницу html:
<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>
Здесь просто стандартный элемент ссылки заменяется на виджет button, и к нему добавляется обработчик нажатия. Сначала обязательно подключается основная библиотека jQuery, поскольку jQuery UI от нее зависит.
Также загрузим из CDN компании Microsft:
<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>