jQuery UI — это библиотека на основе jQuery, реализующая более 20 плагинов, среди которых плагины организующие различное поведение (например перетаскивание или растягивание элементов), восемь видов виджетов (такие как календарь, диалоговые окна, систему вкладок и.т.д) и анимационные эффекты. Кроме этого, UI обладает несколькими темами оформления, с помощью которых оформляются виджеты и которые содержат набор полезных иконок (173 штуки). Любая из тем оформления может быть подкорректирована прямо на сайте jQuery UI, непосредственно перед загрузкой.
Начнем
jQuery 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="https://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{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;}
.element{float:left; width:120px; height:120px; margin:7px; padding:0.5em; border:1px solid #ddd; background-color:#eee}
.element h3{padding:3px; margin:0; background-color:#f8f8f8; text-align:center; font:normal 8pt Arial,sans-serif; color:#444}
#droppable{background-color:#f2c579;}
#droppable h3{background-color:#f1d29e;}
#draggable{width:100px; height:100px;}
#selectable .ui-selecting{background:#f1d29e;}
#selectable .ui-selected{background:#f2c579; color:white;}
ul{list-style-type:none; margin:0; padding:0; width:150px;}
ul li{margin:3px; padding:4px; background-color:#fff; border:1px solid #888}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div class="itLf"~gt~
~lt~p~gt~Перетаскивание и "ловля" элементов~lt~/p~gt~
~lt~div id="draggable" class="element"~gt~
~lt~h3~gt~Перетаскиваемый элемент~lt~/h3~gt~
~lt~/div~gt~
~lt~div id="droppable" class="element"~gt~
~lt~h3~gt~Ловящий элемент~lt~/h3~gt~
~lt~/div~gt~
~lt~/div~gt~
~lt~div class="itRg"~gt~
~lt~p~gt~Растягивание элементов~lt~/p~gt~
~lt~div id="resizable" class="element"~gt~
~lt~h3~gt~Растягиваемый элемент~lt~/h3~gt~
~lt~/div~gt~
~lt~/div~gt~
~lt~div class="itLf" style="height:150px"~gt~
~lt~p~gt~Выделяемые элементы~lt~/p~gt~
~lt~ul id="selectable"~gt~
~lt~li~gt~Item 1~lt~/li~gt~
~lt~li~gt~Item 2~lt~/li~gt~
~lt~li~gt~Item 3~lt~/li~gt~
~lt~li~gt~Item 4~lt~/li~gt~
~lt~/ul~gt~
~lt~/div~gt~
~lt~div class="itRg" style="height:150px"~gt~
~lt~p~gt~Группируемые элементы~lt~/p~gt~
~lt~ul id="sortable"~gt~
~lt~li~gt~Item 1~lt~/li~gt~
~lt~li~gt~Item 2~lt~/li~gt~
~lt~li~gt~Item 3~lt~/li~gt~
~lt~li~gt~Item 4~lt~/li~gt~
~lt~/ul~gt~
~lt~/div~gt~
~lt~script~gt~
$("#resizable").resizable();
$("#draggable").draggable();
$("#droppable").droppable({ drop:function(){
$(this).addClass("ui-state-highlight")
.find("h3").html("Поймал!");
}});
$("#selectable").selectable();
$("#sortable").sortable().disableSelection();
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Каждая из представленных выше возможностей, организуется в считанные строки кода.
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="https://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="https://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 можно использовать, чтобы задавать скругленные углы или например стилизованные области, для системных предупреждениях или сообщениях об ошибке:
~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="https://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{padding:10px; font:9pt Arial,sans-serif;}
p.titl{clear:both; margin:0; padding:5px 0 5px 7px; font-style:italic}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~p class="titl"~gt~Стилизация сообщений и скругленные углы~lt~/p~gt~
~lt~div class="ui-widget" style="float:left;"~gt~
~lt~div class="ui-state-highlight ui-corner-all" style="padding:0 .7em"~gt~
~lt~p~gt~
~lt~span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"~gt~~lt~/span~gt~
~lt~strong~gt~Hey!~lt~/strong~gt~ Это пример стиля ui-state-highlight.
~lt~/p~gt~
~lt~/div~gt~
~lt~/div~gt~
~lt~div class="ui-widget" style="float:left; margin-top:15px"~gt~
~lt~div class="ui-state-error ui-corner-all" style="padding:0 .7em"~gt~
~lt~p~gt~
~lt~span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"~gt~~lt~/span~gt~
~lt~strong~gt~Внимание!~lt~/strong~gt~ Это пример стиля ui-state-error.
~lt~/p~gt~
~lt~/div~gt~
~lt~/div~gt~
~lt~p class="titl" style="padding-top:25px"~gt~Иконки. ~lt~a href="http://jqueryui.com/themeroller/"~gt~Весь список~lt~/a~gt~~lt~/p~gt~
~lt~span~gt~
~lt~a class="ic" href="#"~gt~~lt~span class="ui-icon ui-icon-circle-zoomin"~gt~~lt~/span~gt~~lt~/a~gt~
~lt~a class="ic" href="#"~gt~~lt~span class="ui-icon ui-icon-info"~gt~~lt~/span~gt~~lt~/a~gt~
~lt~a class="ic" href="#"~gt~~lt~span class="ui-icon ui-icon-arrow-4"~gt~~lt~/span~gt~~lt~/a~gt~ ~lt~b~gt~ . . .~lt~/b~gt~
~lt~/span~gt~
~lt~script~gt~
$('.ic').button();
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Использование
Прежде чем приступать к изучению использования отдельных плагинов, важно узнать принцип работы со всей библиотекой jQuery UI.
Выбор компонентов и загрузка
Зайдите на страницу загрузки jQuery UI и вы увидите, что перед скачиванием можно выбрать необходимые компоненты, тему оформления и версию библиотеки:
вес js-файла, включающего все компоненты составляет 200кб (в несжатом виде), поэтому исключение ненужных компонент может оказаться весьма полезным. Посмотреть как выглядят те или иные темы оформления, а так же отредактировать одну из них для себя, можно на странице http://jqueryui.com/themeroller/.
Если вы хотите использовать тему оформления, которую вы настроите самостоятельно, то в начале сделайте все необходимые настройки темы на этой странице, затем нажмите кнопку "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>
<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
И все! После этого вы можете использовать возможности 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="https://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 и затем вызвать на них метод работы с плагином (имя которого всегда совпадает с названием плагина):
| $("#someId").dialog()
| применит плагин Dialog к элементу с идентификатором someId, превратив его в диалоговое окно.
|
| $("div:lt(3)").draggable()
| применит плагин Draggable к первым трем div'ам на странице, сделав их перетаскиваемыми.
|
Методы
Обычно, под методом какого-то объекта в javascript, подразумевается функция, вызываемая на этом объекте следующим образом:
obj.A(); // вызов метода A на объекте obj
obj.B(); // вызов метода B на объекте obj
Однако в пределах работы с конкретными плагинами jQuery UI, методами называют такую форму записи:
$("#someId").plaginName("имя метода", параметры метода);Например:
| $("#someId").dialog("close")
| метод close закроет диалоговое окно, установленное на элемент с id = someId
|
| $("div").draggable("destroy")
| destroy удалит функциональность draggable со всех div-элементов на странице
|
Свойства
Каждый плагин обладают рядом свойств (их описание можно найти в документации соответствующих плагинов). Каждое свойство можно задать в момент инстанцирования плагина. Для этого, при установке плагина на элемент нужно передать объект со свойствами в формате {имя_свойства_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, 1 - 1, 1)); События
Каждый плагин является источником ряда специфических событий. Например перетаскиваемые элементы производят события начала перетаскивания (dragstart) и окончания перетаскивания (dragstop), диалоговые окна являются источниками событий их открытия и закрытия (dialogopen и dialogclose) и т.д. Обработчики событий можно устанавливать средствами основного метода плагина:
// обработка события close диалогового окна
$("selector").dialog({
close: function(event, ui) { ... }
});или с помощью bind стандартного метода библиотеки jQuery. В этом случае, к названию события всегда будет добавляться префикс из названия плагина (dialogclose вместо close, dragstop вместо stop и т. д.):
// обработка события close диалогового окна
$("selector").bind( "dialogclose", function(event, ui){ ... });Список событий можно найти в документации соответствующих плагинов.
Оформление
Все плагины jQuery UI обладают общей системой оформления. Ее можно настраивать с помощью визуального редактора ThemeRoller, а так же манипулируя css напрямую. Подробнее об этом можно узнать в статье Оформление_в_jQuery_UI.
Создание своих плагинов
Помимо того, что jQuery UI организует множество удобных и интуитивно понятных плагинов, она предоставляет средство, с помощью которого можно делать подобные плагины самостоятельно — фабрику виджетов UI. Одним из ее больших плюсов является то, что в ней организованы некоторые возможности ООП, позволяющие дорабатывать существующие виджеты и создавать собственные иерархии виджетов.
