Руководство jQuery

Опубликовано admin - вт, 05/01/2018 - 23:02

[Function] dialog(options)

Плагин создаёт диалоговое окно

Сигнатура

dialog(options) → jQuery

Описание

Диалоговое окно - перемещаемое окно которое содержит заголовок и содержание. Диалоговое окно может перемещаться, изменять размеры и закрываться при нажатии знака 'x' по умолчанию.
Если содержимое диалогового окна превышает максимально допустимый размер, автоматически появляется скроллбар.
Элементы управления расположенные в нижней части диалогового окна и полупрозрачный слой устанавливаются с помощью опций, которые могут быть добавлены.
Вызов $(foo).dialog() запустит диалоговое окно. Если вы хотите открывать диалоговое окно по щелчку, используйте $(foo).dialog('open'), но если диалоговое окно не было прекращено $(foo).dialog() будет вызвано единожды, не после каждого события click.

Пример
Весь код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jquery-ui-1.7.2.custom.css" 
rel="stylesheet" type="text/css"/>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-1.3.2.min.js"></script>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-ui-1.7.2.custom.min.js"></script>  
<script>
  $(document).ready(function(){

	$.ui.dialog.defaults.bgiframe = true;
	$(function() {
		$("#dialog").dialog();
	});


  });
</script>

</head>
<body class="iframe">


<div class="demo">

<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. 
The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding: 20px;">
<p>Sed vel diam id libero <a href="
http://example.com">rutrum convallis</a>.
Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. 
Etiam bibendum, enim faucibus aliquet rhoncus, 
arcu felis ultricies neque, sit amet auctor elit
 eros a lectus.</p>
<form>
	<input value="text input"><br>
	<input type="checkbox">checkbox<br>
	<input type="radio">radio<br>
	<select>
		<option>select</option>
	</select><br><br>
	<textarea>textarea</textarea><br>
</form>
</div><!-- End sample page content -->

</div><!-- End demo -->

<div style="display: none;" class="demo-description">

<p>The basic dialog window is an overlay 
positioned within the viewport and is protected from page content 
(like select elements)
 shining through with an iframe.  
It has a title bar and a content area, and can be moved, 
resized and closed with the 'x' icon by default.</p>

</div><!-- End demo-description -->


</body>
</html>

Параметры

Опции

Опция: autoOpen

Когда опция autoOpen установлена как true, диалоговое окно будет автоматически вызвано. Если false, то диалоговое окно будет скрытым до тех пор, пока не будет использована опция .dialog("open").

"По умолчанию установлено"true

Создать диалоговое окно с опцией autoOpen.

$('.selector').dialog({ autoOpen: false });

Получить или установить опцию autoOpen, после запуска.

//получить опцию
var autoOpen = $('.selector').dialog('option', 'autoOpen');
//установить опцию
$('.selector').dialog('option', 'autoOpen', false);

Опция: bgiframe

Опция определяет, какая кнопка должна отображаться на диалоговом окне. В качестве ключа используется текст, отображаемый на кнопке. Значение представляет функцию, которая, выполняется когда происходит нажатие кнопки. Возвращаемый контекст представлен элементом диалогового окна; если вам необходим доступ к кнопке, она доступна как объект события объекта.

"По умолчанию установлено" false

Создать диалоговое окно с опцией buttons.

$('.selector').dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });

Получить или установить опцию buttons, после запуска.

//получить опцию
var buttons = $('.selector').dialog('option', 'buttons');
//установить опцию
$('.selector').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } });

Опция: closeOnEscape

Опция определяет, должно ли диалоговое окно закрываться, когда оно находится в фокусе, при нажатии клавиши ESC.

"По умолчанию установлено" true

Создать диалоговое окно с опцией closeOnEscape.

$('.selector').dialog({ closeOnEscape: false });

Получить или установить опцию closeOnEscape, после запуска.

//получить опцию
var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape');
//установить опцию
$('.selector').dialog('option', 'closeOnEscape', false);

Опция: dialogClass

Опция позволяет определить css класс диалогового окна из дополнительных тем.

"По умолчанию установлено""

Создать диалоговое окно с опцией dialogClass.

$('.selector').dialog({ dialogClass: 'alert' });

Получить или установить опцию dialogClass, после запуска.

//получить опцию
var dialogClass = $('.selector').dialog('option', 'dialogClass');
//установить опцию
$('.selector').dialog('option', 'dialogClass', 'alert');

Опция: draggable

Если установлено true, диалоговое окно будет способным к перемещению при перетаскивании его заголовка.

"По умолчанию установлено"true

Создать диалоговое окно с опцией draggable.

$('.selector').dialog({ draggable: false });

Получить или установить опцию draggable, после запуска.

//получить опцию
var draggable = $('.selector').dialog('option', 'draggable');
//установить опцию
$('.selector').dialog('option', 'draggable', false);

Опция: height

Высота диалогового окна в пикселях.

"По умолчанию установлено"auto

Создать диалоговое окно с опцией height.

$('.selector').dialog({ height: 530 });

Получить или установить опцию height, после запуска.

//получить опцию
var height = $('.selector').dialog('option', 'height');
//установить опцию
$('.selector').dialog('option', 'height', 530);

Опция: hide

Опция устанавливает эффект, который применяется при закрытии диалогового окна.

"По умолчанию установлено"null

Создать диалоговое окно с опцией hide.

$('.selector').dialog({ hide: 'slide' });

Получить или установить опцию hide, после запуска.

//получить опцию
var hide = $('.selector').dialog('option', 'hide');
//установить опцию
$('.selector').dialog('option', 'hide', 'slide');

Опция: maxHeight

Опция создаёт максимальную высоту, до которой может изменяться диалоговое окно, ширина указывается в пикселях.

"По умолчанию установлено"false

Создать диалоговое окно с опцией maxHeight.

$('.selector').dialog({ maxHeight: 400 });

Получить или установить опцию maxHeight, после запуска.

//получить опцию
var maxHeight = $('.selector').dialog('option', 'maxHeight');
//установить опцию
$('.selector').dialog('option', 'maxHeight', 400);

Опция: maxWidth

Опция создаёт максимальную ширину, до которой может изменяться диалоговое окно, ширина указывается в пикселях.

"По умолчанию установлено"false

Создать диалоговое окно с опцией minHeight.

 
$('.selector').dialog({minHeight: 600 });

Получить или установить опцию minHeight, после запуска.

//получить опцию
var maxWidth = $('.selector').dialog('option', 'maxWidth');
//установить опцию
$('.selector').dialog('option', 'maxWidth', 600);

Опция: minHeight

Опция создаёт минимальную высоту, до которой может изменяться диалоговое окно, ширина указывается в пикселях.

"По умолчанию установлено"150

Создать диалоговое окно с опцией minHeight.

$('.selector').dialog({ minHeight: 300 });

Получить или установить опцию minHeight, после запуска.

//получить опцию
var minHeight = $('.selector').dialog('option', 'minHeight');
//установить опцию
$('.selector').dialog('option', 'minHeight', 300);

Опция: minWidth

Опция создаёт минимальную ширину, до которой может изменяться диалоговое окно, ширина указывается в пикселях.

"По умолчанию установлено"150

Создать диалоговое окно с опцией minWidth.


$('.selector').dialog({ minWidth: 400 });

Получить или установить опцию minWidth, после запуска.

//получить опцию
var minWidth = $('.selector').dialog('option', 'minWidth');
//установить опцию
$('.selector').dialog('option', 'minWidth', 400);

Опция: modal

Если установлено true, вместе с появлением диалогового окна будет отображён слой с определенной тональностью; другие элементы на странице станут неактивными (то есть отсутствует возможность взаимодействия с ними). Данная опция создаёт слой, находящийся под диалоговым окном, но над другими элементами страницы.

"По умолчанию установлено"false

Создать диалоговое окно с опцией modal.

$('.selector').dialog({ modal: true });

Получить или установить опцию modal, после запуска.

//получить опцию
var modal = $('.selector').dialog('option', 'modal');
//установить опцию
$('.selector').dialog('option', 'modal', true);

Опция: position

Определить где диалогове окно должно появится. Допустимые значения: 'center', 'left', 'right', 'top', 'bottom', или массив, содержащий парные координаты (указанные в пикселях для левого и верхнего смещения от окна просмотра) или допустимое строковое выражение (например, ['right','top'] значит правый верхний угол).

"По умолчанию установлено"center

Создать диалоговое окно с опцией position.

$('.selector').dialog({position: 'top' });

Получить или установить опцию resizable, после запуска.

//получить опцию
var position = $('.selector').dialog('option', 'position');
//установить опцию
$('.selector').dialog('option', 'position', 'top');

Опция: resizable

Если указано true, диалоговое окно будет способно изменять размеры.

"По умолчанию установлено" true

Создать диалоговое окно с опцией resizable.

$('.selector').dialog({ resizable: false });

Получить или установить опцию resizable, после запуска.

//получить опцию
var resizable = $('.selector').dialog('option', 'resizable');
//установить опцию
$('.selector').dialog('option', 'resizable', false);

Опция: show

Опция позволяет определить эффект, который применяется, когда диалоговое окно открывается.

"По умолчанию установлено"null

Установить календарь с опцией duration:.

$('.selector').datepicker({ duration: 'slow' });

Получить или установить опцию duration:после запуска.

Создать диалоговое окно с опцией show. 
$('.selector').dialog({ show: 'slide' });
Получить или установить опцию show, после запуска. 
//получить опцию
var show = $('.selector').dialog('option', 'show');
//установить опцию
$('.selector').dialog('option', 'show', 'slide');

Опция: stack

Опция определяет будет ли диалоговое окно на верху стека над другим диалоговым окном. Опция заставляет пердвинуть диалоговое окно перед другим диалоговым окнами, когда они собираются вместе.

"По умолчанию установлено" true

Создать диалоговое окно с опцией stack.

$('.selector').dialog({ stack: false });

Получить или установить опцию stack, после запуска.

//получить опцию
var stack = $('.selector').dialog('option', 'stack');
//установить опцию
$('.selector').dialog('option', 'stack', false);

Опция: title

Указать заголовок диалогового окна. Заголовок может быть также указан в title атрибуте элемента из которого возникает диалоговое окно.

"По умолчанию установлено""

Создать диалоговое окно с опцией title.

$('.selector').dialog({ title: 'Dialog Title' });

Получить или установить опцию title, после запуска.

//получить опцию
var title = $('.selector').dialog('option', 'title');
//установить опцию
$('.selector').dialog('option', 'title', 'Dialog Title');

Опция: width

Ширина диалогового окна в пикселях.

"По умолчанию установлено"300

Создать диалоговое окно с опцией width.

$('.selector').dialog({ width: 460 });

Получить или установить опцию width option, после запуска.

//получить опцию
var width = $('.selector').dialog('option', 'width');
//установить опцию
$('.selector').dialog('option', 'width', 460);

Опция: zIndex

Опция определяет свойство z-index для диалогового окна.

"По умолчанию установлено" 1000

Создать диалоговое окно с опцией zIndex.

$('.selector').dialog({ zIndex: 3999 });

Получить или установить опцию zIndex option, после запуска.

//получить опцию
var zIndex = $('.selector').dialog('option', 'zIndex');
//установить опцию
$('.selector').dialog('option', 'zIndex', 3999);

События

Событие: beforeclose

Данное событие запускается, когда диалоговое окно закрывается. Если обработчик события beforeclose вернёт false, то закрытие предотвращается.

Установить обработчик события beforeclose как инициализирующую опцию.

$('.selector').dialog({
   beforeclose: function(event, ui) { ... }
});

Связать событие beforeclose поссредством: dialogbeforeclose.

$('.selector').bind('dialogbeforeclose', function(event, ui) {
  ...
});

Событие: open

Данное событие возникает, когда диалоговое окно открывается.

Установить обработчик события open как инициализирующую опцию.

$('.selector').dialog({
   open: function(event, ui) { ... }
});

Связать событие open поссредством: dialogopen

$('.selector').bind('dialogopen', function(event, ui) {
  ...
});

Событие: focus

Данное событие возникает, когда диалоговое окно попадает в фокус.

Установить обработчик события focus как инициализирующую опцию.

$('.selector').dialog({
   focus: function(event, ui) { ... }
});

Связать событие focus поссредством: dialogfocus

$('.selector').bind('dialogfocus', function(event, ui) {
  ...
});

Событие: dragStart

Данное событие возникает, когда диалоговое окно начинает перемещаться.

Установить обработчик события dragStart как инициализирующую опцию.

$('.selector').dialog({
   dragStart: function(event, ui) { ... }
});

Связать событие dragStart поссредством: dragStart

$('.selector').bind('dragStart', function(event, ui) {
  ...
});

Событие: drag

Данное событие возникает, когда диалоговое окно перемещается.

Установить обработчик события drag как инициализирующую опцию.

$('.selector').dialog({
   drag: function(event, ui) { ... }
});

Связать событие dragStart поссредством: drag

$('.selector').bind('drag', function(event, ui) {
  ...
});

Событие: dragStop

Событие возникает после того как диалоговое окно переместилось.

Установить обработчик события drag как инициализирующую опцию.

$('.selector').dialog({
   dragStop: function(event, ui) { ... }
});

Связать событие dragStop поссредством: dragStop.


$('.selector').bind('dragStop', function(event, ui) {
  ...
});

Событие: resizeStart

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

Установить обработчик события resizeStart как инициализирующую опцию.

$('.selector').dialog({
   resizeStart: function(event, ui) { ... }
});

Связать событие resizeStart поссредством: resizeStart.

$('.selector').bind('resizeStart', function(event, ui) {
  ...
});

Событие: resize

Данное событие возникает, когда диалоговое окно изменяется в размерах.

Установить обработчик события resizeStart как инициализирующую опцию.

$('.selector').dialog({
   resize: function(event, ui) { ... }
});

Связать событие resizeStart поссредством: resizeStart.

$('.selector').bind('resize', function(event, ui) {
  ...
});

Событие: resizeStop

Данное событие возникает после того, как диалоговое окно изменилось в размерах.

Установить обработчик события resizeStop как инициализирующую опцию.

$('.selector').dialog({
   resizeStop: function(event, ui) { ... }
});

Связать событие resizeStop поссредством: resizeStop.

$('.selector').bind('resizeStop', function(event, ui) {
  ...
});

Событие: close

Данное событие возникает, когда диалоговое окно закрылось.

Установить обработчик события dialogclose как инициализирующую опцию.

$('.selector').dialog({
   close: function(event, ui) { ... }
});

Связать событие dialogclose поссредством dialogclose.



$('.selector').bind('dialogclose', function(event, ui) {
  ...
});

Методы

Метод: destroy

.dialog( 'destroy' )

Удаляет функциональность созданную данным плагином полностью. Что возвращает элемент к его первоначальному состоянию.

Метод: disable

.dialog( 'disable' )

Отключить диалоговое окно.

Метод: enable

.dialog( 'enable' )

Включить диалоговое окно.

Метод: option

.dialog( 'option' , optionName , [value] )

Получить или установить любую опцию календаря. Если нет заданных значений, функция получает опцию.

Метод: moveToTop

.dialog( 'moveToTop' )

Передвигает диалоговое окно вперед в стеке, состоящем из диалоговых окно

Метод: close

.dialog( 'close' )

Закрыть диалогове окно.

Метод: isOpen

.dialog( 'isOpen' )

Вернуть true, если диалоговое окно, в настоящий момент, открыто.

Метод: open

.dialog( 'open' )

Открывает диалоговое окно.

Тема:

Используемая тема jQuery UI

Плагин jQuery UI Dialog использует jQuery UI CSS структуру для придания стиля, включающую цвета и фоновые текстуры. Мы рекомендуем использовать инструмент ThemeRoller для создания и загрузки тем, которые легко встраиваются и поддерживаются. Если нуждается более гдубокий уровень настройки, сущетсвует особый виджет классов ссылающийся на ui.draggable.css лист стилей, который может быть модифицирован. Данный класс подчеркнут жирным ниже.

Образец разметки jQuery UI CSS струтктуры классов

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
      <p>Dialog content goes here.</p>
   </div>
</div>

Примечание: Данный образец разметки создан посредством плагина dialog, это не разметка для того чтобы создать диалоговое окно. Для этого достаточно следующей разметки <div></div>.

Примеры

Добавлено1.2

Версия jQuery 1.3.2 Документ создан 2009-02-21T00:32:39Z

Руководство по jQuery!

Плагины jQuery UI

Эффекты