JQuery UI – плагин Autocomplete. Подключение jQuery UI Удаленное подключение jQuery UI

Установка библиотеки 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 UI (User Interface ) представляет собой набор шаблонных элементов для создания пользовательского интерфейса и является частью библиотеки jQuery . Под пользовательским интерфейсом подразумевают - взаимодействие пользователя и веб-страницы.

Главная задача библиотеки jQuery UI - это облегчить жизнь веб-разработчикам, чтобы они не тратили время на выполнение однотипных задач. Наиболее часто встречающиеся на сайтах скрипты на JavaScript были собраны в одну библиотеку и разработчикам надо просто брать и применять нужные параметры и методы. Разрабатывать пользовательские интерфейсы стало намного быстрее.

Используемые на сайтах календари, слайдеры, всплывающие окна, уже стали обязательным атрибутом. Так зачем каждый раз разработчику писать код с нуля? Когда он может готовый шаблон подстроить под себя и использовать на своем сайте.

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

Официальный сайт: https://jqueryui.com/

Библиотеку jQuery UI можно скачать на компьютер или подключить через CDN ссылку.

Подключение через CDN

У вас есть два варианта, как скачивать библиотеку.

Выборочное скачивание - Custom Download

Вам точно не надо скачивать всю библиотеку, если вы собираетесь использовать только какие-то отдельные компоненты. На странице Download Builder вы снимаете все галочки, кроме нужных компонентов. Например, если вам нужен только виджет accordion , то напротив него ставите в чекбокс галочку и сайт подскажет вам, какие элементы будут нужны ещё для работы. Галочки будут расставлены автоматически, там где надо и вы не будете скачивать ненужные файлы, что положительно скажется на скорости загрузки сайта.

Прежде чем нажать кнопку download , выбираете подходящую тему для красивого оформления компонентов. Посмотреть на визуальное оформление готовых тем, можно в разделе Theme/Gallery .

Для встраивания компонентов уже в стилизованный сайт, вам больше подойдет конструктор тем - ThemeRoller , перейдите в раздел Theme . При изменениях в панели управления внешнего вида, вы сразу будете видеть, как выглядят все виджеты. После того как вы закончите формирование внешнего вида элемента, нажимаете на кнопочку download и скачиваете только выбранные элементы и тему, что очень удобно.

Полное скачивание - Quick Download

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

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

В разделе Demos наглядно можно увидеть какие задачи (демонстрационные примеры) на сайте можно решить с помощью библиотеки.

Рассмотрим на примере виджета - Tooltip . Предназначение этого виджета: для красивого открывания подсказки, указанной в атрибуте title .

Как обычно делаем HTML структуру. В параграфе p размещаем поле ввода для вашего возраста - input . В текстовом поле мы указываем атрибут title с текстом "Укажите, пожалуйста, Ваш возраст" . К этому элементу мы и применим виджет tooltip .

Ваш возраст:

После загрузки DOM дерева, на объекте document мы обратимся к методу tooltip . Мы обращаемся сразу ко всей странице (document) , чтобы данный метод можно было бы применить и к другим элементам страницы. После вызова метода tooltip значения атрибутов title будут отображаться в всплывающей подсказке.

От автора: приветствую вас, друзья. В этой статье мы с вами начнем знакомиться с библиотекой 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" >

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 . Одним из ее больших плюсов является то, что в ней организованы некоторые возможности ООП, позволяющие дорабатывать существующие виджеты и создавать собственные иерархии виджетов.

Очень давно не писал ничего в блоге и вот наконец выбрал немного времени, чтобы рассказать о виджете Autocomplete, который был включен в состав jQuery UI – надстройки над JavaScript-библиотекой jQuery.

Виджет Autocomplete помогает организовать список подходящих значений при заполнении пользователем поля ввода.

Для начала посетим страницу на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Autocomplete и видим, что вместе с ним отметились чекбоксы Core, Widget и Position. Работа виджета Autocomplete зависит от этих файлов.

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

Итак, сначала в разделе HEAD потребуется подключить несколько файлов, которые есть в архиве.

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

Виджет Autocomplete не требует сложной HTML-разметки. Достаточно всего лишь поля для ввода текста, т.е. обычного элемента input, который имеет значение text в атрибуте type. Дополнительную разметку можно добавить, чтобы использовать стили в соответствии с выбранной темой оформления.

Tags:

Для начала разберем самый простой случай использования виджета – когда для формирования списка подсказок используются локальные данные.

В переменной availableTags приготовили массив с подсказками. Затем выбрали элемент input по его идентификатору и применили метод autocomplete , которому сразу передали объект с настройками. Пока этот объект с единственным свойством source , которое определяет источник данных. В нашем случае указан массив availableTags .

На самом деле мы можем немного поднастроить виджет, используя другие свойства объекта настроек. Вот список этих свойств:

source – опция не имеет значения по умолчанию и должна быть обязательно определена. Значением опции может являться строка, массив или функция. В любом случае в этой опции должен быть указан источник данных.
minLength – значение по умолчанию 1. В этой опции указывается количество символов, которое должно быть введено в поле ввода прежде, чем активизируются подсказки. Значение 0 полезно при использовании локальных данных при списках из нескольких позиций. Это значение должно быть увеличено при использовании запросов к серверу для получения данных и при использовании больших списков, где одному введенному символу может соответствовать несколько тысяч наименований.
delay – значение по умолчанию 300. В этой опции указывается количество миллисекунд, которое должно пройти после нажатия очередной клавиши, чтобы активизировался запрос на получение данных. Нулевое значение имеет смысл при использовании локальных данных. При использовании запросов к серверу нулевое значение в этой опции может породить серьезную нагрузку
appendTo – значение по умолчанию ‘body’. В качестве значения этой опции может быть использован селектор jQuery. Определяет, к какому элементу должен быть добавлен выпадающий список подсказок.
disabled – значение по умолчанию false. Если установить значение true, то при инициализации функциональность виджета Autocomplete будет недоступна, однако может быть включена впоследствии, например, при выполнении какого-либо условия.

$(function(){ var availableTags = ["ActionScript","AppleScript","Asp","BASIC", "C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran", "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP", "Python","Ruby","Scala","Scheme"]; $("#tags").autocomplete({ source: availableTags, select: function(event, ui) { alert("Событие: " + event.type + ",\nзначение: " + ui.item.value); } }); });

Здесь мы добавили свойство select , где определили функцию, которая будет вызываться в тот момент, когда пользователь выберет какое-либо значение из списка подсказок. функция принимает два аргумента: первый - объект event , второй - специальный объект ui . Организовав доступ к свойствам этих объектов, можно получить полезную информацию (мы выводим ее в окне предупреждения).

Это не единственное событие на которое умеет реагировать виджет – вот полный их список, где указано название свойства в объекте с настройками, название события в event.type и описание события:

create – Событие autocompletecreate наступает в момент инициализации.
search – событие autocompletesearch наступает перед выполнением запроса. Если функция, определенная в этой опции вернет false, запрос не будет отправлен.
open – событие autocompleteopen наступает в момент, когда открывается выпадающий список подсказок.
focus – событие autocompletefocus наступает всякий раз, когда один из пунктов списка подсказок получает фокус.
select – событие autocompleteselect наступает, когда выбран один из пунктов списка подсказок.
close – событие autocompleteclose наступает, когда список подсказок закры-вается. Событие наступает независимо от того, был выбран один из пунктов или нет.
change – событие autocompletechange наступает после того, как выбран один из пунктов списка. Событие всегда наступает после close.

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

Для примера добавьте в HTML-разметку пару кнопок:

Искать "as" Закрыть Tags:

И вот такой JS-код:

$(function(){ var availableTags = ["ActionScript","AppleScript","Asp","BASIC", "C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran", "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP", "Python","Ruby","Scala","Scheme"]; $("#tags").autocomplete({ source: availableTags, minLength: 0 }); $("#search").click(function(){ $("#tags").autocomplete("search", "as"); }); $("#close").click(function(){ $("#tags").autocomplete("close"); }); });

Теперь, щелкая по кнопке Искать «as» мы можем имитировать действия пользователя, как если бы он ввел символы «as» в элементе input . Щелкнув по кнопке Закрыть – закрываем список подсказок, если он был открыт ранее.

Ниже приведены описания всех доступных методов:

destroy – .autocomplete(‘destroy’) полностью удаляет всю функциональность виджета Autocomplete. Возвращает элементы в состояние, предшествующее инициализации.
disable – .autocomplete(‘disable’) временно запрещает использование всей функциональности виджета. Вновь разрешить ее можно с помощью метода enable.
enable – .autocomplete(‘enable’) разрешает использование всей функциональности виджета, если ранее она была запрещена методом disable.
option – .autocomplete(‘option’, optionName, ) с помощью этого метода можно установить значение любой опции виджета после инициализации.
option – .autocomplete(‘option’, optionName) с помощью этого метода можно получить значение любой опции виджета после инициализации.
widget – .autocomplete(‘widget’) с помощью этого метода можно получить доступ к объекту, который представляет собой элемент с функциональностью Autocomplete.
search – .autocomplete(’search, ‘) с помощью этого метода без передачи второго па-раметра можно открыть весь список. Если передать во втором параметре строку символов, то будет открыт список с подходящими подсказками.
close – .autocomplete(‘close’) закрывает список подсказок, если он был открыт ранее.

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

Опция source , которая, напомню, является обязательной и определяет источник данных, может принимать также строку, где содержится url, к которому следует отправлять запрос. А еще в source можно определить свою функцию, которая будет делать, то что надо именно Вам. Вот этот, пожалуй самый гибкий способ мы и разберем. Попробуем получить в виде списка подсказок какие-либо данные с сервера geonames.org

Я приведу полностью рабочий код и попробую разъяснить, как и что работает.

example-17-8-4 .ui-autocomplete-loading { background: #FFF url("/instruction/2011/css/ui-lightness/images/ui-anim_basic_16x16.gif") right center no-repeat; } #city { width: 25em; } #log { height: 200px; width: 600px; overflow: auto; } $(function() { $("#city").autocomplete({ source: function(request,response) { $.ajax({ url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", data: { featureClass: "P", style: "full", maxRows: 12, name_startsWith: request.term }, success: function(data) { response($.map(data.geonames, function(item) { return { label: item.name + ", " + item.countryName, value: item.name + " (" + item.countryName + ")" + " [" + item.lat + ", " + item.lng + "]" } })); } }); }, minLength: 3, select: function(event,ui) { $("

").text(ui.item ? ui.item.value: "Ничего не выбрано!").prependTo("#log"); $("#log").attr("scrollTop", 0); } }); }); Город:
Поддерживается geonames.org

Сначала смотрим на HTML-разметку. В первом элементе div нас интересует только элемент input с идентификатором city . Сюда будем вводить начальные буквы (на латинице) населенного пункта, информацию о котором мы хотели бы получить. Элемент div с идентификатором log используем для занесения в него полученной информации.

Если смотреть JavaScript-код, то увидим, что объект с настройками содержит три свойства - обязательное свойство source , а также свойства minLength и select .
Мы займемся рассмотрением только свойства source , где можно написать свою функцию. Эта функция принимает два аргумента. Первый аргумент - request - объект, содержащий единственное свойство term , в котором хранится строка, введенная пользователем в поле ввода. Второй аргумент - response - функция, с помощью которой будет обрабатываться полученный ответ.

Внутри функции, определенной в свойстве source мы имеем практически неограниченную свободу действий. А поэтому, не мудрствуя, пишем там ajax-запрос к url http://ws.geonames.org/searchJSON, в опции dataType указываем, что в ответе ожидаем получить данные в формате JSON. В опции data определяем объект с параметрами запроса, который будет отправляться на указанный url (почему параметры именно такие – надо смотреть документацию по API на сервере geonames.org ). В последнем параметре передаем request.term – то, что ввел пользователь.

В следующей опции ajax-запроса – опции success , вызываем функцию обработки ответа response . В аргументе, который мы передаем этой функции, мы можем обрабатывать данные, полученные в ответе сервера так, как нам будет угодно. Мы используем метод $.map чтобы применить некоторую функцию к каждому элементу объекта, переданному в первом аргументе. Внутри функции мы можем обращаться к свойствам объекта - item.countryName , item.lng , item.lat (почему свойства именно такие – см. документацию по API, которую предоставляет веб-сервис ). Функция, которую мы написали, для каждого элемента возвращает объект, содержащий два свойствами, которые мы определили самостоятельно, используя полученные данные. Из получившегося массива таких объектов и строится список подсказок.

В общем, вот так как-то… В заключение, большая человеческая просьба – в комментариях пожалуйста, можете похвалить или поругать в принципе. Если же Вы хотите задать технический вопрос, то задавайте его на