Модуль UI Dialog — диалоговые окна

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

  • jquery-ui-1.7.2.custom.css и каталог images (папка css\smoothness);
  • jquery-1.3.2.min.js (папка js);
  • jquery-ui-1.7.2.custom.min.js (папка js);
  • jquery.bgiframe.min.js (папка development-bundle1\external\bgiframe).

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

Листинг 12.20. Диалоговое окно с параметрами по умолчанию

<!doctype html>
<html>
<head>
<title>Диалоговое окно с параметрами по умолчанию</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet"
      href="css/smoothness/jquery-ui-1.7.2.custom.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script
   src="development-bundle1/external/bgiframe/jquery.bgiframe.min.js">
</script>
<script>
$(document).ready(function() {
   $("#dialog").dialog();
});
</script>
<style>
.ui-dialog { font-size: 8pt; font-family: "Verdana", sans-serif; }
.ui-dialog-title { font-size: 10pt; font-weight: bold;}
.ui-dialog-content { font-size: 10pt; }
</style>
</head>
<body>
<div id="dialog" title="Заголовок окна">
<p>Это текст внутри окна</p>
</div>
</body>
</html>

Результат выполнения листинга показан на рис. 12.5.

pic12_5.png

Рис. 12.5. Диалоговое окно с параметрами по умолчанию

Как видно из приведенного примера, шаблоном для диалогового окна является элемент DIV.

<div id="dialog" title="Заголовок окна">
<p>Это текст внутри окна</p>
</div>

Текст, расположенный внутри элемента, выводится в окне, а значение параметра title становится заголовком. По умолчанию можно перемещать окно и изменять его размеры, а щелчком на кнопке "x" в правом верхнем углу окно можно закрыть.

Для создания диалогового окна и управления им предназначен метод dialog(). Форматы метода:

dialog([<Объект с опциями>])
dialog(<Параметр>[, <Название опции>[, <Значение опции>]])

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

  • autoOpen — если указано значение true, то диалоговое окно будет автоматически открываться сразу после вызова метода dialog(). Если указано значение false, то открыть окно можно только явно с помощью параметра open.
$("#dialog").dialog({
   autoOpen: false
});
$("#dialog").dialog("open");

Значением опции по умолчанию является true.

  • title — задает текст в заголовке окна. Если опция не указана, то заголовком окна станет текст в параметре title тега <div>.
  • position — определяет начальное положение окна. Может быть указан массив координат левого верхнего угла в пикселях.
position: [50, 50]

Вместо чисел могут быть указаны строковые значения "center", "left", "right", "top" или "bottom". Например, выведем окно в правом нижнем углу.

position: ["right", "bottom"]

В качестве значения может быть также указана строка.

position: "center"
  • modal — если указано значение true, то с помощью создания дополнительного слоя между окном и другими элементами будет имитирован модальный режим. В этом режиме другие элементы будут доступны только после закрытия диалогового окна. Значением по умолчанию является false.
  • width — ширина окна в пикселях; значение по умолчанию — 300.
  • maxWidth — максимальная ширина окна в пикселях при изменении размера.
  • minWidth — минимальная ширина окна в пикселях при изменении размера; значение по умолчанию — 150.
  • height — высота окна в пикселях. По умолчанию высота окна определяется содержимым. Если высота недостаточна, то появятся полосы прокрутки.
  • maxHeight — максимальная высота окна в пикселях при изменении размера.
  • minHeight — минимальная высота окна в пикселях при изменении размера; значение по умолчанию — 150.
  • draggable — если установлено значение true, то окно можно будет перемещать с помощью мыши, а если false, то нельзя. Для работы опции необходимо подключение модуля UI Draggable. Значение по умолчанию — true.
  • resizable — если установлено значение true, то можно будет изменять размеры окна, а если false, то нельзя. Для работы опции необходимо подключение модуля UI Resizable. Значение по умолчанию — true.
  • show — эффект при открытии окна; значение по умолчанию — null.
  • hide — эффект при закрытии окна; значение по умолчанию — null.
  • zIndex — значение атрибута z-index для диалогового окна; значение по умолчанию — 1000.
  • closeOnEscape — если указано значение true, то окно можно закрыть с помощью клавиши <Esc>, а если false, то нельзя. Значение по умолчанию — true.
  • dialogClass — дополнительные стилевые классы, которые будут применены к окну. Если классов несколько, то следует указать их через пробел.
$("#dialog").dialog({
   dialogClass: "dialog-font-size dialog-font-family"
});
<style>
.dialog-font-size { font-size: 8pt; }
.dialog-font-family { font-family: "Verdana", sans-serif; }
</style>
  • bgiframe — если указано значение true, то будет исправлена ошибка в браузере Internet Explorer 6. Ошибка заключается в том, что элементы SELECT помещаются поверх других элементов независимо от значения атрибута z-index. Обратите внимание: для работы этой опции необходимо подключить модуль BgIframe. Значение по умолчанию — false.
  • stack — если указано значение true, то при выделении окно будет отображаться поверх всех других открытых диалоговых окон. Значение по умолчанию — true.
  • buttons — позволяет разместить кнопки в диалоговом окне и назначить им обработчики. Выведем кнопку и после щелчка на ней закроем окно.
$("#dialog").dialog({
   buttons: {
      "Закрыть": function() {
         $(this).dialog("close"); // Закрываем окно
      }
   }
});

Обратите внимание на то, что внутри анонимной функции доступен указатель (this) на текущее диалоговое окно.

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

$("#dialog").dialog("option", "title", "Новый заголовок");

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

alert($("#dialog").dialog("option", "title"));

Для примера выведем диалоговое окно после щелчка на кнопке. В окне разместим надпись, текстовое поле и две кнопки. С помощью первой кнопки можно будет заменить заголовок окна значением, введенным в текстовое поле. Вторая кнопка позволяет закрыть окно. Кроме того, создадим кнопку, при щелчке на которой выводится исходный HTML-код созданного диалогового окна (листинг 12.21).

Листинг 12.21. Вывод диалогового окна после щелчка на кнопке

<!doctype html>
<html>
<head>
<title>Вывод диалогового окна после щелчка на кнопке</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet"
      href="css/smoothness/jquery-ui-1.7.2.custom.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script
   src="development-bundle1/external/bgiframe/jquery.bgiframe.min.js">
</script>
<script>
$(document).ready(function() {
   $("#dialog").dialog({
      autoOpen: false, // Открывать ли окно сразу
      bgiframe: true, // Решение проблемы с IE6
      closeOnEscape: true, // Закрывать ли при нажатии Esc
      title: "Новый заголовок", // Заголовок
      position: ["center", 50], // Местоположение окна
      width: 500, // Ширина окна
      height: "auto", // Высота окна
      draggable: false, // Перемещение
      resizable: false, // Изменение размера
      modal: false, // Модальное окно или нет
      show: null, // Эффект при открытии окна
      hide: null, // Эффект при закрытии окна
      buttons: { // Описание кнопок
         "Закрыть": function() {
            $(this).dialog("close"); // Закрыть окно
         },
         "Изменить заголовок": function() {
            $(this).dialog("option", "title", $("#txt1").val());
            $("#txt1").val("");
         }
      }
   });
//   $(".ui-dialog-titlebar").hide(); // Спрятать заголовок
//   $(".ui-dialog-titlebar-close").hide(); // Спрятать крестик
   $("#btn1").click(function() {
      $("#dialog").dialog("open"); // Открыть окно
   });
   $("#btn2").click(function() {
      $("#div1").text($(".ui-dialog").html());
   });
});
</script>
<style>
.ui-dialog { font-size: 8pt; font-family: "Verdana", sans-serif; }
.ui-dialog-title { font-size: 10pt; font-weight: bold;}
.ui-dialog-content { font-size: 10pt; }
</style>
</head>
<body>
<div id="dialog" title="Заголовок окна">
<p><span class="ui-icon ui-icon-info" 
         style="float:left; margin-right:.3em;"></span>
Это текст внутри окна.<br><br>
Новый текст заголовка:<br>
<input type="text" id="txt1" size="40"></p>
</div>
<input type="button" value="Открыть окно" id="btn1">
<input type="button" value="Вывести исходный код окна" id="btn2">
<div id="div1"></div>
</body>
</html>

Результат выполнения листинга 12.21 показан на рис. 12.6.

pic12_6.png

Рис. 12.6. Результат выполнения листинга 12.21

Обратите внимание на две закомментированные строки.

$(".ui-dialog-titlebar").hide(); // Спрятать заголовок
$(".ui-dialog-titlebar-close").hide(); // Спрятать крестик

Модуль UI Dialog не предоставляет стандартных методов для сокрытия заголовка или крестика. Однако, изучив исходный HTML-код диалогового окна, можно найти способ скрыть эти два элемента. Это мы и сделали.

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

// Спрятать заголовок
$("#dialog").dialog({...}).parent().find(".ui-dialog-titlebar").hide();
// Спрятать крестик
$("#dialog").dialog({...}).parent()
.find(".ui-dialog-titlebar-close").hide();

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

  • open — открывает окно.
  • close — закрывает окно.
  • destroy — удаляет окно и возвращает элемент DIV в первоначальное состояние. Чтобы вновь открыть окно, его необходимо заново создать.
  • disable — временно запрещает использование окна.
  • enable — разрешает использование окна, если ранее оно было запрещено с помощью значения disable.
  • moveToTop — помещает окно поверх всех других открытых диалоговых окон.
  • isOpen — возвращает значение true, если диалоговое окно уже открыто.

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

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

или

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

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

  • open (dialogopen) — при открытии окна.
  • beforeclose (dialogbeforeclose) — при попытке закрыть окно. Если внутри функции обратного вызова вернуть значение false, то окно закрыто не будет.
  • close (dialogclose) — при закрытии окна.
  • focus (dialogfocus) — в момент получения окном фокуса.
  • dragStart — в начале перемещения окна.
  • drag — наступает постоянно во время перемещения окна.
  • dragStop — в конце перемещения окна.
  • resizeStart — в начале изменения размеров окна.
  • resize — наступает постоянно во время изменения размеров окна.
  • resizeStop — в конце изменения размеров окна.

Для шести последних событий мне не удалось назначить обработчик элементу с идентификатором окна через метод bind(). Однако можно назначить обработчик элементам, имеющим класс ui-dialog. В этом случае название события указывается в нижнем регистре.

$("#dialog").dialog();
$(".ui-dialog").bind("dragstart", function() {
   $("#div1").append("Событие dragStart<br>");
}).bind("drag", function() {
   $("#div1").append("Событие drag<br>");
}).bind("dragstop", function() {
   $("#div1").append("Событие dragStop<br>");
});
<div id="dialog" title="Заголовок">Текст окна</div>
<div id="div1"></div>

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

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

Значение параметра <Объект UI> зависит от события. Например, при перемещении окна доступны объекты position, absolutePosition и offset, возвращающие положение левого верхнего угла окна относительно других элементов или документа. Получить значения можно через свойства top и left. При изменении размера окна доступны объекты position, originalPosition, size, originalSize. Последние два объекта содержат информацию о размерах окна. Получить значения можно через свойства width и height. Пример обработки различных событий приведен в листинге 12.22.

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

<!doctype html>
<html>
<head>
<title>Модуль UI Dialog, обработка событий</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet"
      href="css/smoothness/jquery-ui-1.7.2.custom.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script
   src="development-bundle1/external/bgiframe/jquery.bgiframe.min.js">
</script>
<script>
$(document).ready(function() {
   $("#dialog").dialog({
      draggable: true,
      resizable: true,
      bgiframe: true,
      beforeclose: function() {
         if (!$("#ckb1").is(":checked")) {
            alert("Для закрытия необходимо установить флажок...");
            return false;
         }
      },
      dragStop: function(e, ui) {
         var msg = "position.top = " + ui.position.top + "<br>";
         msg += "position.left = " + ui.position.left + "<br>";
         msg += "offset.top = " + ui.offset.top + "<br>";
         msg += "offset.left = " + ui.offset.left + "<br>";
         $("#div1").append(msg + "<br>");
      },
      resizeStop: function(e, ui) {
         var msg = "position.top = " + ui.position.top + "<br>";
         msg += "position.left = " + ui.position.left + "<br>";
         msg += "size.width = " + ui.size.width + "<br>";
         msg += "size.height = " + ui.size.height + "<br>";
         $("#div1").append(msg + "<br>");
      },
      buttons: {
         "Закрыть окно": function() {
            $(this).dialog("close");
         }
      }
   });
});
</script>
</head>
<body style="font-size:8pt; font-family:Verdana;">
<div id="dialog" title="Заголовок окна">
<input type="checkbox" id="ckb1"> Я хочу закрыть окно
</div>
<div id="div1"></div>
</body>
</html>

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

Помощь сайту

Yandex-деньги: 410011140483022

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

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