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

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

<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

Для разминки сделаем "просто окно" - без затей. Для этого нам потребуется всего одна строка html:

<div id="dialog"></div>

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

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

и

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

И получим вот такое чудо - Открыть диалог; Закрыть диалог
Итак, у нас есть окно, безвкусное квадратное и ничем не примечательное... Надо это исправить.
Начнем наверное с изменения заголовка(точнее его добавления), изменения координат появления окна и... ну и режим модальности
для завершения картины.
JS:

$("#dialog").dialog({
title: "Warning!!!",  //тайтл, заголовок окна
position: [725,200],  //месторасположение окна [отступ слева,отступ сверху]
modal: true  //булева переменная если она равно true -  то окно модальное, false -  то нет
});

В параметре position можно так же использовать и такие конструкции:

position: ["left"]
position: ["left", "top"]

Ну вот, окно более-менее приобрело людской вид. Добавим функциональности - кнопками.
JS:

$("#dialog").dialog({
title: "Warning!!!",  //тайтл, заголовок окна
width:450,   //ширина
height: 300,   //высота
modal: true,  //true -  окно модальное, false - нет
buttons: {
"Добавить текст в окно": function() { $("#dialog").text("опа! текст!"); },
"Закрыть": function() { $(this).dialog("close"); }
}
});

Как Вы уже заметили я добавил еще два параметра - width и height, ширина и высота.
Параметры простые, но не факт что Вы про них знали :) Ну вот вроде бы и все из простого. Вот так плавно мы подобрались к событиям...
Приступим, как всегда - JS:

$("#dialog").dialog({
dragStop: function(event, ui) {  //если окно оставили в покое после перетаскивания, то
alert("ui.offset.top = " + ui.offset.top +  // выводим координату "потолка" окна
"\nui.offset.left = " + ui.offset.left);   // выводим координату левой стороны окна
}
});

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

• 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 - наступает, когда диалоговое окно было успешно закрыто.