jQuery UI. Widgets. Dialogs (Окна)

Иногда перед веб-программистом встает задача вывести что-то в окне, будь то уведомление или форма регистрации.
И вот наконец-то появилось простое и функциональное средство! Виджет jQuery UI - Dialog ...
Вообщем не жизнь, а сказка! :)

Если вдруг кто не видел предыдущию статью, то повторюсь:
Скачиваем jqueryui и подключаем все это дело: view source
1
<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
2
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
3
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
view source
1
<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
2
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
3
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
Для разминки сделаем "просто окно" - без затей. Для этого нам потребуется всего одна строка html: view source
1
<div id="dialog"></div>
view source
1
<div id="dialog"></div>
И одна строка яваскрипт кода: view source
1
$("#dialog").dialog({autoOpen: false});
view source
1
$("#dialog").dialog({autoOpen: false});
autoOpen не обязательный параметр, нам он нужен для наглядности (для чего он нужен см. ниже). Открывать и закрывать окно теперь можно соответственно: view source
1
$("#dialog").dialog("open");
view source
1
$("#dialog").dialog("open");
и view source
1
$("#dialog").dialog("close");
view source
1
$("#dialog").dialog("close");
И получим вот такое чудо - Открыть диалог Закрыть диалог


Итак, у нас есть окно, безвкусное квадратное и ничем не примечательное... Надо это исправить.
Начнем наверное с изменения заголовка(точнее его добавления), изменения координат появления окна и... ну и режим модальности
для завершения картины.
JS: view source
1
$("#dialog").dialog({
2
title: "Warning!!!", //тайтл, заголовок окна
3
position: [725, 200], //месторасположение окна [отступ слева, отступ сверху]
4
modal: true //булева переменная если она равно true - то окно модальное, false - то нет
5
});
view source
1
$("#dialog").dialog({
2
title: "Warning!!!", //тайтл, заголовок окна
3
position: [725, 200], //месторасположение окна [отступ слева, отступ сверху]
4
modal: true //булева переменная если она равно true - то окно модальное, false - то нет
5
});
Пример: смотрим

В параметре position можно так же использовать и такие конструкции: view source
1
position: ["left"]
2
position: ["left", "top"]
view source
1
position: ["left"]
2
position: ["left", "top"]

Ну вот, окно более-менее приобрело людской вид. Добавим функциональности - кнопками.
JS: view source
01
$("#dialog").dialog({
02
title: "Warning!!!", //тайтл, заголовок окна
03
width:450, //ширина
04
height: 300, //высота
05
modal: true, //true - окно модальное, false - нет
06
buttons: {
07
"Добавить текст в окно": function() { $("#dialog").text("опа! текст!"); },
08
"Закрыть": function() { $(this).dialog("close"); }
09
}
10
});
view source
01
$("#dialog").dialog({
02
title: "Warning!!!", //тайтл, заголовок окна
03
width:450, //ширина
04
height: 300, //высота
05
modal: true, //true - окно модальное, false - нет
06
buttons: {
07
"Добавить текст в окно": function() { $("#dialog").text("опа! текст!"); },
08
"Закрыть": function() { $(this).dialog("close"); }
09
}
10
});
Пример: смотрим

Как Вы уже заметили я добавил еще два параметра - width и height, ширина и высота.
Параметры простые, но не факт что Вы про них знали :) Ну вот вроде бы и все из простого. Вот так плавно мы подобрались к событиям...
Приступим, как всегда - JS: view source
1
$("#dialog").dialog({
2
dragStop: function(event, ui) { //если окно оставили в покое после перетаскивания, то
3
alert("ui.offset.top = " + ui.offset.top + // выводим координату "потолка" окна
4
"nui.offset.left = " + ui.offset.left); // выводим координату левой стороны окна
5
}
6
});
view source
1
$("#dialog").dialog({
2
dragStop: function(event, ui) { //если окно оставили в покое после перетаскивания, то
3
alert("ui.offset.top = " + ui.offset.top + // выводим координату "потолка" окна
4
"nui.offset.left = " + ui.offset.left); // выводим координату левой стороны окна
5
}
6
});
Это он. Он самый... Пример.

Напоследок самое скучное... Справочный материал по всем опциям, методам и событиям. Пользуйтесь!

Опции:
autoOpen - по умолчанию эта опция имеет значение true, что означает автоматическое появление диалогового окна при вызове метода dialog. Если установить значение опции в false, то диалоговое окно будет находиться в скрытом состоянии и сделать его видимым можно будет с помощью .dialog('open');
bgiframe - по умолчанию – false. Если установить эту опцию в true (потребуется дополнительно подключить плагин bgIframe), будет исправлена проблема в IE6, где элементы select помещаются поверх других элементов независимо от значения z-index. Возможно, в будущих версиях, подключение плагина уже не будет являться обязательным;
buttons - в этой опции передают объект, в котором можно определить кнопки, отображаемые в диалоговом окне, и связать их с callback-функциями;
closeOnEscape - по умолчанию эта опция имеет значение true и диалоговое окно закрывается при нажатии клавиши «Escape». Установив значение false можно запретить это действие;
dialogClass - указанное в этой опции имя класса (или классов) будут применены к диалоговому окну для дополнительного оформления;
draggable - по умолчанию установлено значение true, что дает возможность перемещения диалогового окна. Если установить значение false, перемещение станет невозможным;
height - по умолчанию эта опция принимает значение auto, и высота диалогового окна определяется его содержимым. Можно передать значение высоты диалогового окна в пикселах. Например: height: 300. В этом случае, если содержимое будет превышать установленный размер, появится вертикальная полоса прокрутки;
hide - в этой опции можно определить эффект, который будет использоваться при закрытии диалога. Например: hide: 'slide'. По умолчанию используется значение null, т.е. никаких эффектов не применяется;
maxHeight - максимальная высота, до которой может быть изменен размер диалога, в пикселах;
maxWidth - максимальная ширина, до которой может быть изменен размер диалога, в пикселах;
minHeight - минимальная высота, до которой может быть изменен размер диалога, в пикселах;
minWidth - минимальная ширина, до которой может быть изменен размер диалога, в пикселах;
modal - если установить значение true для этой опции, диалог станет модальным. Т.е. другие элементы на веб-странице будут заблокированы, и пользователь не сможет с ними взаимодействовать. Это будет достигнуто с помощью создания дополнительного слоя, находящегося ниже диалога, но выше остальных элементов веб-страницы;
position - значением этой опции может быть строка или массив, которые определяют начальное положение диалогового окна. Возможные значения: 'center', 'left', 'right', 'top', 'bottom'. Другой вариант - использование этих же значений в массиве. Например [‘right', 'top'] для того, чтобы расположить диалог в правом верхнем углу;
resizable - по умолчанию установлено значение true, что дает возможность изменения размеров диалогового окна. Если установить значение false, то изменение размеров станет невозможным;
show - в этой опции можно определить эффект, который будет использоваться при открытии диалога. Например: show: 'slide'. По умолчанию используется значение null, т.е. никаких эффектов не применяется;
stack - по умолчанию эта опция имеет значение true, что позволяет окну (при использовании нескольких диалоговых окон на одной веб-странице), получившему фокус, быть отображенным поверх остальных окон. Установив эту опцию в false можно отменить такое поведение для выбранного окна;
title - значением опции может быть строка, с помощью которой можно переопределить заголовок окна, заданный в HTML-разметке;
width - начальная ширина диалога, в пикселах. По умолчанию используется значение 300;
zIndex - значение z-index диалогового окна. По умолчанию используется значение 1000.

Методы:
destroy - .dialog("destroy") полностью удаляет всю функциональность виджета Dialog. Возвращает элементы в состояние, предшествующее инициализации;
disable - .dialog ("disable") временно запрещает использование всей функциональности виджета. Вновь разрешить ее использование можно с помощью метода enable;
enable - .dialog ("enable") разрешает использование всей функциональности виджета, если ранее она была запрещена с использованием метода disable;
option - .dialog ("option", optionName, [value]) с помощью этого метода можно получить или установить значение любой опции виджета после инициализации;
close - .dialog ("close") закрывает диалоговое окно;
isOpen - .dialog ("isOpen") метод вернет true, если диалоговое окно уже открыто;
moveToTop - .dialog ("moveToTop") помещает диалоговое окно поверх других диалоговых окон, если их используется два и более;
open - .dialog ("open") открывает диалоговое окно.

События:
beforeClose - наступает, перед закрытием диалогового окна (если связанная с этим событием функция вернет false – это предотвратит закрытие диалога);
open - наступает при открытии диалога;
focus - наступает в момент получения фокуса диалоговым окном;
dragStart - наступает в начале перемещения диалогового окна;
drag - наступает постоянно во время процесса перемещения диалогового окна;
dragStop - наступает в конце перемещения диалогового окна;
resizeStart - наступает в начале изменения размеров диалогового окна;
resize - наступает постоянно во время процесса изменения размеров диалогового окна;
resizeStop - наступает в конце изменения размеров диалогового окна;
close - наступает, когда диалоговое окно было успешно закрыто.