Библиотека 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. Распаковываем архив в отдельную папку. Из этого архива для работы модуля необходимы следующие файлы:

  • jquery-1.3.2.min.js (папка js);
  • jquery-ui-1.7.2.custom.min.js (папка js).

Все указанные файлы необходимо подключить к скрипту в том порядке, в котором они перечислены. В качестве примера рассмотрим использование модуля с параметрами по умолчанию (листинг 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([<Объект с опциями>])

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

  • addClasses — если указано значение false, то класс ui-draggable не будет добавляться при инициализации. Значение по умолчанию — true.
  • axis — позволяет ограничить перемещение элемента. Могут быть указаны следующие значения:
  • x — перемещение только по горизонтали;
  • y — перемещение только по вертикали;
  • false — без ограничения (значение по умолчанию).
  • revert — определяет, куда можно переместить элемент. Могут быть заданы следующие значения:
  • false — можно переместить куда угодно (значение по умолчанию);
  • true — после окончания перемещения элемент автоматически вернется на прежнюю позицию;
  • invalid — после окончания перемещения элемент вернется на прежнюю позицию, если он не был отпущен над элементом, к которому применен метод droppable() (применяется при использовании модуля UI Droppable);
  • valid — можно переместить куда угодно, но если элемент был отпущен над элементом, к которому применен метод droppable(), то он автоматически вернется на прежнюю позицию (применяется при использовании модуля UI Droppable).
  • revertDuration — продолжительность анимации при возвращении элемента на прежнее место (в миллисекундах). Используется, если опция revert не равна значению false. Значение по умолчанию — 500.
  • containment — позволяет ограничить перемещение в пределах указанных границ. В качестве значения можно указать DOM-элемент, селектор jQuery, массив с координатами области ([x1, y1, x2, y2]) или одно из значений:
  • parent — в пределах родительского элемента;
  • window — в пределах окна;
  • document — в пределах всего документа.

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

  • opacity — задает степень прозрачности элемента во время перемещения. Может быть указано вещественное число от 0 до 1. Значение по умолчанию — false.
  • cursor — вид курсора при перемещении элемента. Указывается одно из значений атрибута cursor в CSS. Значение по умолчанию — auto.
  • cursorAt — задает местоположение курсора при перемещении элемента. В качестве значения указывается объект с комбинацией следующих свойств:
  • top — положение относительно верхней границы;
  • left — положение относительно левой границы;
  • right — положение относительно правой границы. При положительных значениях курсор сдвигается внутрь элемента, а при отрицательных значениях отодвигается от элемента справа;
  • bottom — положение относительно нижней границы. При положительных значениях курсор сдвигается внутрь элемента, а при отрицательных значениях отодвигается от элемента снизу.

Значение по умолчанию — 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 }
Обратите внимание
  • delay — позволяет задать задержку в миллисекундах перед началом перемещения элемента. Используется для предотвращения нежелательного перемещения при случайном щелчке на элементе. Значение по умолчанию — 0.
  • distance — расстояние в пикселах, после прохождения которого начинается перемещение элемента. Используется для предотвращения нежелательного перемещения при случайном щелчке на элементе. Значение по умолчанию — 1.
  • grid — устанавливает шаг перемещения по горизонтали и вертикали (в пикселях). В качестве значения указывается массив с двумя элементами.
[<Шаг по горизонтали>, <Шаг по вертикали>]

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

grid: [40, 60]

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

  • snap — если указано значение true, то элемент будет "прилипать" к границе любого перемещаемого элемента в случае приближения к нему на расстояние, заданное в опции snapTolerance. В качестве значения можно также указать селектор jQuery. Значение по умолчанию — false.
  • snapTolerance — минимальное расстояние (в пикселях), при котором перемещаемый элемент начнет "прилипать" к границе другого элемента. Применяется, если значение опции snap не равно false. Значение по умолчанию — 20.
  • snapMode — позволяет указать, к каким сторонам границы будет "прилипать" перемещаемый элемент. Применяется, если значение опции snap не равно false. Могут быть указаны следующие значения:
  • both — "прилипание" к внутренним и внешним сторонам границы (значение по умолчанию);
  • inner — только к внутренней стороне границы;
  • outer — только к внешней стороне границы.
  • scroll — если указано значение false, то перемещение элемента за границы окна не будет приводить к автоматической прокрутке документа. Значение по умолчанию — true.
  • scrollSensitivity — расстояние (в пикселях) от края окна, при котором будет происходить прокрутка документа. Обратите внимание на то, что расстояние отсчитывается от указателя мыши, а не от границы перемещаемого элемента. Значение по умолчанию — 20.
  • scrollSpeed — скорость прокрутки документа. Значение по умолчанию — 20.
  • helper — позволяет указать элемент, который будет перемещаться. Могут быть указаны следующие значения:
  • original — перемещается сам элемент (значение по умолчанию);
  • clone — перемещается копия элемента.

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

helper: function() { return this; }

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

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

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

helper: function() {
   return $("<div>Произвольный элемент</div>");
}
  • appendTo — ссылка на элемент-контейнер, в конец которого будет вставляться элемент, указанный в опции helper или если значение опции helper равно clone. В качестве значения указывается селектор jQuery или ссылка на элемент. Значение по умолчанию — parent (для вставки используется родительский элемент).
  • zIndex — значение CSS-атрибута z-index при перемещении элемента. Значение по умолчанию — false.
  • stack — устанавливает автоматический контроль значения CSS-атрибута z-index для группы элементов. При использовании этой опции перемещаемый элемент всегда будет расположен над другими элементами в группе. В качестве значения указывается объект с двумя свойствами:
  • group — ссылка на группу элементов (указывается селектор jQuery);
  • min — минимальное значение CSS-атрибута z-index.

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

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

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

  • handle — позволяет указать один или несколько элементов внутри блока, захватив которые можно переместить весь блок. В качестве значения указывается селектор jQuery или ссылка на элемент. Значение по умолчанию — false (переместить блок можно, захватив любой элемент, кроме указанных в опции cancel).
  • cancel — позволяет указать один или несколько элементов внутри блока, захватив которые нельзя будет переместить весь блок. В качестве значения указывается селектор jQuery. Значение по умолчанию — ":input,option";
  • scope — ограничивает область видимости при "сбрасывании" элементов. Если в элементе-цели указана другая область видимости, то событие drop не сработает. В качестве значения указывается произвольная строка. Применяется при использовании модуля UI Droppable. Значение по умолчанию — "default".
  • refreshPositions — если указано значение true, то позиции будут вычисляться постоянно в процессе передвижения элемента с помощью мыши. Обратите внимание на то, что эта опция может резко снизить эффективность. Применяется при использовании модуля UI Droppable. Значение по умолчанию — false.
  • iframeFix — если указано значение true, то это позволит решить проблему, возникающую в некоторых браузерах при перемещении элемента над содержимым элементов IFRAME. В качестве значения можно передать селектор jQuery. Значение по умолчанию — false.
  • connectToSortable — позволяет вставить копию перемещаемого элемента одного списка в другой список, являющийся сортируемым. В качестве значения указывается селектор jQuery. Для нормальной работы необходимо, чтобы опция helper имела значение clone. Применяется при использовании модуля UI Sortable. Значение по умолчанию — 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() позволяет также управлять перемещаемым элементом. Для этого в первом параметре указываются следующие значения:

  • disable — временно запрещает перемещение элемента;
  • enable — разрешает перемещение элемента, если ранее оно было запрещено с помощью метода disable;
  • destroy — удаляет всю функциональность и возвращает все элементы в первоначальное состояние.

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

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

или

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

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

  • start (dragstart) — наступает в начале перемещения элемента;
  • drag (drag) — возникает постоянно в процессе перемещения;
  • stop (dragstop) — наступает в конце перемещения элемента.

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

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

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

  • helper — ссылка (объект jQuery) на перемещаемый элемент.
  • position — текущая позиция относительно родительского элемента. Доступны два следующих свойства:
  • top — положение сверху;
  • left — положение слева.
  • offset — текущая позиция относительно окна. Доступны два свойства:
  • top — положение сверху;
  • left — положение слева.

Пример обработки различных событий приведен в листинге 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>

Самоучитель по jQuery
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

Поиск по сайту в Яндексе