Диалоговый виджет отображает всплывающее окно на странице, загружая его из удалённого источника.
Использование
Диалоговое окно определяется простым включением ключа виджета как атрибута в элемент триггер. Рекомендуется, чтобы элемент триггер был ссылкой или кнопкой, таким образом, если у пользователя в браузере отключён javascript, ему отобразится полнотекстовая версия диалогового окна.
<a href='...' data-ipsDialog data-ipsDialog-url='...'>Вызвать диалоговое окно</a>
Диалоговые окна предлагают специальный функционал для форм, находящихся в этом окне, что позволяем им быть автоматически проверенными и отправлять их с помощью AJAX, если используется помощник форм из IPS4 PHP фреймворка. Смотрите параметры remoteVerify и remoteSubmit ниже.
Получение ссылки на диалоговое окно
Если вам необходимо программно контролировать диалоговое окно, вы можете сделать это сперва получив ссылку на него. Чтобы сделать это, вызовите метод getObj, передав элемент, в котором было создано окно в качестве параметра:
// HTML <div id='elementWithDialog' data-ipsDialog> ... </div> // Javascript var dialog = ips.ui.dialog.getObj( $('#elementWithDialog') );
Возвращённая ссылка на экземпляр окна может быть использована для вызова методов, описанных ниже.
Программное создание диалогового окна
Диалоговые окна могут быть созданы программно контроллерами, вместо создания для отдельных элементов. Для этого вызывается метод create:
var dialog = ips.ui.dialog.create( object options );
Параметр options должен быть объектом, содержащим ключи для параметров, описанных ниже. Этот метод возвращает ссылку на экземпляр диалогового окна, на котором вы можете вызывать методы для контроля диалогового окна, например:
dialog.show();
dialog.hide();
Методы экземпляра
show( boolean initOnly )
Инициализирует и отображает диалоговое окно. Если initOnly имеет значение true, то диалоговое окно инициализируется, но не сразу.
hide()
Скрывает диалоговое окно.
remove( boolean hideFirst )
Удаляет окно из DOM модели. Если hideFirst имеет значение true, то диалоговое окно вызывает hide() и удаляет себя после того, как завершится анимация.
setLoading( boolean loading )
Если loading имеет значение true, показывается пользователю, что что-то загружается (то есть показывается иконка загрузки в окне). Если loading имеет значение false, удаляется статус загрузки. Обратите внимание: этот метод не очищает контент окна. Вызовите instance.updateContent('') вручную, если необходимо.
updateContent( string newContent )
Обновляет контент диалогового окна на новый из newContent. Новые контроллеры/виджеты инициализируются автоматически после обновления.
Параметры
url
(Строка; необязательно)
Если указано, контент диалогового окна будет загружен путём вызова этого URL-адреса, когда диалоговое окно загружено.
content
(Селектор; необязательно)
Если контент окна уже загружен в DOM модель, этот параметр должен указать селектор, который содержит контент.
modal
(Логическое; необязательно; по умолчанию true)
Если значение true, бэкграунд страницы будет затемнённым, не позволяя пользователю взаимодействовать со страницей, пока не закрыто диалоговое окно.
title
(Строка; необязательно)
Задаёт заголовок, который будет отображён в окне. Если не указан, окно будет отображено без заголовка.
size
(Строка; необязательно)
Если указано, будет установлен специальный класс, изменяющий размер размер окна. В настоящее время может принять значения narrow, medium, wide и fullscreen. Если не указан, будет использована стандартная ширина окна, заданная в CSS.
close
(Логический; необязательно; по умолчанию true)
Определяет, должно ли диалоговое окно быть с закрывающей кнопкой.
fixed
(Логический; необязательно; по умолчанию false)
Определяет, будет ли окно фиксировано. Фиксированное диалоговое окно крепится к области просмотру, не к странице. Его высота также будет фиксированной, с прокручиваемым контентом внутри, если необходимо. Если значение параметра равно false, окно будет прокручиваться вместе со страницей, и будет расширяться для включения всего отображаемого контента, независимо от длины.
remoteVerify
(Логический; необязательно; по умолчанию true)
Когда окно содержит какую-либо форму, построенную с использованием помощника форм IPS4 PHP фреймворка, этот параметр указывает окну на автоматическую проверку введённых данных и отображает любые ошибки пользователю.
remoteSubmit
(Логический; необязательно; по умолчанию false)
Когда окно содержит какую-либо форму, построенную с использованием помощника форм IPS4 PHP фреймворка, этот параметр указывает окну на отправку введённых данных с помощью AJAX. Если параметр remoteVerify также имеет значение true, отправляются два отдельных AJAX запроса; первый проверяющий значения формы, и если успешно, форма отправляется вторым запросом.
Если параметр remoteSubmit имеет значение true, после успешной отправки данных формы окно автоматически закрывается. Если существует параметр flashMessage, то будет отображено флэш-сообщение.
По умолчанию remoteSubmit имеет значение false, что означает, что форма будет отправлена обычной перезагрузкой страницы.
callback
(Функция; необязательно)
Задаёт callback-функцию, которая будет выполнена после загрузки в окно удалённого контента. Обратите внимание: этот параметр не может быть предоставлен через данные API, и доступен только при работе с ips.ui.dialog напрямую.
forceReload
(Логический; необязательно; по умолчанию false)
По умолчанию, как только в диалоговое окно загружен контент, он не будет снова загружаться, даже если окно перезапущено. Если установить этому параметру значение true, то окно будет вызывать URL-адрес при каждом открытии. Этот параметр вступает работоспособен только при использовании URL-адреса контента окна.
События, вызванные ips.ui.dialog
openDialog
Срабатывает, когда отображено диалоговое окно.
Данные события:
- elemID - ID элемента, который вызвал окно.
- dialogID - ID элемента окна.
- dialog - Ссылка на элемент окна.
- contentLoaded - Булево значение, указывающее на то, загружен ли контент в окно (может быть false, если используется удалённый контент).
hideDialog
Срабатывает при скрытии окна.
Event data:
- elemID - ID элемента, вызвавшего окно.
- dialogID - ID элемента окна.
- dialog - ссылка на элемент окна.
dialogContentLoaded
Срабатывает при загрузке удалённого контента и встраивании его в окно.
Данные события:
- elemID - ID элемента, вызвавшего окно.
- dialogID - ID элемента окна.
- dialog - ссылка на элемент окна.
- contentLoaded - Булево значение, указывающее на то, загружен ли контент в окно (всегда будет true).
События, на которые реагирует ips.ui.dialog
closeDialog
Закрывает окно.
Данные события:
- dialogID (обязательный) - идентификатор диалогового окна, которое необходимо закрыть (событие игнорируется, если ID не соответствует ID текущего окна).