Библиотека jQuery UI

jQuery UI (User Interface) — это библиотека визуальных компонентов пользовательского интерфейса, обеспечивающая кроссбраузерную поддержку. Библиотека имеет модульную структуру. На странице загрузки http://jqueryui.com/download можно выбрать компоненты, которые планируется использовать. Прежде чем загружать готовые компоненты, необходимо на странице http://jqueryui.com/themeroller/ выбрать тему оформления. На вкладке Gallery (рис. 12.1) представлены примеры оформления компонента Datepicker (календарь). Щелкнув мышью на понравившемся календаре, можно сразу увидеть, как будут выглядеть другие компоненты. Если ни одна из тем не подходит, то на вкладке Roll Your Own можно изменить значения различных атрибутов стиля и создать свою собственную тему.

pic12_1.png

Рис. 12.1. Страница выбора темы оформления

Прежде чем использовать возможности jQuery UI, необходимо предварительно подключить базовую библиотеку jQuery. При подключении следует учитывать версии библиотек. Для нормальной работы jQuery UI 1.7.2 необходима библиотека jQuery 1.3.2, а для jQuery UI 1.6 требуется библиотека jQuery 1.2.6. В этой главе мы рассмотрим возможности jQuery UI версии 1.7.2.

Примечание

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

Модуль UI Draggable — перемещение элементов

Модуль UI Draggable позволяет свободно перемещать любой DOM-элемент с помощью мыши. Для загрузки модуля переходим на страницу http://jqueryui.com/download. Оставляем установленными флажки UI Core, Draggable, 1.7.2, а затем щелкаем на кнопке Download. Распаковываем архив в отдельную папку. Из этого архива для работы модуля необходимы следующие файлы:

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

Листинг 12.1. Модуль UI Draggable. Перемещение элементов

<!doctype html>
<html>
<head>
<title>Модуль UI Draggable. Перемещение элементов</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<style>
* { margin:0; padding:0; }
body { font-size:8pt; font-family:Verdana, sans-serif; }
#draggable {
   position:absolute;
   top:50px; left:50px;
   width:100px; height:100px;
   padding:2px;
   border:2px solid #000000;
}
.ui-draggable {
   /* Класс, добавляемый после применения метода draggable() */
   background-color:#E8E8E8;
}
.ui-draggable-dragging {
   /* Класс, добавляемый при перемещении элемента */
   background-color:#008800;
}
</style>
<script>
$(document).ready(function() {
   $("#draggable").draggable();
});
</script>
</head>
<body>
<div id="draggable"><p>Передвинь меня с помощью мыши</p></div>
</body>
</html>

Сделать перемещаемым можно практически любой элемент, хотя чаще всего используется элемент DIV. В нашем примере для элемента с идентификатором draggable мы указали атрибут position со значением absolute. Если атрибут не указан, то после применения метода draggable() автоматически будет добавлен атрибут position со значением relative. Кроме того, по умолчанию добавляется класс ui-draggable, а при перемещении элемента — класс ui-draggable-dragging, который удаляется после окончания перемещения элемента.

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

draggable([<Объект с опциями>])

Параметр <Объект с опциями> представляет собой объект, состоящий из пар "опция/значение". Могут быть указаны следующие опции.

Значение по умолчанию — false.

Значение по умолчанию — false (при перемещении элемента курсор располагается в том месте, где был произведен щелчок мышью).

Рассмотрим несколько примеров. Во время перемещения курсор будет находиться над верхней границей элемента.

cursorAt: { top: 0 }

Курсор будет расположен в левом верхнем углу.

cursorAt: { top: 0, left: 0 }

Курсор будет расположен на одном уровне с верхней границей, но сдвинут на 5 px от элемента относительно правой границы.

cursorAt: { top: 0, right: -5 }

Курсор будет смещен на 5 px ниже нижней границы и на 5 px от левой границы элемента.

cursorAt: { bottom: -5, left: -5 }

Обратите внимание

Нельзя одновременно указывать свойства top и bottom, а также left и right.

[<Шаг по горизонтали>, <Шаг по вертикали>]

Рассмотрим пример.

grid: [40, 60]

Значение по умолчанию — false.

В качестве значения может быть указана ссылка на функцию. В этом случае функция должна возвращать DOM-элемент. Пример возврата текущего элемента.

helper: function() { return this; }

А теперь пример возврата копии элемента:

helper: function() { return $(this).clone()[0]; }

Перемещение созданного элемента:

helper: function() {
   return $("<div>Произвольный элемент</div>");
}

Рассмотрим пример.

stack: { group: "#div1 div", min: 1 }

Значение по умолчанию — false.

Пример создания перемещаемых элементов с различными вариантами настроек приведен в листинге 12.2.

Листинг 12.2. Модуль UI Draggable, различные варианты настроек

<!doctype html>
<html>
<head>
<title>Модуль UI Draggable. Различные варианты настроек</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<style>
* { margin:0; padding:0; }
body { font-size:8pt; font-family:Verdana, sans-serif; }
.drag {
   position:absolute;
   width:100px; height:100px;
   padding:2px;
   border:2px solid #000000;
   text-align:center;
}
.ui-draggable {
   /* Класс, добавляемый после применения метода draggable() */
   background-color:#fff4dd;
}
.ui-draggable-dragging {
   /* Класс, добавляемый при перемещении элемента */
   background-color:#008800;
}
</style>
<script>
$(document).ready(function() {
   $("#draggable1").draggable({
      // Отключаем добавление класса ui-draggable
      addClasses: false,
      axis: "x", // Перемещение только по горизонтали
      // Возврат на прежнее место по окончании перемещения
      revert: true,
      cursor: "e-resize", // Вид курсора при перемещении
      delay: 200 // Задержка перед перемещением
   });
   $("#draggable2").draggable({
      // Перемещение в пределах родительского элемента
      containment: "parent",
      opacity: 0.3 // Прозрачность при перемещении
   });
   $("#draggable3").draggable({
      grid: [40, 60] // Привязка к сетке
   });
   $("#draggable4").draggable({ snap: true, snapTolerance: 30 });
   $("#draggable5").draggable({ snap: "#div1" });
   $("#draggable6").draggable({ snap: "#div1", snapMode: "inner" });
   // Отключение прокрутки
   $("#draggable7").draggable({ scroll: false });
   $("#draggable8").draggable({ scrollSensitivity: 100,
                                scrollSpeed: 20 });
   $("#draggable9").draggable({
      helper: "clone", // Перемещение копии элемента
      // Копию вставляем к конец содержимого элемента BODY
      appendTo: "body",
      // После окончания перемещения возврат на прежнее место
      revert: true
   });
   $("#draggable10").draggable({
      cursor: "crosshair", // Вид курсора при перемещении
      cursorAt: { top: 0, left: 0 } // Местоположение курсора
   });
   $("#draggable11").draggable({ zIndex: 9000 });
   $("#draggable12, #draggable13").draggable({
      stack: { group: "#div2 div", min: 5 }
   });
   $("#draggable14").draggable({ cursor: "move", handle: "#div3" });
   $("#draggable15").draggable({ cancel: "#div3" });
});
</script>
</head>
<body>
<div style="height:1500px; width:5px;"></div>
<div id="draggable11" class="drag" style="top:200px; left:700px;">
Блок будет расположен над другими элементами при перемещении</div>
<div id="draggable1" class="drag" style="top:5px; left:50px;">
Блок можно передвинуть только по горизонтали</div>
<div id="div1" style="position:absolute; top:160px; left:50px;
width:550px; height:150px; border:2px solid #000000;">
Родительский элемент id=div1
<div id="draggable2" class="drag" style="top:15px; left:250px;">
Блок можно передвинуть только в пределах родительского элемента</div>
</div>
<div id="draggable3" class="drag"
style="top:5px;left:250px;height:130px;">
Блок можно передвинуть не менее чем на 40px по горизонтали
или не менее чем на 60px по вертикали</div>
<div id="draggable4" class="drag" style="top:350px; left:50px;">
Блок прилипнет к границе любого перемещаемого элемента</div>
<div id="draggable5" class="drag" style="top:350px; left:200px;">
Блок прилипнет к границе элемента с id=div1</div>
<div id="draggable6" class="drag" style="top:350px; left:350px;">
Блок прилипнет к границе элемента с id=div1, но только с
внутренней стороны</div>
<div id="draggable7" class="drag" style="top:5px; left:450px;">
При перемещении за рамки окна прокрутки не будет</div>
<div id="draggable8" class="drag" style="top:5px; left:600px;">
Прокрутка начнется при расстоянии 100px от края окна до
указателя мыши</div>
<div id="draggable9" class="drag" style="top:5px; left:750px;">
Перемещаться будет копия блока</div>
<div id="draggable10" class="drag" style="top:350px; left:500px;">
Блок можно перемещать только за верхний левый угол</div>
<div id="div2" style="position:absolute; top:500px; left:50px;
width:550px; height:150px; border:2px solid #000000;">Группа
<div id="draggable12" class="drag" style="top:15px; left:150px;">
Блок будет расположен над другим элементом в этой группе</div>
<div id="draggable13" class="drag" style="top:15px; left:350px;">
Блок будет расположен над другим элементом в этой группе</div>
</div>
<div id="draggable14" class="drag" style="top:350px; left:700px;">
<div id="div3" style="background-color:#ff9600;">Заголовок</div>
<br>Блок можно переместить только с помощью заголовка</div>
<div id="draggable15" class="drag" style="top:500px; left:700px;">
<div id="div3" style="background-color:#ff9600;">Заголовок</div>
<br>Блок с помощью заголовка переместить нельзя</div>
</body>
</html>

Первый формат метода draggable() позволяет задать значения при создании компонента. Чтобы изменить или получить значения опций уже после создания, необходимо использовать второй формат метода draggable(). Для этого в первом параметре указывается значение "option", во втором — название опции, а в третьем — новое значение.

$("#draggable").draggable("option", "axis", "y");

Если необходимо получить значение опции, то третий параметр указывать не нужно. Получим значение опции axis.

alert($("#draggable").draggable("option", "axis"));

Второй формат метода draggable() позволяет также управлять перемещаемым элементом. Для этого в первом параметре указываются следующие значения:

Обработать события, происходящие с перемещаемым элементом, можно двумя способами.

draggable({
   <Событие>: <Функция обратного вызова>
});

или

bind(<Событие>, <Функция обратного вызова>)

В параметре <Событие> могут быть указаны следующие события (в скобках указано значение для метода bind()):

В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата.

function <Название функции>([<Объект event>[, <Объект UI>]]) {
   // ...
}

Через параметр <Объект UI> доступны следующие свойства.

Пример обработки различных событий приведен в листинге 12.3.

Листинг 12.3. Модуль UI Draggable, обработка событий

<!doctype html>
<html>
<head>
<title>Модуль UI Draggable. Обработка событий</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<style>
body { font-size:8pt; font-family:Verdana, sans-serif; }
.drag {
   position:absolute;
   top:10px; left:50px;
   width:100px; height:100px;
   padding:2px;
   border:2px solid #000000;
   text-align:center;
}
.ui-draggable {
   /* Класс, добавляемый после применения метода draggable() */
   background-color:#fff4dd;
}
.ui-draggable-dragging {
   /* Класс, добавляемый при перемещении элемента */
   background-color:#008800;
}
</style>
<script>
$(document).ready(function() {
   $("#draggable").draggable({
      start: function() {
         $("#div2").append("Событие start<br>");
      },
      drag: function(e, ui) {
         $("#div2").append("Событие drag<br>");
         var msg = "Положение:<br> position - сверху: " +
                   ui.position.top;
         msg += " px, слева: " + ui.position.left + " px<br>";
         msg += "offset - сверху: " + ui.offset.top + " px, слева: ";
         msg += ui.offset.left + " px<br>";
         $("#div1").html(msg);
      },
      stop: function(e, ui) {
         $("#div2").append("Событие stop<br>");
         ui.helper.html("<p>Объект остановился</p>");
      }
   }).bind("dragstart", function() {
      $("#div2").html("Событие dragstart<br>");
   }).bind("drag", function() {
      $("#div2").append("Событие drag (bind)<br>");
   }).bind("dragstop", function() {
      $("#div2").append("Событие dragstop<br>");
   });
   $("#btn1").click(function() {
      $("#draggable").draggable("disable");
   });
   $("#btn2").click(function() {
      $("#draggable").draggable("enable");
   });
});
</script>
</head>
<body>
<input type="button" value="Запретить" id="btn1">
<input type="button" value="Разрешить" id="btn2"><br><br>
<div id="div1"></div><div id="div2"></div>
<div style="position:absolute; top:160px; left:250px;
width:550px; height:150px; border:2px solid #000000;">
Родительский элемент
<div id="draggable" class="drag"><p>Передвинь меня с помощью
мыши</p></div>
</div>
</body>
</html>
Предыдущая статья Все статьи Следующая статья