Диалоговое окно UI

Материал из JQuery

Перейти к: навигация, поиск

Dialog


Описание
Свойства
Методы
События
Оформление

Плагин Dialog позволяет превращать блочные элементы (обычно div'ы) в всплывающие в центре экрана диалоговые окна. Их можно перетаскивать и растягивать, каждое такое окошко состоит из заголовка и содержимого и может быть закрыто нажатием на иконку "x" в заголовке.

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


Вызов

$("#elementId").dialog();

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

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

для открытия окна используйте

$("#elementId").dialog('open');

а для закрытия

$("#elementId").dialog('close');


↓ Имя свойства :типы значений (значение по умолчанию)
disabled:boolean(false)
Останавливает\возобновляет работу плагина Dialog на выбранных элементах.
// ------- Работа со свойством disabled ---------
// в момент установки dialog на элемент
$("selector").dialog({ disabled: true });
 
//получение значения disabled 
var disabled = $("selector").dialog( "option", "disabled" );
//изменение значения disabled
$("selector").dialog( "option", "disabled", true );
autoOpen:boolean(true)
Если это свойство равно true, то диалоговое окно будет автоматически открыто при установке плагина Dialog на элемент. В случае false, диалоговое окно не будет открыто до тех пор, пока не будет вызвано .dialog("open").
// ------- Работа со свойством autoOpen ---------
// в момент установки dialog на элемент
$("selector").dialog({ autoOpen: false });
 
//получение значения autoOpen
var autoOpen = $("selector").dialog( "option", "autoOpen" );
//изменение значения autoOpen
$("selector").dialog( "option", "autoOpen", false );
В этом свойстве можно задать кнопки для диалогового окна (они будут расположены внизу окна), а так же обработчики нажатия на них (см. пример "Модальное подтверждение" выше). Существует два возможных формата для того, чтобы задать buttons:
// с помощью объекта:
{ 
  "Имя кнопки": function(e){ //обработка нажатия кнопки },
  "Имя другой кнопки": function(e){ //обработка нажатия },
  ...
}
 
// еще можно задать buttons с помощью массива объектов:
[
  {
    text: "Имя кнопки",
    click: function(e){ //обработка нажатия }
  },
  {
    text: "Имя следующей кнопки",
    click: function(e){ //обработка нажатия }
  }
]

В обработчиках нажатия, переменная this будет содержать элемент, представляющий диалоговое окно. Если вам нужен элемент нажатой кнопки, то он будет доступен в свойстве target объекта события (который обработчик будет получать в качестве первого параметра).

// ------- Работа со свойством buttons ---------
// в момент установки dialog на элемент
$("selector").dialog({ buttons: {"Ok":okCliked} });
 
//получение значения buttons
var buttons = $("selector").dialog( "option", "buttons" );
//изменение значения buttons
$("selector").dialog( "option", "buttons", {"Ok":okCliked} );
closeOnEscape:boolean(true)
Это свойство определяет, будет ли закрываться диалоговое окно при нажатии клавиши Escape.
// ------- Работа со свойством closeOnEscape ---------
// в момент установки dialog на элемент
$("selector").dialog({ closeOnEscape: false });
 
//получение значения closeOnEscape
var closeOnEscape = $("selector").dialog( "option", "closeOnEscape" );
//изменение значения closeOnEscape
$("selector").dialog( "option", "closeOnEscape", false );
closeText:string("close")
Это свойство определяет текст для кнопки закрытия диалогового окна. В большинстве доступных тем оформления, этот текст не виден, поскольку вместо него используется иконка крестика (x).
// ------- Работа со свойством closeText ---------
// в момент установки dialog на элемент
$("selector").dialog({ closeText: "Закрыть" });
 
//получение значения closeText
var closeText = $("selector").dialog( "option", "closeText" );
//изменение значения closeText
$("selector").dialog( "option", "closeText", "Закрыть" );
dialogClass:string("")
Дополнительное имя класса, который будет добавлен элементу диалогового окна (может понадобиться для особого визуального оформления).
// ------- Работа со свойством dialogClass ---------
// в момент установки dialog на элемент
$("selector").dialog({ dialogClass: "alert" });
 
//получение значения dialogClass
var dialogClass = $("selector").dialog( "option", "dialogClass" );
//изменение значения dialogClass
$("selector").dialog( "option", "dialogClass", "alert" );
draggable:string(true)
Эта настройка определяет, будет ли диалоговое окно перетаскиваемым.
// ------- Работа со свойством draggable ---------
// в момент установки dialog на элемент
$("selector").dialog({ draggable: false });
 
//получение значения draggable
var draggable = $("selector").dialog( "option", "draggable" );
//изменение значения draggable
$("selector").dialog( "option", "draggable", false );
height:integer,"auto"("auto")
Определяет высоту диалогового окна (в пикселях). Если это свойство равно "auto", то окно будет подстраиваться под нужную высоту самостоятельно.
// ------- Работа со свойством height ---------
// в момент установки dialog на элемент
$("selector").dialog({ height: 530 });
 
//получение значения height
var height = $("selector").dialog( "option", "height" );
//изменение значения height
$("selector").dialog( "option", "height", 530 );
hide:string(null)
Определяет эффект, который будет использоваться для скрытия диалогового окна (см. пример "Анимация" выше). Для определения эффекта, который будет использоваться при всплытии окна используйте свойство show.
// ------- Работа со свойством hide ---------
// в момент установки dialog на элемент
$("selector").dialog({ hide: 'slide' });
 
//получение значения hide
var hide = $("selector").dialog( "option", "hide" );
//изменение значения hide
$("selector").dialog( "option", "hide", 'slide' );
maxHeight:integer,false(false)
Это свойство определяет максимальную высоту (в пикселях), которую может принять диалоговое окно при растягивании.
// ------- Работа со свойством maxHeight ---------
// в момент установки dialog на элемент
$("selector").dialog({ maxHeight: 700 });
 
//получение значения maxHeight
var maxHeight = $("selector").dialog( "option", "maxHeight" );
//изменение значения maxHeight
$("selector").dialog( "option", "maxHeight", 700 );
maxWidth:integer,false(false)
Это свойство определяет максимальную ширину (в пикселях), которую может принять диалоговое окно при растягивании.
// ------- Работа со свойством maxWidth ---------
// в момент установки dialog на элемент
$("selector").dialog({ maxWidth: 700 });
 
//получение значения maxWidth
var maxWidth = $("selector").dialog( "option", "maxWidth" );
//изменение значения maxWidth
$("selector").dialog( "option", "maxWidth", 700 );
minHeight:integer,false(150)
Это свойство определяет минимальную высоту (в пикселях), которую может принять диалоговое окно при растягивании.
// ------- Работа со свойством minHeight ---------
// в момент установки dialog на элемент
$("selector").dialog({ minHeight: 300 });
 
//получение значения minHeight
var minHeight = $("selector").dialog( "option", "minHeight" );
//изменение значения minHeight
$("selector").dialog( "option", "minHeight", 300 );
minWidth:integer,false(150)
Это свойство определяет минимальную ширину (в пикселях), которую может принять диалоговое окно при растягивании.
// ------- Работа со свойством minWidth ---------
// в момент установки dialog на элемент
$("selector").dialog({ minWidth: 300 });
 
//получение значения minWidth
var minWidth = $("selector").dialog( "option", "minWidth" );
//изменение значения minWidth
$("selector").dialog( "option", "minWidth", 300 );
modal:boolean(false)
С помощью свойства modal можно сделать окно модальным. Это означает, что доступ ко всему содержимому сайта, кроме этого окна будет заблокирован за счет добавления полупрозрачного перекрывающего всю страницу слоя (см. пример "Модальное окно" выше).
// ------- Работа со свойством modal ---------
// в момент установки dialog на элемент
$("selector").dialog({ modal: true });
 
//получение значения modal
var modal = $("selector").dialog( "option", "modal" );
//изменение значения modal
$("selector").dialog( "option", "modal", true );
position:string,array('center')
Определяет позицию диалогового окна при его появлении. Есть три варианта задать это свойство:
  • Одним строковым значением из числа следующих: 'center', 'left', 'right', 'top', 'bottom'.
  • Массивом с координатами [x, y]. Например [300, 200] (смещение на 300 пикселей влево и 200 вниз, относительно левого верхнего угла экрана).
  • Массивом со строковыми значениями, например ['right', 'top'] (диалоговое окно появится в правом верхнем углу экрана).
// ------- Работа со свойством position ---------
// в момент установки dialog на элемент
$("selector").dialog({ position: 'top' });
 
//получение значения position
var position = $("selector").dialog( "option", "position" );
//изменение значения position
$("selector").dialog( "option", "position", 'top' );
resizable:boolean(true)
Определяет, будет ли диалоговое окно растягиваемым.
// ------- Работа со свойством resizable ---------
// в момент установки dialog на элемент
$("selector").dialog({ resizable: false });
 
//получение значения resizable
var resizable = $("selector").dialog( "option", "resizable" );
//изменение значения resizable
$("selector").dialog( "option", "resizable", false );
show:string(null)
Определяет эффект, который будет использоваться появлении диалогового окна (см. пример "Анимация" выше). Для определения эффекта, который будет использоваться для скрытия окна используйте свойство hide.
// ------- Работа со свойством show ---------
// в момент установки dialog на элемент
$("selector").dialog({ show: 'slide' });
 
//получение значения show
var show = $("selector").dialog( "option", "show" );
//изменение значения show
$("selector").dialog( "option", "show", 'slide' );
stack:boolean(true)
Если одновременно будут открыты несколько диалоговых окон, последнее окно всегда будет поверх остальных. Однако если свойство stack установлено в true, то в момент перемещения нижележащего диалогового окна, оно автоматически будет оказываться поверх остальных.
// ------- Работа со свойством stack ---------
// в момент установки dialog на элемент
$("selector").dialog({ stack: false });
 
//получение значения stack
var stack = $("selector").dialog( "option", "stack" );
//изменение значения stack
$("selector").dialog( "option", "stack", false );
title:string("")
Определяет текст заголовка диалогового окна. Если этот параметр равен пустой строке, то для заголовка будет взято значения атрибута title, у элемента, из которого было сделано диалоговое окно.
// ------- Работа со свойством title ---------
// в момент установки dialog на элемент
$("selector").dialog({ title: 'Сообщение' });
 
//получение значения title
var title = $("selector").dialog( "option", "title" );
//изменение значения title
$("selector").dialog( "option", "title", 'Сообщение' );
width:integer,"auto"(300)
Определяет ширину диалогового окна (в пикселях). Если это свойство равно "auto", то окно будет занимать всю ширину экрана.
// ------- Работа со свойством width ---------
// в момент установки dialog на элемент
$("selector").dialog({ width: 530 });
 
//получение значения width
var width = $("selector").dialog( "option", "width" );
//изменение значения width
$("selector").dialog( "option", "width", 530 );
zIndex:integer(1000)
Определяет значения css-свойства z-index. См. свойство stack, чтобы узнать об автоматическом z-index.
// ------- Работа со свойством zIndex ---------
// в момент установки dialog на элемент
$("selector").dialog({ zIndex: 1500 });
 
//получение значения zIndex
var zIndex = $("selector").dialog( "option", "zIndex" );
//изменение значения zIndex
$("selector").dialog( "option", "zIndex", 1500 );

↓ Способ вызова
.dialog("destroy") 
Удаляет всю функциональность плагина dialog с выбранных элементов.
.dialog("disable") 
Останавливает работу плагина dialog на выбранных элементах. Для возобновления, необходимо воспользоваться методом .dialog("enable").
.dialog("enable") 
Возобновляет работу плагина dialog на выбранных элементах (например, после того, как она была остановлена с помощью .dialog("disable")).
.dialog("option", optionName, [value]) 
Этот метод позволяет изменять/получать свойства плагина dialog. Если необходимо изменить сразу несколько свойств, воспользуйтесь следующей формой этой функции — .dialog("option", options), где options это объект в формате {optionName1:value1, optionName2:value2, ...}.
.dialog("widget") 
Возвращает те из выбранных элементов, к которым был применен плагин dialog (поиск осуществляется по классу ui-dialog, который автоматически присваивается этим элементам).
.dialog("close") 
Закрывает диалоговое окно, если оно открыто.
.dialog("isOpen") 
Проверяет открыто ли диалоговое окно. Возвращает true если оно открыто и false иначе.
.dialog("moveToTop") 
Изменяет z-index диалогового окна так, чтобы он оказался поверх остальных открытых диалоговых окон.
.dialog("open") 
Открывает диалоговое окно, если оно закрыто.

↓ Внутреннее имя события :внешнее имя
create:dialogcreate
Событие create происходит в момент инициализации dialog на элементе.
// обработка события create
$("selector").dialog({
   create: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "dialogcreate", function(event, ui){ ... });
beforeClose:dialogbeforeclose
Это событие происходит, непосредственно перед закрытием диалогового окна. Если его обработчик вернет false, то закрытия окна не произойдет.
// обработка события beforeClose
$("selector").dialog({
   beforeClose: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "dialogbeforeclose", function(event, ui){ ... });
open:dialogopen
Это событие происходит в момент открытия диалогового окна.
// обработка события open
$("selector").dialog({
   open: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "dialogopen", function(event, ui){ ... });
focus:dialogfocus
Это событие происходит, когда диалоговое окно приобретает фокус.
// обработка события focus
$("selector").dialog({
   focus: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "dialogfocus", function(event, ui){ ... });
dragStart:dialogdragstart
Это событие происходит в момент, когда диалоговое окно начинают перетаскивать.
// обработка события dragStart
$("selector").dialog({
   dragStart: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "dialogdragstart", function(event, ui){ ... });
drag:dialogdrag
Это событие происходит при каждом движении перетаскивания диалогового окна.
// обработка события drag
$("selector").dialog({
   drag: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "dialogdrag", function(event, ui){ ... });
dragStop:dialogdragstop
Это событие происходит в момент завершения перетаскивания диалогового окна (а именно, в момент, когда кнопка мыши будет отпущена).
// обработка события dragStop
$("selector").dialog({
   dragStop: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "dialogdragstop", function(event, ui){ ... });
resizeStart:dialogresizestart
Это событие происходит в момент, когда диалоговое окно начинают растягивать.
// обработка события resizeStart
$("selector").dialog({
   resizeStart: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "dialogresizestart", function(event, ui){ ... });
resize:dialogresize
Это событие происходит при каждом движении растягивания диалогового окна.
// обработка события resize
$("selector").dialog({
   resize: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "dialogresize", function(event, ui){ ... });
resize:dialogresize
Это событие происходит при каждом движении растягивания диалогового окна.
// обработка события resize
$("selector").dialog({
   resize: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "dialogresize", function(event, ui){ ... });
resizeStop:dialogresizestop
Это событие происходит в момент завершения растягивания диалогового окна (а именно, в момент, когда кнопка мыши будет отпущена).
// обработка события resizeStop
$("selector").dialog({
   resizeStop: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "dialogdragstop", function(event, ui){ ... });
close:dialogclose
Это событие происходит в момент закрытия диалогового окна.
// обработка события close
$("selector").dialog({
   close: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "dialogclose", function(event, ui){ ... });

Плагин Dialog использует стандартные стили jQueryUI-css для оформления диалоговых окон. Для редактирования оформления рекомендуется использовать специальную ручную настройку на сайте jQuery UI. Для специфичных манипуляций диалоговыми окнами, можно воспользоваться информацией о его структуре: