Что такое jquery user interface. Установка библиотеки jQuery UI

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

~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{color:#888; margin:8px 0 12px 0} #draggable{width:125px; height:125px; padding:0.5em; border:1px solid #ddd; background-color:#eee} ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div id="draggable"~gt~ ~lt~p~gt~Перетаскиваемый элемент~lt~/p~gt~ ~lt~/div~gt~ ~lt~script~gt~ $("#draggable").draggable(); // эта строка кода, которая делает элемент перетаскиваемым ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

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

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 );

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

А ещё появляется метод «.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()»:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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()».