Виджет Dialog

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

Создание виджета Dialog

Для создания виджета Dialog, позволяющего превращать блочные элементы (обычно — div) в диалоговые окна, следует выбрать элемент с помощью jQuery и вызвать для него метод dialog(). Виджет Dialog относится к числу тех виджетов, для нормальной работы которых требуется определенная структура HTML-элементов, хотя эта структура намного проще, чем, например, та, которая требуется для виджета Tabs.

Документ, содержащий необходимые элементы и сценарий для создания виджета Dialog, представлен в примере ниже:

Для виджета Dialog требуется элемент div с атрибутом title. Значение этого атрибута служит заголовком диалогового окна. Содержимое элемента div используется в качестве информации, отображаемой в диалоговом окне, и, как показывает пример, может включать в себя другие элементы. Вызов метода dialog() без передачи ему каких-либо опций, как это сделано в примере ниже, приводит к немедленному открытию диалогового окна.

Вид диалогового окна в окне браузера приведен на рисунке:

Диалоговое окно создается исключительно за счет использования специфической структуры HTML-элементов, а не средствами операционной системы. Это означает, что диалоговые окна jQuery UI ведут себя не совсем так, как обычные диалоговые окна. Они не будут видны при отображении пользователем всех открытых окон на рабочем столе, и путем изменения размера окна браузера можно добиться того, что какая-то часть диалогового окна jQuery UI (или все окно целиком) будет скрыта.

Команда jQuery UI хорошо поработала над тем, чтобы наделить диалоговое окно максимально широким набором различных возможностей. Пользователь может переместить диалоговое окно в пределах окна браузера, перетаскивая его заголовок. Можно изменить размер диалогового окна с помощью кнопки-манипулятора, находящейся в его правом нижнем углу, или закрыть его, щелкнув на кнопке закрытия в правом верхнем углу. А поскольку виджет Dialog построен из HTML-элементов, его внешний вид определяется темой оформления jQuery UI, выбранной вами, и он может включать в себя сложное HTML-содержимое, оформленное с помощью стилей.

Прежде чем перейти к подробному рассмотрению свойств, методов и событий, поддерживаемых данным виджетом, хочу привести типичный пример его использования. Если метод dialog() вызывается без аргументов, то диалоговое окно открывается сразу же после того, как этот метод закончит свою работу. Как правило, это не очень удобно.

В большинстве случаев вам будет требоваться диалоговое окно, которое создается после загрузки документа (но так, чтобы структура элементов оставалась невидимой для пользователей) и которое впоследствии можно отобразить в ответ на некоторое событие. Пример того, как это можно сделать, приведен ниже:

Чтобы предотвратить немедленное открытие диалогового окна, следует использовать опцию autoOpen. Если значение этой опции равно false, то вновь созданное диалоговое окно останется невидимым. Когда вы будете готовы к тому, чтобы отобразить его, вызовите метод open.

Настройка виджета Dialog

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

Свойства виджета Dialog

Свойство	Описание
autoOpen	Если эта опция равна true, то диалоговое окно открывается сразу же после его создания с помощью метода dialog(). Значение по умолчанию — true
buttons	Позволяет указать набор кнопок, которые должны быть добавлены в виджет, и функции, которые будут вызываться после щелчка на соответствующей кнопке. По умолчанию кнопки отсутствуют
closeOnEscape	Если эта опция равна true, то диалоговое окно можно будет убрать с экрана, нажав клавишу . Значение по умолчанию — true
draggable	Если эта опция равна true, то пользователь сможет перемещать диалоговое окно, перетаскивая его заголовок, в пределах окна браузера
height	Определяет начальную высоту диалогового окна в пикселях. По умолчанию имеет значение auto, при котором высота диалогового окна устанавливается автоматически
hide	Определяет тип анимации, используемой для сокрытия диалогового окна
maxHeight	Определяет максимальную высоту диалогового окна в пикселях. По умолчанию имеет значение false, которому соответствует отсутствие ограничений по высоте
maxWidth	Определяет максимальную ширину диалогового окна в пикселях. По умолчанию имеет значение false, которому соответствует отсутствие ограничений по ширине
minHeight	Определяет минимальную высоту диалогового окна в пикселях. По умолчанию имеет значение false, которому соответствует отсутствие ограничений по высоте
minWidth	Определяет минимальную ширину диалогового окна в пикселях. По умолчанию имеет значение false, которому соответствует отсутствие ограничений по ширине
modal	Если эта опция равна true, то диалоговое окно будет создано как модальное, и пока оно не будет скрыто, пользователь не сможет взаимодействовать с документом
position	Определяет начальную позицию диалогового окна. Значение по умолчанию — center, которому соответствует расположение диалогового окна по центру окна браузера
resizable	Если эта опция равна true, то диалоговое окно будет иметь кнопку-манипулятор, с помощью которой пользователь сможет изменить его размер. Значение по умолчанию — true
show	Определяет тип анимации, используемой для отображения диалогового окна
stack	Если эта опция равна true, то щелчок на диалоговом окне перемещает его на передний план на экране. Значение по умолчанию — true
title	Определяет заголовок диалогового окна
width	Определяет начальную ширину диалогового окна в пикселях. По умолчанию имеет значение auto, при котором ширина диалогового окна устанавливается автоматически

Настройка внешнего вида базового диалогового окна

Опция title позволяет создать диалоговое окно на основе элемента div, не имеющего атрибута title. Это может быть полезным, если у вас отсутствует возможность управлять генерацией элементов, которые вы хотите использовать в диалоговом окне. Пример использования опции title приведен ниже:

В этом примере также была применена опция resizable. Она управляет наличием кнопки-манипулятора в правом нижнем углу диалогового окна. Лично мне больше нравятся диалоговые окна, не содержащие никаких лишних элементов, но обычно я оставляю значение опции resizable равным true, поскольку предпочитаю предоставлять пользователю возможность изменять размер диалогового окна в зависимости от размера содержимого. Вид диалогового окна в окне браузера представлен на рисунке:

Настройка местоположения диалогового окна

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

Типы значений, используемых в опции position

Значение	Описание
строка	Одно из следующих строковых значений: center, left, right, top, bottom
[число, число]	Массив из двух элементов, содержащий координаты x и y левого верхнего угла окна, например [30, 20]
[строка, строка]	Массив из двух элементов, содержащий строковые значения координат из приведенного выше списка, например [‘left’,’top’]

По умолчанию диалоговое окно располагается по центру окна браузера (значение center). Обычно эта позиция является наилучшей, однако для сравнения ниже приведен пример, в котором диалоговое окно позиционируется с использованием строковых значений:

Обратите внимание на то, что при использовании строковых значений первой указывается позиция вдоль оси X. Конечный результат представлен на рисунке:

Добавление кнопок в диалоговое окно

В диалоговое окно jQuery UI можно добавить кнопки, используя опцию buttons. Значением этой опции является массив объектов, у каждого из которых имеются свойства text и click. Значение свойства text используется в качестве надписи на кнопке, а значением свойства click определяется функция, которая будет вызываться при выполнении на кнопке щелчка.

Пример использования опции buttons приведен ниже:

В этом сценарии добавляются две кнопки. Функция для кнопки «OK» не выполняет никаких полезных действий, тогда как щелчок на кнопке «Отмена» приводит к закрытию диалогового окна.

Обратите внимание на использование переменной this в селекторе jQuery внутри функции—обработчика события click для кнопки «Отмена». Эта переменная указывает на элемент div, который использовался для создания диалогового окна. В этом примере используется метод close, при вызове которого диалоговое окно исчезает с экрана. Методы виджета Dialog описываются более подробно далее. Внешний вид диалогового окна с добавленными кнопками представлен на рисунке:

Перемещение диалоговых окон и их помещение в стек

Опция draggable определяет, сможет ли пользователь перемещать диалоговое окно в пределах окна браузера. По умолчанию значение этой опции равно true, и я рекомендую не менять эту настройку. Благодаря этому пользователь при необходимости всегда сможет увидеть основную часть содержимого, заслоненную диалоговым окном. Это особенно важно, когда диалоговое окно используется для вывода сообщения о возникновении какой-либо ошибки или проблемы. Если опция draggable равна false, то пользователь не сможет сместить диалоговое окно в сторону.

Кроме того, опция draggable может быть полезной в ситуациях, когда вы используете несколько диалоговых окон в одном и том же окне браузера. Я рекомендую всячески этого избегать, но если такая необходимость все-таки возникает, следует принимать меры к тому, чтобы пользователь смог изменять расположение окон, делая доступным для чтения содержимое каждого из них. На небольшом экране диалоговые окна перекрывают друг друга.

Другой полезной опцией является опция stack, которая позволяет задать перемещение диалогового окна на передний план при выполнении на нем щелчка. По умолчанию значением этой опции также является true. Пример использования обеих опций приведен ниже:

В этом документе создаются три диалоговых окна. Для одного из них мы отключаем опцию draggable, а для другого — опцию stack. Результат представлен на рисунке, но по-настоящему понять, насколько неудачны внесенные нами изменения, вы сможете только в том случае, если поработаете с документом, открыв его в окне браузера:

Создание модальных диалоговых окон

Модальное диалоговое окно лишает пользователя возможности взаимодействовать с документом до тех пор, пока оно не будет закрыто. Для создания модального диалогового окна следует использовать опцию modal со значением true, как показано в примере ниже:

В этом примере создается диалоговое окно, которое первоначально невидимо для пользователя. Диалоговое окно отображается в ответ на выполнение пользователем щелчка на кнопке. Результат представлен на рисунке:

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

Если в само диалоговое окно также добавляются кнопки, то необходимо следить за тем, чтобы для выбора кнопки, которая была добавлена в документ для отображения диалогового окна, не использовался селектор $(‘button’). Этому селектору соответствуют все кнопки — как добавленные вами, так и созданные при вызове метода dialog(). Это означает, что кнопки диалогового окна будут связаны с тем же обработчиком события click, что и кнопка в документе, а не с функциями-обработчиками, указанными в опции buttons.

Отображение формы в модальном диалоговом окне

Диалоговые окна имеют то преимущество, что они привлекают внимание пользователей. Этим можно воспользоваться для отображения форм в модальных окнах, как показано в примере ниже:

В этом примере внутри элемента div, на основе которого создается диалоговое окно, определен простой набор элементов input. После щелчка на кнопке, расположенной в документе, отображается диалоговое окно, с помощью которого пользователь может ввести необходимые данные. Когда пользователь щелкнет на кнопке «OK» (которая определена с помощью опции buttons), введенные им данные будут обработаны и добавлены в документ ввиде новой строки в HTML-таблице, как показано на рисунке:

Я не хотел усложнять этот пример, но в реальных проектах можно применить методики проверки корректности введенных пользователем данных, а также методики Ajax для отправки данных на удаленный сервер.

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

Методы виджета Dialog

Методы, поддерживаемые виджетом jQuery UI Dialog, перечислены в таблице ниже:

Методы виджета Dialog

Метод	Описание
dialog(«destroy»)	Удаляет виджет Dialog из базового элемента
dialog(«disable»)	Отключает диалоговое окно
dialog(«enable»)	Включает диалоговое окно
dialog(«option»)	Изменяет одну или несколько опций
dialog(«close»)	Закрывает диалоговое окно
dialog(«isOpen»)	Возвращает true, если диалоговое окно видимо на экране
dialog(«moveToTop»)	Перемещает диалоговое окно на вершину стека
dialog(«open»)	Отображает диалоговое окно для пользователя

Как можно было догадаться, большинство этих методов обеспечивают управление диалоговым окном из программы. Разумеется, чаще всего используются методы open и close. Пример использования наиболее важных методов приведен ниже:

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

События виджета Dialog

Виджет Dialog поддерживает события, перечисленные в таблице ниже. Некоторые наиболее полезные события описаны в следующих разделах.

События виджета Dialog

Событие	Описание
create	Происходит, когда виджет Dialog применяется к базовому HTML-элементу
beforeClose	Происходит непосредственно перед закрытием диалогового окна. Возврат значения false функцией—обработчиком события принудительно оставляет диалоговое окно открытым
open	Происходит при открытии диалогового окна
focus	Происходит при получении фокуса диалоговым окном
dragStart	Происходит, когда пользователь начинает перетаскивать диалоговое окно
drag	Происходит при каждом перемещении мыши в процессе перетаскивания диалогового окна
dragStop	Происходит по окончании перетаскивания пользователем диалогового окна
resizeStart	Происходит, когда пользователь начинает изменять размер диалогового окна
resize	Происходит при каждом перемещении мыши в процессе изменения размера диалогового окна
resizeStop	Происходит по окончании изменения пользователем размеров диалогового окна Происходит при закрытии диалогового окна
close	Поддержание диалогового окна в открытом состоянии

Событие beforeclose позволяет получить уведомление о том, что пользователь затребовал закрытие диалогового окна. Это может быть вызвано тем, что пользователь нажал клавишу (если опция closeOnEscape установлена равной true), щелкнул на кнопке закрытия, находящейся в правом верхнем углу диалогового окна, или щелкнул на кнопке, добавленной с помощью опции buttons.

В большинстве случаев вы будете идти навстречу пожеланиям пользователей, не препятствуя закрытию диалогового окна. Однако иногда может возникать необходимость в том, чтобы пользователь предварительно выполнил некоторые действия с диалоговым окном, или же, как в случае, продемонстрированном в примере ниже, чтобы диалоговое окно отображалось в течение некоторого времени, прежде чем пользователь сможет продолжить работу:

В этом примере определены два элемента input, которые служат для получения имени пользователя и пароля. Однако в данном случае не важно, что введено в этих полях, поскольку после щелчка на кнопке «Войти» всегда отображается модальное диалоговое окно «Неверный пароль»:

При наступлении события open запускается периодически возобновляемый вызов функции, выполняющей обратный отсчет за 15 секунд. Используя событие beforeClose, мы лишаем пользователя возможности закрыть диалоговое окно в течение этого времени. Спустя 15 секунд вызывается метод close, и диалоговое окно автоматически закрывается. Путем совместного использования событий open и beforeClose мы добиваемся того, что пользователь не сможет сразу же повторить попытку ввода другого имени пользователя или пароля (по крайней мере, без повторной загрузки HTML-документа).

Закрытие диалогового окна по кнопке

Думаю вы обратили внимание, что в виджете Dialog есть кнопка «закрыть», отображающаяся в виде крестика в правом верхнем углу диалогового окна:

При клике по ней ожидается закрытие диалогового окна, однако, этого не происходит. Чтобы это исправить вы можете добавить следующий код:

Здесь обрабатывается событие open виджета Dialog, в котором к элементу с классом ui-dialog-titlebar-close (это и есть кнопка) добавляется обработчик события click, где и указывается с помощью метода close, что нужно закрыть окно.