Jquery не входит в комплект поставки. Установка библиотеки jQuery UI Подключение jquery через Google или Microsoft

Для работы оффлайн – скачать сам файл с библиотекой 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")); }

Последнее обновление: 1.11.2015

Фреймворк 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:

А ближе к концу файла будет поключена библиотека jQuery и библиотека jQuery UI:

Как правило, чтобы воспользоваться возможностями jquery, нам нужно будет подключить эти три файла на нашу html-страницу. Их можно подключать как и из пакета, скачанного с официального сайта, так и из сетей CDN

Подключим библиотеку сначала из загруженного пакета. Для этого в распакованном пакете создадим следующую страницу html:

Hello

$(function(){ $("a").button().click(function(){alert("Hello jQuery UI");}); });

Также загрузим из CDN компании Microsft:

Первый вопрос, который возникает при начале работы с библиотекой jQuery — как её подключить? Странно, что я не написал об этом ранее и сейчас решил восполнить этот пробел.

В этой статье я расскажу как правильно добавить jQuery на обычном html-сайте и на популярных движках.

Подключение jQuery со страницы своего сайта

Самый распространенный способ подключения библиотеки. Для начала необходимо скачать свежую версию с сайта разработчика. На странице загрузки представлено несколько вариантов библиотеки, например сейчас предлагается скачать «Compressed, production jQuery 3.1.1» и «Uncompressed, development jQuery 3.1.1». Первый вариант — это сжатый вариант библиотеки, оттуда удалены все комментарии, в этом случае библиотека занимает намного меньше места, следовательно страница, на которую она будет подключена будет загружаться быстрее. Второй вариант — это, грубо говоря, исходный код библиотеки, он структурирован в удобном для чтения виде с комментариями, и предназначен в первую очередь для разработчиков. Поэтому рекомендую использоваться сжатую версию библиотеки.

После того, как библиотека загружена, необходимо разместить её на сервере, где находятся файлы сайта. Я обычно в корне сайта создаю папку «js» в которую копирую нужные библиотеки и там же размещаю файл со своими функциями.

Теперь можно переходить непосредственно к подключению jQuery. Структура веб-страницы, на которую Вы подключаете jQuery, может быть разной. Но в ней обязательно присутствуют теги HTML, HEAD и BODY. Так вот для подключения jQuery необходимо добавить тег SCRIPT со ссылкой на библиотеку внутрь тега HEAD.

Заголовок сайта

В некоторых случаях, библиотеку подключают перед закрывающимся тегом body, что связанно с порядком обработки html страницы браузером. Поскольку браузер вычитывает строки последовательно, то при подключении jQuery в конце файла вначале браузер отобразит сайт, а затем уже подключит динамику. При медленном соединении, такой подход обеспечивает увеличение скорости загрузки сайта, и уже потом работу слайдеров и остального. Код при таком подключении выглядит так:

Заголовок сайта

Внимание! Желательно не менять название файла библиотеки jQuery (зачастую меняют на jquery.js), так как в дальнейшем сохранение официального названия файла поможет увидеть, какую версию библиотеки Вы используете (в моем примере используется версия 3.1.1).

Подключение jQuery на страницы своего сайта с внешних источников

Данный способ хорош тем, что библиотека подключается с сайта и не валяется на жестком диске. Особенно это актуально при большом количестве маленьких проектов и для обучения.

Этот способ подключения называется «Подключение с CDN». Сеть доставки контента или как ее чаще называют CDN (Content Delivery Network) является сетью серверов по всему миру. Они помогают улучшить производительность вашего веб-сервера и уменьшают нагрузку на ваш трафик.

Наиболее популярные CDN для подключения jQuery:

Я обычно использую подключение от Google Developers. На странице проекта для нас уже подготовлены несколько сниппетов, достаточно скопировать строчку нужного нам и подключить ее в файл. При таком способе подключения код будет выглядеть так:

Заголовок сайта

< ! DOCTYPE html >

< html >

< head >

< meta charset = "utf-8" >

< title > Заголовоксайта< / title >

< / head >

< body >

< / body >

< / html >

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

Подключение jQuery на WordPress

Подключение jQuery в WordPress производится автоматически, поэтому нет никакой необходимости подключать библиотеки других версий вручную. Это происходит в шаблоне с помощью php кода:

В итоге внутри тега HEAD появится строка подключения jQuery.

На момент написания статьи с WordPress поставляется jQuery v1.12.4 Но, как видите, версия библиотеки очень сильно отличается от той, которую подключали в примерах выше. Подключить свежую версию библиотеки возможно, но есть шанс возникновения конфликта.

Чтобы избежать конфликта, но при этом использовать ту версию библиотеки, которая необходима, нужно воспользоваться правильным способом подключения jQuery в файле functions.php:

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, реализующая более 20 плагинов, среди которых плагины организующие различное поведение (например перетаскивание или растягивание элементов), восемь видов виджетов (такие как календарь, диалоговые окна, систему вкладок и.т.д) и анимационные эффекты. Кроме этого, UI обладает несколькими темами оформления, с помощью которых оформляются виджеты и которые содержат набор полезных иконок (173 штуки). Любая из тем оформления может быть подкорректирована прямо на сайте jQuery UI, непосредственно перед загрузкой.

Начнем

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

Каждая из представленных выше возможностей, организуется в считанные строки кода.

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

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~ ~lt~script src="http://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~ ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~ ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~ ~lt~style~gt~ body{font:9pt Arial,sans-serif;} p.titl{clear:both; margin:0; padding:5px 0 5px 7px; font-style:italic} .itLf{float:left; width:280px; height:200px;} .itRg{float:left; margin-left:70px; height:200px; width:200px;} #accordion{font-size:8pt; margin-bottom:25px} #tabs{font-size:8pt; margin-bottom:25px} #opnDialog{font-size:8pt; margin-bottom:25px} #progressbar{font-size:8pt;} button{font-size:8pt;} #radio{font-size:8pt; margin-bottom:25px} #autocomplete{margin-bottom:25px} #slider{margin-bottom:25px} #datepicker{font-size:8pt;} ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div class="itLf"~gt~ ~lt~p class="titl"~gt~Аккордеон~lt~/p~gt~ ~lt~div id="accordion"~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Раздел 1~lt~/a~gt~~lt~/h3~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Глазго~lt~/i~gt~ - крупнейший город Шотландии и третий по численности населения в Великобритании. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Раздел 2~lt~/a~gt~~lt~/h3~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Войны мороженщиков в Глазго~lt~/i~gt~ - серия конфликтов в шотландском городе Глазго между конкурирующими наркоторговцами, развозившими свой товар в фургонах для продажи мороженого. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Раздел 3~lt~/a~gt~~lt~/h3~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Миллуоллский кирпич~lt~/i~gt~ - импровизированное оружие футбольных хулиганов, изготовленное из скрученной газеты и зажимаемое в кулаке наподобие свинчатки. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Раздел 4~lt~/a~gt~~lt~/h3~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~img src="http://tinyurl.com/3sn6e3t"~gt~ ~lt~/p~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Вкладки~lt~/p~gt~ ~lt~div id="tabs"~gt~ ~lt~ul~gt~ ~lt~li~gt~~lt~a href="#tabs-1"~gt~Nunc tincidunt~lt~/a~gt~~lt~/li~gt~ ~lt~li~gt~~lt~a href="#tabs-2"~gt~Proin dolor~lt~/a~gt~~lt~/li~gt~ ~lt~/ul~gt~ ~lt~div id="tabs-1"~gt~ ~lt~p~gt~ Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~div id="tabs-2"~gt~ ~lt~p~gt~ Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Диалоговое окно~lt~/p~gt~ ~lt~a id="opnDialog" href="javascript:$("#dialog").dialog("open");"~gt~Открыть окно~lt~/a~gt~ ~lt~div id="dialog" title="Простое окно"~gt~ ~lt~p~gt~ This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the "x" icon. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Прогрессбар~lt~/p~gt~ ~lt~div id="progressbar"~gt~~lt~/div~gt~ ~lt~/div~gt~ ~lt~div class="itRg" style="height:150px"~gt~ ~lt~p class="titl"~gt~Кнопки~lt~/p~gt~ ~lt~button~gt~Обычная кнопка~lt~/button~gt~ ~lt~div id="radio" style="margin-top:15px"~gt~ ~lt~input type="radio" id="radio1" name="radio" /~gt~~lt~label for="radio1"~gt~1~lt~/label~gt~ ~lt~input type="radio" id="radio2" name="radio" checked="checked" /~gt~~lt~label for="radio2"~gt~2~lt~/label~gt~ ~lt~input type="radio" id="radio3" name="radio" /~gt~~lt~label for="radio3"~gt~3~lt~/label~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Автозаполнение~lt~/p~gt~ ~lt~input id="autocomplete" title="Введите английскую "a"" /~gt~ ~lt~p class="titl"~gt~Ползунок~lt~/p~gt~ ~lt~div id="slider"~gt~~lt~/div~gt~ ~lt~p class="titl"~gt~Календарь~lt~/p~gt~ ~lt~div id="datepicker"~gt~~lt~/div~gt~ ~lt~/div~gt~ ~lt~script~gt~ $("#accordion").accordion(); $("#tabs").tabs(); $("#dialog").dialog({ autoOpen:false }); $("#progressbar").progressbar({value: 37}); $("#opnDialog").button(); $("button").button(); $("#radio").buttonset(); var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $("#autocomplete").autocomplete({source: availableTags}); $("#slider").slider({ range: true, min: 0, max: 500, values: [ 75, 300 ] }); $("#datepicker").datepicker({source: availableTags}); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

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

Использование

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

Если вы хотите использовать тему оформления, которую вы настроите самостоятельно, то в начале сделайте все необходимые настройки темы на этой странице, затем нажмите кнопку "Download theme" и вы окажетесь на странице загрузки библиотеки, где в поле Theme будет указана отредактированная вами тема.

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

css — содержит файлы оформления (CSS-файл и изображения).
js — содержит файлы с jQuery и jQuery UI.
development-bundle — эту папку можно не загружать на сайт, все ее содержимое носит вспомогательный характер. Здесь много различных файлов с демонстрацией работы плагина и другими вспомогательными файлами.

Кроме этих трех папок, в корне архива лежит файл index.html, с демонстрацией скачанных плагинов (естественно, этот файл так же незачем загружать на сайт).

Подключение UI к вашему сайту

Чтобы jQuery UI заработал на страницах вашего сайта необходимо, чтобы к странице был подключен js-файл библиотеки jQuery, js-файл jQuery UI (находится в папке js скачанного архива) и содержимое папки css (важно, чтобы все оно (содержимое css) располагалось на хостинге в одном каталоге):

< link type= "text/css" href= "css/themename/jquery-ui-1.8.12.custom.css" rel= "Stylesheet" /> < script type= "text/javascript" src= "js/jquery-1.4.4.min.js" > < script type= "text/javascript" src= "js/jquery-ui-1.8.12.custom.min.js" >

И все! После этого вы можете использовать возможности jQuery UI на вашей странице. Например с помощью одной строки javascript-кода сделать обычный элемент - перетаскиваемым:

Работа с плагинами

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

Инстанцирование (установка)

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

Методы

Обычно, под методом какого-то объекта в javascript, подразумевается функция, вызываемая на этом объекте следующим образом:

obj.A () ; // вызов метода A на объекте obj obj.B () ; // вызов метода B на объекте obj

Однако в пределах работы с конкретными плагинами jQuery UI, методами называют такую форму записи:

$("#someId" ) .plaginName ("имя метода" , параметры метода) ;

Например:

Свойства

Каждый плагин обладают рядом свойств (их описание можно найти в документации соответствующих плагинов). Каждое свойство можно задать в момент инстанцирования плагина. Для этого, при установке плагина на элемент нужно передать объект со свойствами в формате {имя_свойства_1:значение_1, имя_свойства_2:значение_2, ...} :

// сделаем из элемента с id=someId диалоговое окно с помощью // плагина dialog и укажем при этом заголовок для окна $("#someId" ) .dialog ({ title: "Сообщение" } ) ; // сделаем из первого div"а на странице календарь с помощью // плагина datepicker, и укажем минимальную и максимальную дату $("div:first" ) .datepicker ({ minDate: new Date(2007 , 1 - 1 , 1 ) , maxDate: new Date(2013 , 1 - 1 , 1 ) } ) ;

Кроме того, значение любого свойства можно узнать или изменить уже после инстанцирования плагина. Для этого необходимо использовать метод "option" :

// узнаем заголовок у диалогового окна var dialogTitle = $("#someId" ) .dialog ("option" , "title" ) ; // изменим заголовок, добавив к нему префикс "#1 " $("#someId" ) .dialog ("option" , "title" , "#1 " + dialogTitle) // изменим минимальную дату в календаре, // который установлен на первый div на странице $("div:first" ) .datepicker ("option" , "minDate" , new Date(2008 $("selector" ) .dialog ({ close : function (event, ui) { ... } } ) ;

Создание своих плагинов

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