jQuery UI значительно облегчает создание интерфейса для веб-приложений.

jQuery UI

jQuery UI представляет собой группу плагинов jQuery облегчающих создание интерфейса веб-приложений.

$(document).ready(function(){

   $("#drag").draggable();
   $("#sortable").sortable();
   $("#sortable").disableSelection();
   $("#datepicker").datepicker({ monthNames:
      ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август",  
      "Сентябрь","Октябрь","Ноябрь","Декабрь"],
      dayNamesMin: ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"]});

});

Подключение jQuery UI

Для того, чтобы воспользоваться возможностями плагинов jQuery UI их необходимо вначале подключить к странице, на которой они будут использоваться.

Существуют два варианта подключения jQuery UI:

1. Локальное подключение. Данный способ требует скачивание специального файла с официального сайта;
2. Удаленное подключение. Данный способ не требует скачивание файла, а вместо этого использует его удаленно (данная услуга предоставляется компанией Google).

Локальное подключение jQuery UI

На официальном сайте Вы можете или скачать стандартную комплектацию jQuery UI или собрать свою собственную.

Стандартная комплектация jQuery UI включает в себя все существующие плагины и имеет стандартную тему оформления. Для того, чтобы скачать стандартную комплектацию просто перейдите на сайт jQuery UI и нажмите кнопку Download.

Если Вы хотите собрать собственную комплектацию jQuery UI Вам необходимо перейти на сайт jQuery UI и выполнить шаги перечисленные ниже (пропустите эти шаги если Вы скачали стандартную комплектацию):

Шаг 1: Выбрать необходимые компоненты

По умолчанию в файл для скачивания включены все существующие плагины. Если какие-то из них не нужны Вы можете убрать галочку напротив их названия и сократить тем самым размер итогового файла (стандартная комплектация jQuery UI имеет размер ~1мб).

Обратите внимание: размер файла библиотеки влияет на скорость загрузки страницы, поэтому меньший размер всегда предпочтителен.

Шаг 2: Выбрать оформление

Выберите одну из стандартных тем оформления плагинов jQuery UI в поле Theme или создайте свою тему с помощью themeroller'а.

Шаг 3: Выбрать версию

Выберите версию jQuery UI в поле Version.

Обратите внимание: рекомендуем всегда выбирать последнюю доступную версию т.к. как более новые версии всегда содержат интересные нововведения.

Шаг 4: Скачать jQuery UI

Нажмите кнопку Download и сохраните файл в удобное для Вас место на жестком диске.

Теперь (вне зависимости скачали ли Вы стандартную комплектацию или собрали свою собственную) необходимо подключить jQuery UI к скрипту. Для этого необходимо распаковать скаченный файл и указать пути к файлам jquery-ui-версия.custom.css и jquery-ui-версия.custom.min.js в секции head скрипта.

Синтаксис:

<!-- 1. Подключим библиотеку jQuery (без нее jQuery UI не будет работать) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- 2. Подключим jQuery UI -->
<link type="text/css" href="путь_к_папке/css/themename/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script type="text/javascript" src="путь_к_папке/js/jquery-ui-1.8.13.custom.min.js"></script>

Удаленное подключение jQuery UI

В этом варианте подключения Вы не можете настраивать комплектацию jQuery UI и можете использовать только ее стандартную версию.

Для того, чтобы подключить библиотеку удаленно необходимо добавить следующие строчки в секцию head Вашей страницы:

Синтаксис:

<!-- 1. Подключим библиотеку jQuery (без нее jQuery UI не будет работать) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- 2. Подключим jQuery UI -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Сделайте сами

Задание 1 подключите библиотеку jQuery UI удаленно для того, чтобы код из упражнения заработал.

$(document).ready(function(){

   $("#tabs").tabs();

});