jQuery UI представляет из себя набор виджетов и плагинов от самих разработчиков jQuery. По моему мнению, данный инструмент необходимо изучить настолько, насколько это требуется, чтобы не писать свои «велосипеды». Скачать-почитать о данной надстройке над jQuery можно на домашней страницы проекта – http://jqueryui.com/ .

Что нам необходимо знать о виджетах и плагинах? Первое – это какие они есть, и второе – как работают. На этих двух моментах я и постараюсь остановиться.

Интерактивность

Начну с полезных плагинов, которые могут упростить жизнь при создании интерактивных интерфейсов:

• Draggable – данный компонент позволяет сделать любой DOM-элемент перетаскиваемым при помощи мыши
• Droppable – это логичное продолжение компонента Draggable; необходим для работы с контейнерами, внутрь которых можно перетаскивать элементы
• Resizable – как следует из названия, даёт возможность растягивать любые DOM-элементы
• Selectable – позволяет организовать «выбор» элементов; удобно использовать для организации менеджмента картинок
• Sortable – сортировка DOM-элементов

Виджеты

Виджеты – это уже комплексное решение, содержащее не только код JavaScript, но и некую реализацию HTML и CSS:

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

Утилиты

Утилит у нас не много – вот полезный плагин Position, который позволяет контролировать положение DOM-элементов – http://jqueryui.com/position/ , а ещё есть фабрика по созданию виджетов, но о ней я расскажу чуть попозже.

Эффекты

Среди эффектов, предоставляемых jQuery UI, я выделяю четыре пункта:

• Анимация цвета
• Анимация изменения классов
• Набор эффектов
• Расширение возможностей easing

За анимацию цвета отвечает компонент «Effects Core», который позволяет анимировать изменения цвета посредством использования функции «.animate()»:

$("#my" ).animate({ backgroundColor: "black" }, 1000 );

Да-да, базовый jQuery не умеет этого делать, а вот jQuery UI позволяет анимировать следующие параметры:

• backgroundColor
• borderBottomColor
• borderLeftColor
• borderRightColor
• borderTopColor
• color
• outlineColor

Ещё одной возможностью, заключенной в «Effects Core» является анимация изменений класса DOM-элемента, т.е. когда вы будете присваивать новый класс элементу, то вместо обычного моментального применения новых CSS свойств вы будете наблюдать анимацию этих свойств от текущих до заданных в присваиваемом классе. Для использования данного функционала нам потребуются старые знакомые – методы «.addClass()», «.toggleClass()» и «.removeClass()», с одной лишь разницей – при вызове метода вторым параметром должна быть указана скорость анимации:

$("#my" ).addClass("active" , 1000 ); $("#my" ).toggleClass("active" , 1000 ); $("#my" ).removeClass("active" , 1000 );

Если из предыдущего абзаца у вас не возникло понимания сути происходящего, то этот код для вас:

#my { font-size :14px ; } #my .active { font-size :20px ; } $(function () { $("#my" ).addClass("active" , 1000 ); // тут получается аналогично следующему вызову $("#my" ).animate({"font-size" :"20px" }, 1000 ); });

А ещё появляется метод «.switchClass()», который заменяет один класс другим, но мне он ни разу не пригодился.

О наборе эффектов я не буду долго рассказывать, их лучше посмотреть в действии на странице http://jqueryui.com/effect/ . Для работы с эффектами появляется метод «.effect()», но сам по себе его лучше не использовать, ведь UI расширил функционал встроенных методов «.show()», «.hide()» и «.toggle()». Теперь, передав в качестве параметра скорости анимации названия эффекта, вы получите необходимый результат:

$("#my" ).hide("puff" ); $("#my" ).show("transfer" ); $("#my" ).toggle("explode" );

Приведу список эффектов, может, кто запомнит: blind , bounce , clip , drop , explode , fold , highlight , puff , pulsate , scale , shake , size , slide , transfer .

Если в какой-то момент времени потребуется внести изменения в тему, откройте файл «jquery-ui-#.#.##-custom.css» и найдите строчку начинающуюся с текста «To view and modify this theme, visit http:...». Пройдите по указанной ссылке и, используя ThemeRoller, внесите необходимые изменения.

Пишем свой виджет

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

Первое, о чём стоит рассказать, это то, что правила написания плагинов для jQuery слишком вальяжны, что не способствует их качеству. При создании jQuery UI, походу, решили пойти путём стандартизации процесса написания плагинов и виджетов. Я не могу сказать насколько задумка удалась, но стало явно лучше чем было. Начну с описания каркаса для вашего виджета:

$.widget("book.expose" , { // настройки по умолчанию options: { color: "red" }, // инициализация widget // вносим изменения в DOM и вешаем обработчики _create: function () { this .element; // искомый объект в jQuery-обёртке this .name; // имя - expose this .namespace; // пространство – book this .element.on("click." +this .eventNamespace, function () { console .log("click" ); }); }, // метод отвечает за применение настроек _setOption: function ( key, value ) { // применяем изменения настроек this ._super("_setOption" , key, value); }, // метод _destroy должен быть антиподом к _create // он должен убрать все изменения, внесенные в DOM, и убрать все обработчики, если таковые были _destroy: function () { this .element.off("." +this .eventNamespace); } });

Поясню для тех, кто не прочёл комментарии:

options – хранилище настроек виджета для конкретного элемента

Create() – отвечает за инициализацию виджета – тут в DOM должны происходить изменения и «вешаться» обработчики событий

Destroy() – антипод для «_create()» – должен подчистить всё, что мы намусорили

SetOption(key, value) – данный метод будет вызван при попытке изменить какие-либо настройки:

$("#my" ).expose({key:value})

Наблюдательный глаз заметит, что все перечисленные методы начинаются со знака подчёркивания – это такой способ выделить «приватные» методы, которые недоступны для запуска. Если мы попытаемся запустить «$("#my").expose("_destroy")», то получим ошибку. Но учтите – это лишь договорённость, соблюдайте, её!

Для обхода договорённости о приватности можно использовать метод «data()»:

$("#my" ).data("expose" )._destroy() // место для смайла «(evil)»

В данном примере я постарался задать хороший тон написания виджетов – я «повесил» обработчики событий в namespace. Это даст в дальнейшем возможность контролировать происходящее без необходимости залазить в код виджета. «True story».

Код, описанный в методе «_destroy()», избыточен, т.к. он и так выполняется в публичном «destroy()». Приведён тут для наглядности.

А для ленивых, чтобы не прописывать каждый раз «eventNamespace» в обработчиках событий, разработчики добавили в версии 1.9.0 два метода: «_on()» и «_off()». Первый принимает два параметра:

• DOM-элемент, или селектор, или jQuery-объект
• набор обработчиков событий в виде объекта

Все перечисленные события будут «висеть» в пространстве «eventNamespace», т.е. результат будет предположительно одинаковым:

this ._on(this .element, { mouseover:function (event ) { console .log("Hello mouse" ); }, mouseout:function (event ) { console .log("Bye mouse" ); } });

Второй метод, «_off()», позволяет выборочно отключать обработчики:

this ._off(this .element, "mouseout click" );

Ну, каркас баркасом, пора переходить к функционалу. Добавим произвольную функцию с произвольным функционалом:

CallMe:function () { console .log("Allo?" ); }

К данной функции мы легко сможем обращаться как из других методов виджета, так и извне:

// изнутри this .callMe() // извне $("#my" ).expose("callMe" )

Если ваша функция принимает параметры, то передача оных осуществляется следующим способом:

$("#my" ).expose("callMe" , "Hello!" )

Если вы хотите достучаться в обработчике событий до метода виджета, то не забудьте про область видимости переменных и сделайте следующий манёвр:

{ _create: function () { var self = this ; // вот он! this .element.on("click." +this .eventNamespace, function () { // тут используем self, т.к. this уже указывает на // элемент по которому кликаем self.callMe(); }) } }

Хорошо идём, теперь поговорим о событиях. Для более гибкой разработки и внедрения виджетов предусмотрен функционал по созданию произвольных событий и их «прослушиванию»:

// инициируем событие this ._trigger("incomingCall" ); // подписываемся на событие при инициализации виджета $("#my" ).expose({ incommingCall: function (ev ) { console .log("din-don" ); } }) // или после, используя в качестве имени события // имя виджета + имя события $("#my" ).on("exposeincomingCall" , function () { console .log("tru-lya-lya" ) });

Материала много, я понимаю, но ещё добавлю описание нескольких методов, которые можно вызвать из самого виджета:

Delay() – данная функция работает как «setTimeout()», вот только контекст переданной функции будет указывать на сам виджет (это чтобы не заморачиваться с областью видимости)

Hoverable() и _focusable() – данным методам необходимо скармливать элементы, для которых необходимо отслеживать события «hover» и «focus», чтобы автоматически добавить к ним классы «ui-state-hover» и «ui-state-focus» при наступлении оных

Hide() и _show() – эти два метода появились в версии 1.9.0, они созданы дабы стандартизировать поведение виджетов при использовании методов анимации; настройки принято прятать в опциях под ключами «hide» и «show» соответственно. Использовать методы следует следующим образом:

{ options: { hide: { effect: "slideDown" , // настройки эквиваленты вызову duration: 500 // .slideDown(500) } } } // внутри виджета следует использовать вызовы _hide() и _show() this ._hide(this .element, this .options.hide, function () { // это наша функция обратного вызова console .log("спрятали" ); });

Существует ещё пара методов, которые реализованы до нас:

{ enable: function () { return this ._setOption("disabled" , false ); }, disable: function () { return this ._setOption("disabled" , true ); } }

Фактически, данные функции создают синоним для вызова:

$("#my" ).expose({ "disabled" : true }) // или false

Наша задача сводится лишь к отслеживанию этого флага в методе «_setOption()».

Знакомство с библиотекой jQuery UI для построения пользовательского интерфейса. Краткая инструкция для начинающих.

Что такое jQuery UI?

jQuery UI (с англ. jQuery Пользовательский Интерфейс ) – это библиотека виджетов и взаимодействий, построенная на основе jQuery JavaScript библиотеку, которую можно использовать для создания высоко-интерактивных web-приложений.

Для того, чтобы наглядно ознакомиться с возможностью jQuery UI библиотеки посетите страницу: Demos & Documentation — на сайте jqueryui.com .

Теперь, когда вы понимаете что такое jQuery UI, можно приступить к выбору, необходимых для загрузки, компонентов: UI Core (основные функции ПИ), Interactions (взаимодействия), Widgets (виджеты), Effects (эфекты) и Theme (темы оформления) – тем самым, создав свою копию библиотеки jQuery UI. Для этого посетите страницу: Build Your Download . Там же вы можете быстро скачать последнюю Stable или Legacy версии библиотеку jQuery UI.

ZIP архив загруженной вами библиотеки jQuery UI будет содержать следующее:

Для подключения библиотеки jQuery UI обычно хватает трёх ссылок: CSS темы ПИ, библиотеки jQuery и jQuery UI. Выглядеть это может следующим образом:

После того как вы подключили необходимые файлы, вы можете начинать добавлять необходимые виджеты на вашу страницу. Например, чтобы сделать DatePicker (с англ. выбор даты , добавим текстовое поде:

А также JavaScript код:

$(function(){ $("#date").datepicker(); });

Результат интерпретации браузером приведённого примера будет иметь следующий вид:

Настройка jQuery UI

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

Использование опций. Каждый компонент в jQuery UI имеет ряд определённых по умолчанию настроек. В тоже время, вы всегда можете их изменить, используя «option» (с англ. опция ), передавая компоненту нужное значение.

Например, для того чтобы задать формат даты для виджета DatePicker можно воспользоваться опцией: dateFormat.

$("#date").datepicker({ dateFormat: "yy-mm-dd" });

Получить значение опции после инициации виджета можно следующим образом:

var dateFormat = $("#date").datepicker("option", "dateFormat");

Указать значение опции после инициации виджета можно следующим образом:

$("#date").datepicker("option", "dateFormat", "yy-mm-dd");

Визуальная настройка. Для настройки собственной темы в jQuery UI имеется ThemeRoller , позволяющий визуально настроить компоненты вашего интерфейса. Воспользоваться и подробней узнать об этом инструменте вы можете посетив страницу:

Установка библиотеки jQuery UI

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

Получение библиотеки jQuery UI

Процесс загрузки библиотеки jQuery UI отличается несколько большей сложностью по сравнению с другими библиотеками JavaScript, но результат будет стоить затраченных усилий. Библиотека jQuery UI охватывает пять областей функциональности, и вам предоставляется возможность самостоятельно сконфигурировать загрузочный архив, включив в него лишь необходимые компоненты. В этой части вы познакомитесь со всеми возможностями библиотеки jQuery UI, но при работе с реальными веб-приложениями можно исключать ненужные компоненты для уменьшения размера библиотеки, загружаемой браузерами.

Выбор темы оформления

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

На сайте jQuery UI можно воспользоваться услугами специального приложения - настройщика тем (Themeroller) , но кроме того существует целая галерея предопределенных тем, полностью готовых к использованию, из которых можно выбрать ту, которая вас больше всего устраивает, и тем самым облегчить себе жизнь.

Начните с посещения сайта jqueryui.com и щелкните на кнопке Themes. В результате откроется страница ThemeRoller, отображающая виджеты jQuery UI и расположенную слева от них панель настроек, с помощью которой можно установить параметры темы оформления, как показано на рисунке:

Если у вас уже используется определенный визуальный стиль, которого вы должны придерживаться, и вы хотите, чтобы визуальный интерфейс средств JQuery UI согласовывался с остальной частью сайта или приложения, то вкладка Roll Your Own (которая выбирается по умолчанию) - это как раз то, что нужно. Можно изменить любой аспект оформления с помощью набора стилей CSS, который используется библиотекой jQuery UI.

Чтобы получить одну из готовых тем, следует перейти на вкладку Gallery. На момент написания этих строк галерея включала 24 темы, охватывающие широкий спектр вариантов цветового оформления - от приглушенных и нежных тонов до ярких и вызывающих. При выполнении щелчков на темах галереи внешний вид виджетов, отображаемых на остальной части страницы, будет соответствующим образом обновляться, позволяя вам оценить, как может выглядеть приложение:

Используемая для jQuery UI стандартная тема носит название UI lightness, но эта тема недостаточно контрастна, и поэтому я буду использовать тему Sunny, которая выглядит немного лучше. Единственное, что от вас сейчас требуется - это запомнить название темы, которая вас устраивает.

Создание настраиваемого загрузочного архива библиотеки jQuery UI

Выбрав для себя определенную тему оформления, можете приступить к созданию собственного варианта загрузки библиотеки jQuery UI. Щелкните на кнопке Download в верхней части страницы для перехода на страницу Download Builder. Вы увидите список компонентов jQuery UI, разбитых на четыре функциональные группы: UI Core, Interactions, Widgets и Effects.

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

Для выполнения примеров вам понадобятся все компоненты, поэтому проследите за тем, чтобы были установлены все флажки.

Между некоторыми компонентами, фигурирующими в списке, существуют зависимости, но в процессе создания своего варианта библиотеки можете об этом не думать. Если вы выбираете какой-либо компонент, то одновременно с ним загрузятся все компоненты, от которых он зависит.

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

У вас также есть возможность выбрать конкретную версию библиотеки jQuery UI, которая должна быть включена в загрузочный архив. Вам потребуется загрузить стабильную (Stable) версию, которая работает со всеми версиями библиотеки jQuery, начиная с версии 1.3.2.

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

Установка версии библиотеки jQuery UI, предназначенной для разработки

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

Вы должны скопировать в папку с файлами примеров следующие файлы и папки:

development-bundle\ui\jquery-ui.custom.js;

development-bundle\themes\sunny\jquery-ui.css;

папка development-bundle\themes\sunny\images.

Имена JavaScript- и CSS-файлов включают номер версии загруженного выпуска библиотеки. В моем случае это версия 1.10.3. Библиотека jQuery UI активно разрабатывается, и вы можете загрузить более позднюю версию, чем 1.10.3.

Подключение библиотеки jQuery UI к HTML-документу

Все, что вам теперь остается сделать - это включить библиотеку jQuery UI в свой HTML-документ. Это можно сделать, добавив в документ элементы script и link, содержащие ссылки на файлы JavaScript и CSS, которые вы загрузили, как показано в примере ниже:

Библиотека jQuery

Ссылаться непосредственно на папку images необязательно. Коль скоро папка images и CSS-файл находятся на своих местах, jQuery UI сможет самостоятельно найти все необходимые ресурсы.

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

Показанный в примере выше документ содержит простой тест, позволяющий проверить правильность подключения библиотеки jQuery UI. В случае нормального открытия страницы вы должны увидеть кнопку, похожую на ту, которая показана на рисунке. Не обращайте пока внимания на вызов метода button() в элементе script. О том, для чего он предназначен и как работает, вы узнаете в следующей статье.

В случае неправильного указания пути к любой из двух библиотек вы увидите вместо этого простую ссылку.

Установка библиотеки jQuery UI для производственной среды

Завершив разработку своего веб-приложения и подготовившись к его развертыванию, можете использовать минимизированные версии файлов, включенных в загрузочный архив. Эти файлы имеют меньшие размеры, однако прочитать их содержимое, если это потребуется в интересах отладки, будет нелегко. Чтобы использовать версии файлов, предназначенные для развертывания, скопируйте в каталог своего веб-сервера следующие файлы и папки:

jquery-ui-1.10.3.custom.min;

jquery-ui-1.10.3.custom.min

папка css\sunny\images

Папка images и файл CSS здесь те же, что и в версии для разработки; изменения могут касаться лишь файла JavaScript. Чтобы выполнить чистую установку, достаточно скопировать эти файлы в каталог сервера.

Использование библиотеки jQuery UI через сеть распространения содержимого

Вопрос об использовании CDN для загрузки библиотеки jQuery уже затрагивался ранее. Если вы приверженец такого подхода, то вас порадует тот факт, что точно так же можно поступить и в случае библиотеки jQuery UI. Как Google, так и Microsoft обеспечивают хостинг файлов jQuery UI в своих сетях CDN. Для нашего базового примера я использую службу Microsoft, поскольку она предоставляет как JavaScript-файлы jQuery UI, так и стандартные темы оформления.

Чтобы использовать CDN, необходимо располагать URL-адресами нужных файлов. Если речь идет о службе Microsoft, то перейдите на страницу Microsoft Ajax Content Delivery Network . Прокрутив страницу вниз, вы увидите список ссылок, соответствующих различным версиям jQuery UI. Щелкните на ссылке той версии, которую вы используете (в моем случае это версия 1.10.3). Вы увидите URL-адреса для обычной и минимизированной версий файла библиотеки jQuery UI.

На оставшейся части страницы отображаются готовые темы, под каждой из которых указывается URL-адрес файла CSS.

Чтобы подключить эти файлы к документу через CDN, достаточно поместить в элементы script и link не ссылки на локальные файлы jQuery UI, а соответствующие URL-адреса, как показано в примере ниже:

Библиотека jQuery $(function() { $("a").button(); }); Посетите веб-сайт www.professorweb.ru

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

В подключении jquery все просто. Есть 2 варианта:
• Для работы оффлайн – скачать сам файл с библиотекой jQuery и подключить его
• Для работы онлайн – быстро одной строчкой кода подключить jQuery из хранилища Google или Microsoft

У каждого варианта свои плюсы и минусы. Давайте рассмотрим их подробнее.

Подключение jquery через Google или Microsoft

Чтобы подключить последнюю версию jquery через Google нужно добавить одну строку кода внутри

– все предельно быстро и удобно:

Для подключения точной версии (в данном случае 1.11.0):

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

Для подключения jquery через Microsoft добавляем код:

Подключение с Google хорошо тем, что многие сайты одинаково подключают jQuery – именно через Google API и всегда есть высокая вероятность того, что эта библиотека уже загружена в кэш браузера пользователя и не будет загружаться во второй раз.

Подключение jquery скачиванием файла с библиотекой

Подключаем jQuery со страницы своего сайта – это дольше, но надежнее. Для этого нужно:
скачать библиотеку jquery с официального сайта , сохранить в файл, назовем его jquery-1.11.0.min.js , положить в папку js на нашем сайте и добавить следующий код в

:

В src задается путь где лежит наш файл с jquery, который нужно подключить на страницу сайта.

И, наконец, самый надежный и бронебойный вариант – подключение с Google, если Google недоступен – подключение со своего сайта:

if (typeof jQuery == "undefined") { document.write(unescape("%3Cscript src="/js/jquery-1.11.0.min.js" type="text/javascript"%3E%3C/script%3E")); }

Или самый современный вариант – прописываем в

Следующий код: google.load("jquery", "1.11.0"); google.setOnLoadCallback(jQueryIsLoaded); function jQueryIsLoaded() { alert("jQuery от Google загружен"); } if (typeof jQuery == "undefined") { document.write(unescape("%3Cscript src="/js/jquery-1.11.0.min.js" type="text/javascript"%3E%3C/script%3E")); }

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

Итак, зачем нам нужна библиотека jQuery UI ? Собственно, затем же, зачем мы обращаемся к сторонним плагинам – для установки и использования готовых решений на сайте. Вот только библиотека jQuery UI – это комплексное решение, т.е. здесь вы найдете не что-то одно, а сразу целый пакет виджетов, эффектов и плагинов для работы с различными событиями.

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

Перейдем от слов к делу: скачаем и установим библиотеку jQuery UI. Перейдем на официальный сайт и обратимся к разделу Download . Именно здесь мы можем выбрать компоненты для скачивания и тему.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Тему можно выбрать из выпадающего списка внизу страницы.

Также при желании можно сконструировать свою тему с собственным оформлением, для этого достаточно кликнуть по ссылке design a custom theme, которая находится сразу над выпадающим списком. На открывшейся странице мы можем изменять шрифты, цвета и прочее оформление элементов, наблюдая изменения в режиме онлайн, в общем, можем конструировать собственную тему.

Но вернемся на предыдущую страницу и скачаем все компоненты библиотеки jQuery UI с темой Base.

В полученном архиве нам потребуется файл стилей (jquery-ui.css) и файл скриптов (jquery-ui.js). Оба файла предлагаются в обычной и сжатой версиях, поэтому можно выбрать любой. Ну и, само-собой, потребуется библиотека jQuery, я подключу версию 1.11.3 с сервиса Google.

В итоге страница со всеми подключениями будет выглядеть следующим образом:

< link rel = "stylesheet" href = "ui/jquery-ui.css" >