jQuery UI – надстройка над JavaScript-библиотекой jQuery. Она поможет создавать по настоящему интерактивные веб-приложения. Сегодня мы познакомимся с виджетом Dialog.
Виджет Dialog
Dialog – это плавающее окно, которое содержит область заголовка и область информационного наполнения. Окно диалога можно перемещать, изменять его размеры и закрыть, щелкнув по значку ‘x’. Если информационное наполнение превышает максимальную высоту, то автоматически появляется полоса прокрутки.

Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Dialog и видим, что вместе с ним отметился чекбокс UI Core. Работа виджета Dialog зависит от него, поэтому он необходим.
Если Вы хотите, чтобы Ваше диалоговое окно можно было перемещать по странице и изменять его размеры – отметьте дополнительно чекбокс Draggable и чекбокс Resizable. Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив. Можно испытать пример как есть, но интереснее создать свою HTML-страничку, где сначала в разделе HEAD подключить несколько файлов, которые есть в архиве.

<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>

Мы подключили файл стилевого оформления виджета, подключили файл библиотеки jQuery, и в третьем подключенном файле совмещены ядро UI и виджет Dialog (сюда же войдет функциональность draggable и resizable, если Вы отмечали соответствующие чекбоксы).

Если мы захотим поговорить о требованиях к HTML-разметке, которые предъявляет виджет, то окажется, что говорить практически не о чем – Вы можете сделать окно диалога из любого элемента div. Примерно так:

<div id="dialog" title="Диалоговое окно">
  <p>Это окно диалога с заданной по умолчанию функциональностью. Окно диалога можно перемещать, изменять его размеры и закрыть, щелкнув по значку 'x'.</p>
</div>

Все, что находится внутри элемента div становится областью информационного наполнения, а значение атрибута title становится заголовком окна.

За связь виджета Dialog с HTML-разметкой отвечает следующий фрагмент кода:

<script type="text/javascript">
$(function(){
  $("#dialog").dialog();
});
</script>

Поскольку в таком виде виджет использует все настройки по умолчанию, в следующем примере мы попробуем передать ему некоторые настройки:

<script type="text/javascript">
$(function(){
  $("#dialog").dialog({
    position: ["right","top"],
    buttons: {
      "Применить": function() {
        alert("Нажата кнопка Применить");
      },
      "Закрыть": function() {
        $(this).dialog("close");
      }
    }
  });
});
</script>

Мы передали две опции – position и buttons. С помощью опции position мы заставляем диалоговое окно появляться в правом верхнем углу. В опции buttons определили две кнопки – Применить и Закрыть, с каждой из которых связали callback-функцию. При нажатии кнопки Применить будет показано окно предупреждения, а при нажатии кнопки Закрыть, диалоговое окно будет закрыто.

Ниже приведен список доступных опций с описаниями:

autoOpen – по умолчанию эта опция имеет значение true, что означает автоматическое появление диалогового окна при вызове метода dialod. Если установить значение опции в 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.

Следующий шаг – знакомимся с тем, как заставить Dialog реагировать на события. Простой пример:

<script type="text/javascript">
$(function(){
  $("#dialog").dialog({
    position: ["right","center"],
    open: function(event, ui) {
      alert("Произошло событие " + event.type);
    },
    dragStop: function(event, ui) {
      alert("Произошло событие " + event.type);
    }
  });
});
</script>

В примере мы определили опции open и dragStop, значением которых являются callback-функции, вызываемые при наступлении событий открытия диалогового окна и окончания его перемещения. Эти callback-функция могут принимать два аргумента. Первый – объект event, второй аргумент – специальный объект ui, в свойствах которого содержится следующая информация:

ui.position – объект, в свойствах top и left которого содержатся значения положения перемещаемого элемента относительно родительского элемента;
ui.offset – объект, в свойствах top и left которого содержатся значения положения перемещаемого элемента относительно документа;

А теперь пример того, как можно обратиться к свойствам этих объектов:

<script type="text/javascript">
$(function(){
  $("#dialog").dialog({
    dragStop: function(event, ui) {
      alert("ui.offset.top = " + ui.offset.top +
            "\nui.offset.left = " + ui.offset.left +
            "\n\nui.position.top = " + ui.position.top +
            "\nui.position.left = " + ui.position.left);
    }
  });
});
</script>

Таких опций, связанных с событиями в виджете Dialog довольно много и ниже приведен их перечень:

beforeClose – событие dialogbeforeclose наступает, когда Вы пытаетесь закрыть диалоговое окно. Если связанная с этим событием функция вернет false – это предотвратит закрытие диалога.

open – событие dialogopen наступает при открытии диалога.

focus – событие dialogfocus наступает в момент получения фокуса диалоговым окном.

dragStart – событие dragStart наступает в начале перемещения диалогового окна.

drag – событие drag наступает постоянно во время процесса перемещения диалогового окна.

dragStop – событие dragStop наступает в конце перемещения диалогового окна.

resizeStart – событие resizeStart наступает в начале изменения размеров диалогового окна.

resize – событие resize наступает постоянно во время процесса изменения размеров диалогового окна.

resizeStop – событие resizeStop наступает в конце изменения размеров диалогового окна.

close – событие dialogclose наступает, когда диалоговое окно было успешно закрыто.

Нам осталось познакомиться с методами виджета Dialog. Для этого мы добавим в HTML-код с которым экспериментируем, пару ссылок:

<a id="openD" href="#">Открыть диалог</a>
<a id="closeD" href="#">Закрыть диалог</a>

и пример javascript-кода, с помощью которого будем обрабатывать клик по ссылкам и вызывать соответствующие методы:

<script type="text/javascript">
$(function(){
  $("#dialog").dialog({
  	autoOpen: false
  });
  $("#openD").click(function(){
  	$("#dialog").dialog("open");
  });
  $("#closeD").click(function(){
  	$("#dialog").dialog("close");
  });
});
</script>

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

Все возможные методы с описаниями перечислены ниже:

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») открывает диалоговое окно.

Уф! Теперь Вы знаете про Dialog все! Ну или вернее почти все. Мы не рассмотрели только стилевое оформление, но об этом в будущем…

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal