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

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

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

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

$("#dialog").dialog({
   autoOpen: false
});
$("#dialog").dialog("open");

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

position: [50, 50]

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

position: ["right", "bottom"]

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

position: "center"
$("#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>
$("#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() позволяет также управлять созданным окном. Для этого в первом параметре указываются следующие значения.

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

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

или

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

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

Для шести последних событий мне не удалось назначить обработчик элементу с идентификатором окна через метод 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>
Предыдущая статья Все статьи Следующая статья