Панель Управления


Видеокурс: "Javascript+jQuery для начинающих в видеоформате" Проверка времени и определение часового пояса рабочей станции. RU-CENTER. Центр регистрации доменов зоны .RU Сейчас выгодная возможность зарегистрировать домен .РФ в RU-CENTER Информационная безопасность Система интернет-расчетов RUpay Графический редактор ГИМП (GIMP) Зинаида Лукьянова. Видеокурс Фотошоп с нуля. Евгений Попов. Видеокурс HTML + PHP + MySQL. Весь Софт Софтодром "Электрошоп". Поиск электронных товаров. Джава. Ява. Java. Дмитрий Котеров, Алексей Костарев. PHP-5. Наиболее полное руководство. 2-е издание.



Элемент Диалог (Dialog) плагина UI библиотеки jQuery.
Плагин UI версии 1.9.2 библиотеки jQuery версии 1.8.3 Сделано в kocby.ru Элемент Диалог (Dialog) плагина UI библиотеки jQuery. Диалог - это есть плавающее окно (window), которое содержит полосу с заголовком (title bar) и область контента (content area). Окно диалога можно двигать, менять его размер и закрывать с помощью иконки 'x' по умолчанию. Если длина контента превысит максимальную высоту, автоматически появится полоса прокрутки (scrollbar). Могут быть добавлены дополнительные общие опции: нижняя полоса с кнопками, полупрозрачный модальный оверлей.
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru
Dialog :: Диалог
Описание: Open content in an interactive overlay.
Description: Открывает контент в интерактивном оверлее.

Пример странички Диалог дефолтный (Default functionality):
можно посмотреть здесь.

Пример странички Диалог Анимированный (Animated dialog):
можно посмотреть здесь.

Пример странички Диалог Модальный (Modal dialog):
можно посмотреть здесь.

Пример странички Диалог Сообщение модальное (Modal message):
можно посмотреть здесь.

Пример странички Диалог Подтверждение модальное (Modal confirmation):
можно посмотреть здесь.

Пример странички Диалог Форма модальная (Modal form):
можно посмотреть здесь.




Теория

Тесты по теории можно посмотреть здесь.




Options (Опции)



autoOpen
Type: Boolean
Default: true

If set to true, the dialog will automatically open upon initialization. If false, the dialog will stay hidden until the open() method is called.
Если опция установлена на значение true (истина), Диалог автоматически открывается при инициализации. Если false (ложь), Диалог будет скрыт до тех пор, пока не будет вызван метод open() (открыть).

Code examples: (Примеры кода: )
Initialize the dialog with the autoOpen option specified:
Инициализация Диалога с определенной опцией autoOpen:

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


Get or set the autoOpen option, after initialization::
Можно получить или установить опцию autoOpen после инициализации:

// getter
var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );
 
// setter
$( ".selector" ).dialog( "option", "autoOpen", false );



buttons
Type: Object or Array
Default: {}

Specifies which buttons should be displayed on the dialog. The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object.
Определяет, какие кнопки будут установлены для диалога. Функция обратного вызова выступает в контексте элемента диалога; если вам требуется доступ к кнопке, это возможно как цель объекта события.

Multiple types supported:
• Object: The keys are the button labels and the values are the callbacks for when the associated button is clicked.
• Array: Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button.

Поддерживаются множественные типы:
• Object (Объект): Ключи - лейблы кнопок, значения - функции обратного вызова (колбаки), связанные с кликнутой кнопкой.
• Array (Массив): Каждый элемент массива должен быть объектом, определяющии аттрибуты, свойства и события агентов для установок кнопки.

Code examples: (Примеры кода: )
Initialize the dialog with the buttons option specified:
Инициализация Диалога с определенной опцией buttons:

$( ".selector" ).dialog({ buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } ] });


Get or set the buttons option, after initialization::
Можно получить или установить опцию buttons после инициализации:

// getter
var buttons = $( ".selector" ).dialog( "option", "buttons" );
 
// setter
$( ".selector" ).dialog( "option", "buttons", [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } ] );



closeOnEscape
Type: Boolean
Default: true

Specifies whether the dialog should close when it has focus and the user presses the esacpe (ESC) key.
Определяет должен ли диалог быть закрыт, когда он в фокусе и пользователь нажимает клавишу эскейп - выход (ESC).

Code examples: (Примеры кода: )
Initialize the dialog with the closeOnEscape option specified:
Инициализация Диалога с определенной опцией closeOnEscape:

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


Get or set the closeOnEscape option, after initialization::
Можно получить или установить опцию closeOnEscape после инициализации:

// getter
var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" );
 
// setter
$( ".selector" ).dialog( "option", "closeOnEscape", false );



closeText
Type: String
Default: "close"

Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme.
Определяет текст на кнопке close (закрыть). Обратите внимание, что этот текст спрятан, когда используется стандартная тема.

Code examples: (Примеры кода: )
Initialize the dialog with the closeText option specified:
Инициализация Диалога с определенной опцией closeText:

$( ".selector" ).dialog({ closeText: "hide" });


Get or set the closeText option, after initialization:
Можно получить или установить опцию closeText после инициализации:

// getter
var closeText = $( ".selector" ).dialog( "option", "closeText" );
 
// setter
$( ".selector" ).dialog( "option", "closeText", "hide" );



dialogClass
Type: String
Default: ""

The specified class name(s) will be added to the dialog, for additional theming.
Определенные имена классов, которые будут добавлены к диалогу для дополнительного развития темы.

Code examples: (Примеры кода: )
Initialize the dialog with the dialogClass option specified:
Инициализация Диалога с определенной опцией dialogClass:

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


Get or set the dialogClass option, after initialization:
Можно получить или установить опцию dialogClass после инициализации:

// getter
var dialogClass = $( ".selector" ).dialog( "option", "dialogClass" );
 
// setter
$( ".selector" ).dialog( "option", "dialogClass", "alert" );



disabled
Type: Boolean
Default: false

Disables the dialog if set to true.
Выключает диалог, если опция установлена на значение true (истина).

Code examples: (Примеры кода: )
Initialize the dialog with the disabled option specified:
Инициализация Диалога с определенной опцией disabled:

$( ".selector" ).dialog({ disabled: true });


Get or set the disabled option, after initialization:
Можно получить или установить опцию disabled после инициализации:

// getter
var disabled = $( ".selector" ).dialog( "option", "disabled" );
 
// setter
$( ".selector" ).dialog( "option", "disabled", true );



draggable
Type: Boolean
Default: true

If set to true, the dialog will be draggable by the title bar. Requires the jQuery UI Draggable widget to be included.
Если опция установлена на значение true (истина), Диалог можно двигать, ухватив за область заголовка. Требуется, чтобы был подключен виджет Draggable (перетаскиваемый) библиотеки jQuery UI.

Code examples: (Примеры кода: )
Initialize the dialog with the draggable option specified:
Инициализация Диалога с определенной опцией draggable:

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


Get or set the draggable option, after initialization:
Можно получить или установить опцию draggable после инициализации:

// getter
var draggable = $( ".selector" ).dialog( "option", "draggable" );
 
// setter
$( ".selector" ).dialog( "option", "draggable", false );



height
Type: Number or String
Default: "auto"

The height of the dialog.
Высота диалога.

Multiple types supported:
• Number: The height in pixels.
• String: The only supported string value is "auto" which will allow the dialog height to adjust based on its content.


Поддерживаются множественные типы:
• Number (Число): Высота в пикселях.
• String (Строка): Единственное поддерживаемое значение это "auto" (автоматическое определение высоты), которое позволит высоте диалога соответствовать его контенту.

Code examples: (Примеры кода: )
Initialize the dialog with the height option specified:
Инициализация Диалога с определенной опцией height:

$( ".selector" ).dialog({ height: 400 });


Get or set the height option, after initialization:
Можно получить или установить опцию height после инициализации:

// getter
var height = $( ".selector" ).dialog( "option", "height" );
 
// setter
$( ".selector" ).dialog( "option", "height", 400 );



hide
Type: Number or String or Object
Default: null

If and how to animate the hiding of the dialog.
Анимировать ли и как именно анимировать исчезновение диалога.

Multiple types supported:
• Number: The dialog will fade out while animating the height and width for the specified duration.
• String: The dialog will be hidden using the specified jQuery UI effect. See the list of effects for possible values.
• Object: If the value is an object, then effect, duration, and easing properties may be provided. The effect property must be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If duration or easing is omitted, then the default values will be used.

Поддерживаются множественные типы:
• Number (Число): Диалог будет постепенно исчезать пока анимированы высота и ширина в течение заданной продолжительности.
• String (Строка): Диалог будет спрятан с использованием определенного эффекта jQuery UI. См лист эффектов как возможных значений этого типа.
• Object (Объект): Если значение имеет тип объект, можно определить значения аттрибутов эффекта, продолжительности и изинга. Аттрибут эффекта должен иметь имя эффекта jQuery UI. Когда используется эффект jQuery UI с поддержкой дополнительных сеттингов, можно включить эти сеттинги в объект и они будут переданы эффекту. Если значения продолжительности и изинга не заданы, будут использованы дефолтные значения.

Code examples: (Примеры кода: )
Initialize the dialog with the hide option specified:
Инициализация Диалога с определенной опцией hide:

$( ".selector" ).dialog({ hide: "explode" });


Get or set the hide option, after initialization:
Можно получить или установить опцию hide после инициализации:

// getter
var hide = $( ".selector" ).dialog( "option", "hide" );
 
// setter
$( ".selector" ).dialog( "option", "hide", "explode" );



maxHeight
Type: Number
Default: false

The maximum height to which the dialog can be resized, in pixels.
Максимальный размер высоты в пикселях, до которой он может быть изменен.

Code examples: (Примеры кода: )
Initialize the dialog with the maxHeight option specified:
Инициализация Диалога с определенной опцией maxHeight:

$( ".selector" ).dialog({ maxHeight: 600 });


Get or set the maxHeight option, after initialization:
Можно получить или установить опцию maxHeight после инициализации:

// getter
var maxHeight = $( ".selector" ).dialog( "option", "maxHeight" );
 
// setter
$( ".selector" ).dialog( "option", "maxHeight", 600 );



maxWidth
Type: Number
Default: false

The maximum width to which the dialog can be resized, in pixels.
Максимальный размер ширины в пикселях, до которой он может быть изменен.

Code examples: (Примеры кода: )
Initialize the dialog with the maxWidth option specified:
Инициализация Диалога с определенной опцией maxWidth:

$( ".selector" ).dialog({ maxWidth: 600 });


Get or set the maxWidth option, after initialization:
Можно получить или установить опцию maxWidth после инициализации:

// getter
var maxWidth = $( ".selector" ).dialog( "option", "maxWidth" );
 
// setter
$( ".selector" ).dialog( "option", "maxWidth", 600 );



minHeight
Type: Number
Default: 150

The minimum height to which the dialog can be resized, in pixels.
Минимальный размер высоты в пикселях, до которой он может быть изменен.

Code examples: (Примеры кода: )
Initialize the dialog with the minHeight option specified:
Инициализация Диалога с определенной опцией minHeight:

$( ".selector" ).dialog({ minHeight: 200 });


Get or set the minHeight option, after initialization:
Можно получить или установить опцию minHeight после инициализации:

// getter
var minHeight = $( ".selector" ).dialog( "option", "minHeight" );
 
// setter
$( ".selector" ).dialog( "option", "minHeight", 200 );



minWidth
Type: Number
Default: 150

The maximum width to which the dialog can be resized, in pixels.
Минимальный размер ширины в пикселях, до которой он может быть изменен.

Code examples: (Примеры кода: )
Initialize the dialog with the minWidth option specified:
Инициализация Диалога с определенной опцией minWidth:

$( ".selector" ).dialog({ minWidth: 200 });


Get or set the minWidth option, after initialization:
Можно получить или установить опцию minWidth после инициализации:

// getter
var minWidth = $( ".selector" ).dialog( "option", "minWidth" );
 
// setter
$( ".selector" ).dialog( "option", "minWidth", 200 );



modal
Type: Boolean
Default: false

If set to true, the dialog will have modal behavior; other items on the page will be disabled, i.e., cannot be interacted with. Modal dialogs create an overlay below the dialog but above other page elements.
Если опция установлена на значение true (истина), Диалог будет иметь модальный характер; другие элементы на страничке будут выключены, т.е. будет невозможна работа с ними. Модальные диалоги создают оверлеи ниже диалога, но выше других элементов страницы.

Code examples: (Примеры кода: )
Initialize the dialog with the modal option specified:
Инициализация Диалога с определенной опцией modal:

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


Get or set the modal option, after initialization:
Можно получить или установить опцию modal после инициализации:

// getter
var modal = $( ".selector" ).dialog( "option", "modal" );
 
// setter
$( ".selector" ).dialog( "option", "modal", true );



position
Type: Object or String or Array
Default: { my: "center", at: "center", of: window }

Specifies where the dialog should be displayed. The dialog will handle collisions such that as much of the dialog is visible as possible.
Определяет, где диалог должен быть показан. Диалог будет обрабатывать коллизии, такие как, например, видимость диалога не более максимально возможной и пр.

Multiple types supported:
• Object: Identifies the position of the dialog when opened. The of option defaults to the window, but you can specify another element to position against. You can refer to the jQuery UI Position utility for more details about the various options.
• String: A string representing the position within the viewport. Possible values: "center", "left", "right", "top", "bottom".
• Array: An array containing an x, y coordinate pair in pixel offset from the top left corner of the viewport or the name of a possible string value.

Поддерживаются множественные типы:
• Object (Объект): Определяет позицию диалога при открытии. Опция of (относительно чего) по умолчанию относится к окну (window), но можно определить и другой элемент, относительно чего будет позиционироваться диалог. Вы можете обратиться к утилите позиционирования (jQuery UI Position utility) для получения дополнительной информации о разных опциях.
• String (Строка): Строка представляет позицию внутри области просмотра. Возможные значениня: "center" (центр), "left" (лево), "right" (право), "top" (верх), "bottom" (низ).
• Array (Массив): Массив содержит пару коордмнат x, y в пикселях - смещение от левого верхнего угла в области просмотра или имя строки с возможным значением.

Code examples: (Примеры кода: )
Initialize the dialog with the position option specified:
Инициализация Диалога с определенной опцией position:

$( ".selector" ).dialog({ position: { my: "left top", at: "left bottom", of: button } });


Get or set the position option, after initialization:
Можно получить или установить опцию position после инициализации:

// getter
var position = $( ".selector" ).dialog( "option", "position" );
 
// setter
$( ".selector" ).dialog( "option", "position", { my: "left top", at: "left bottom", of: button } );



resizable
Type: Boolean
Default: true

If set to true, the dialog will be resizable. Requires the jQuery UI Resizable widget to be included.
Если опция установлена на значение true (истина), Диалог может изменять свои размеры. Требует, чтобы был подключен виджет Размероизменчивый (jQuery UI Resizable).

Code examples: (Примеры кода: )
Initialize the dialog with the resizable option specified:
Инициализация Диалога с определенной опцией resizable:

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


Get or set the resizable option, after initialization:
Можно получить или установить опцию resizable после инициализации:

// getter
var resizable = $( ".selector" ).dialog( "option", "resizable" );
 
// setter
$( ".selector" ).dialog( "option", "resizable", false );



show
Type: Number or String or Object
Default: null

If and how to animate the showing of the dialog.
Анимировать ли и как именно анимировать показ диалога.

Multiple types supported:
• Number: The dialog will fade in while animating the height and width for the specified duration.
• String: The dialog will be shown using the specified jQuery UI effect. See the list of effects for possible values.
• Object: If the value is an object, then effect, duration, and easing properties may be provided. The effect property must be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If duration or easing is omitted, then the default values will be used.

Поддерживаются множественные типы:
• Number (Число): Диалог будет постепенно показываться пока анимированы высота и ширина в течение заданной продолжительности.
• String (Строка): Диалог будет показан с использованием определенного эффекта jQuery UI. См лист эффектов как возможных значений этого типа.
• Object (Объект): Если значение имеет тип объект, можно определить значения аттрибутов эффекта, продолжительности и изинга. Аттрибут эффекта должен иметь имя эффекта jQuery UI. Когда используется эффект jQuery UI с поддержкой дополнительных сеттингов, можно включить эти сеттинги в объект и они будут переданы эффекту. Если значения продолжительности и изинга не заданы, будут использованы дефолтные значения.

Code examples: (Примеры кода: )
Initialize the dialog with the show option specified:
Инициализация Диалога с определенной опцией show:

$( ".selector" ).dialog({ show: "slow" });


Get or set the show option, after initialization:
Можно получить или установить опцию show после инициализации:

// getter
var show = $( ".selector" ).dialog( "option", "show" );
 
// setter
$( ".selector" ).dialog( "option", "show", "slow" );



stack
Type: Boolean
Default: true

Specifies whether the dialog will stack on top of other dialogs. This will cause the dialog to move to the front of other dialogs when it gains focus.
Определяет, будет ли Диалог располагаться поверх других диалогов. Это вызывает движение диалога на верх других диалогов, когда он получает фокус.

Code examples: (Примеры кода: )
Initialize the dialog with the stack option specified:
Инициализация Диалога с определенной опцией stack:

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


Get or set the stack option, after initialization:
Можно получить или установить опцию stack после инициализации:

// getter
var stack = $( ".selector" ).dialog( "option", "stack" );
 
// setter
$( ".selector" ).dialog( "option", "stack", false );



title
Type: String
Default: ""

Specifies the title of the dialog. Any valid HTML may be set as the title. The title can also be specified by the title attribute on the dialog source element.
Определяет заголовок Диалога. Любой валидный код HTML можно использовать для заголовка. Заголовок также можно определить путем установки аттрибута title (заголовок) в исходном элементе диалога.

Code examples: (Примеры кода: )
Initialize the dialog with the title option specified:
Инициализация Диалога с определенной опцией title:

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


Get or set the title option, after initialization:
Можно получить или установить опцию title после инициализации:

// getter
var title = $( ".selector" ).dialog( "option", "title" );
 
// setter
$( ".selector" ).dialog( "option", "title", "Dialog Title" );



width
Type: Number
Default: 300

The width of the dialog, in pixels.
Ширина диалога в пикселях.

Code examples: (Примеры кода: )
Initialize the dialog with the width option specified:
Инициализация Диалога с определенной опцией width:

$( ".selector" ).dialog({ width: 500 });


Get or set the width option, after initialization:
Можно получить или установить опцию width после инициализации:

// getter
var width = $( ".selector" ).dialog( "option", "width" );
 
// setter
$( ".selector" ).dialog( "option", "width", 500 );



zIndex
Type: Integer
Default: 1000

The starting z-index for the dialog.
Стартовое значение зет-индекса (z-index) для диалога.

Code examples: (Примеры кода: )
Initialize the dialog with the zIndex option specified:
Инициализация Диалога с определенной опцией zIndex:

$( ".selector" ).dialog({ zIndex: 20 });


Get or set the zIndex option, after initialization:
Можно получить или установить опцию zIndex после инициализации:

// getter
var zIndex = $( ".selector" ).dialog( "option", "zIndex" );
 
// setter
$( ".selector" ).dialog( "option", "zIndex", 20 );



Methods (Методы)



close()
Closes the dialog.
• This method does not accept any arguments.

Закрывает диалог.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the close method:
Запуск метода close (закрыть):
$( ".selector" ).dialog( "close" );



destroy()
Removes the dialog functionality completely. This will return the element back to its pre-init state.
• This method does not accept any arguments.

Полностью удаляет функциональность диалога. Возвращает элемент обратно в состояние до инициализации.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the destroy method:
Запуск метода destroy (разрушить):
$( ".selector" ).dialog( "destroy" );



disable()
Disables the dialog.
• This method does not accept any arguments.

Выключает диалог.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the disable method:
Запуск метода disable (выключить):
$( ".selector" ).dialog( "disable" );



enable()
Disables the dialog.
• This method does not accept any arguments.

Включает диалог.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the enable method:
Запуск метода enable (включить):
$( ".selector" ).dialog( "enable" );



isOpen()
Returns: Boolean
Whether the dialog is currently open.
• This method does not accept any arguments.

Открыт ли сейчас данный диалог.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the isOpen method:
Запуск метода isOpen (открыт ли?):
var isOpen = $( ".selector" ).dialog( "isOpen" );



moveToTop()
Moves the dialog to the top of the dialog stack.
• This method does not accept any arguments.

Двигает диалог на верх по стеку диалогов.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the moveToTop method:
Запуск метода moveToTop (двигать на верх):
$( ".selector" ).dialog( "moveToTop" );



open()
Opens the dialog.
• This method does not accept any arguments.

Открывает диалог.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the open method:
Запуск метода open (открыть):
$( ".selector" ).dialog( "open" );



option( optionName )
Returns: Object
Gets the value currently associated with the specified optionName.
Получает значение, связанное с определенным optionName (имя опции).
• optionName
Type: String
The name of the option to get.
Имя опции, для которой получаем значение.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:



option()
Returns: PlainObject
Gets an object containing key/value pairs representing the current dialog options hash.
• This method does not accept any arguments.

Получает объект, содержащий пары key/value (ключ/значение), представляющий текущее состояние набора значений Диалога.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
var isDisabled = $( ".selector" ).dialog( "option", "disabled" );
var options = $( ".selector" ).dialog( "option" );



option( optionName, value )
Sets the value of the dialog option associated with the specified optionName.
Устанавливает значение опции Диалога, связанное с определенным optionName (именем опции).

• optionName
Type: String
The name of the option to set.
Имя опции для установки.

• value
Type: Object
A value to set for the option.
Значение, которое устанавливается для опции.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
$( ".selector" ).dialog( "option", "disabled", true );



option( options )
Sets one or more options for the dialog.

Устанавливает одну или более опций для Диалога.

• options
Type: Object
A map of option-value pairs to set.
Карта пар option-value (опция-значение) для установки.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
$( ".selector" ).dialog( "option", { disabled: true } );



widget()
Returns a jQuery object containing the generated wrapper.
• This method does not accept any arguments.

Возвращает объект jQuery, содержащий сгенерированную обертку.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the widget method:
Запуск метода виджета:
var widget = $( ".selector" ).dialog( "widget" );



Events (События)



beforeClose( event, ui )
Type: dialogbeforeclose

Triggered when a dialog is about to close. If canceled, the dialog will not close.

• event
Type: Event

• ui
Type: Object

Code examples: (Примеры кода: )
Initialize the dialog with the beforeClose callback specified:
$( ".selector" ).dialog({
    beforeClose: function( event, ui ) {}
});


Bind an event listener to the dialogbeforeclose event:
$( ".selector" ).on( "dialogbeforeclose", function( event, ui ) {} );



close( event, ui )
Type: dialogclose

Triggered when the dialog is closed.

• event
Type: Event

• ui
Type: Object

Code examples: (Примеры кода: )
Initialize the dialog with the close callback specified:
$( ".selector" ).dialog({
    close: function( event, ui ) {}
});


Bind an event listener to the dialogclose event:
$( ".selector" ).on( "dialogclose", function( event, ui ) {} );



create( event, ui )
Type: dialogcreate

Triggered when the dialog is created.

• event
Type: Event

• ui
Type: Object

Code examples: (Примеры кода: )
Initialize the dialog with the create callback specified:
$( ".selector" ).dialog({
    create: function( event, ui ) {}
});


Bind an event listener to the dialogcreate event:
$( ".selector" ).on( "dialogcreate", function( event, ui ) {} );



drag( event, ui )
Type: dialogdrag

Triggered while the dialog is being dragged.

• event
Type: Event

• ui
Type: Object
◦ position
Type: Object
The current CSS position of the dialog.
◦ offset
Type: Object
The current offset position of the dialog.

Code examples: (Примеры кода: )
Initialize the dialog with the drag callback specified:
$( ".selector" ).dialog({
    drag: function( event, ui ) {}
});


Bind an event listener to the dialogdrag event:
$( ".selector" ).on( "dialogdrag", function( event, ui ) {} );



dragStart( event, ui )
Type: dialogdragstart

Triggered when the user starts dragging the dialog.

• event
Type: Event

• ui
Type: Object
◦ position
Type: Object
The current CSS position of the dialog.
◦ offset
Type: Object
The current offset position of the dialog.

Code examples: (Примеры кода: )
Initialize the dialog with the dragStart callback specified:
$( ".selector" ).dialog({
    dragStart: function( event, ui ) {}
});


Bind an event listener to the dialogdragstart event:
$( ".selector" ).on( "dialogdragstart", function( event, ui ) {} );



dragStop( event, ui )
Type: dialogdragstop

Triggered after the dialog has been dragged.

• event
Type: Event

• ui
Type: Object
◦ position
Type: Object
The current CSS position of the dialog.
◦ offset
Type: Object
The current offset position of the dialog.

Code examples: (Примеры кода: )
Initialize the dialog with the dragStop callback specified:
$( ".selector" ).dialog({
    dragStop: function( event, ui ) {}
});


Bind an event listener to the dialogdragstop event:
$( ".selector" ).on( "dialogdragstop", function( event, ui ) {} );



focus( event, ui )
Type: dialogfocus

Triggered when the dialog gains focus.

• event
Type: Event

• ui
Type: Object

Code examples: (Примеры кода: )
Initialize the dialog with the focus callback specified:
$( ".selector" ).dialog({
    focus: function( event, ui ) {}
});


Bind an event listener to the dialogfocus event:
$( ".selector" ).on( "dialogfocus", function( event, ui ) {} );



open( event, ui )
Type: dialogopen

Triggered when the dialog is opened.

• event
Type: Event

• ui
Type: Object

Code examples: (Примеры кода: )
Initialize the dialog with the open callback specified:
$( ".selector" ).dialog({
    open: function( event, ui ) {}
});


Bind an event listener to the dialogopen event:
$( ".selector" ).on( "dialogopen", function( event, ui ) {} );



resize( event, ui )
Type: dialogresize

Triggered while the dialog is being resized.

• event
Type: Event

• ui
Type: Object
◦ orginalPosition
Type: Object
The CSS position of the dialog prior to being resized.
◦ position
Type: Object
The current CSS position of the dialog.
◦ originalSize
Type: Object
The size of the dialog prior to being resized.
◦ size
Type: Object
The current size of the dialog.

Code examples: (Примеры кода: )
Initialize the dialog with the resize callback specified:
$( ".selector" ).dialog({
    resize: function( event, ui ) {}
});


Bind an event listener to the dialogresize event:
$( ".selector" ).on( "dialogresize", function( event, ui ) {} );



resizeStart( event, ui )
Type: dialogresizestart

Triggered when the user starts resizing the dialog.

• event
Type: Event

• ui
Type: Object
◦ orginalPosition
Type: Object
The CSS position of the dialog prior to being resized.
◦ position
Type: Object
The current CSS position of the dialog.
◦ originalSize
Type: Object
The size of the dialog prior to being resized.
◦ size
Type: Object
The current size of the dialog.

Code examples: (Примеры кода: )
Initialize the dialog with the resizeStart callback specified:
$( ".selector" ).dialog({
    resizeStart: function( event, ui ) {}
});


Bind an event listener to the dialogresizestart event:
$( ".selector" ).on( "dialogresizestart", function( event, ui ) {} );



resizeStop( event, ui )
Type: dialogresizestop

Triggered after the dialog has been resized.

• event
Type: Event

• ui
Type: Object
◦ orginalPosition
Type: Object
The CSS position of the dialog prior to being resized.
◦ position
Type: Object
The current CSS position of the dialog.
◦ originalSize
Type: Object
The size of the dialog prior to being resized.
◦ size
Type: Object
The current size of the dialog.

Code examples: (Примеры кода: )
Initialize the dialog with the resizeStop callback specified:
$( ".selector" ).dialog({
    resizeStop: function( event, ui ) {}
});


Bind an event listener to the dialogresizestop event:
$( ".selector" ).on( "dialogresizestop", function( event, ui ) {} );



Overview (Обзор)
A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.

If the content length exceeds the maximum height, a scrollbar will automatically appear.

A bottom button bar and semi-transparent modal overlay layer are common options that can be added.

Диалог - это есть плавающее окно (window), которое содержит полосу с заголовком (title bar) и область контента (content area). Окно диалога можно двигать, менять его размер и закрывать с помощью иконки 'x' по умолчанию.

Если длина контента превысит максимальную высоту, автоматически появится полоса прокрутки (scrollbar).

Могут быть добавлены дополнительные общие опции: нижняя полоса с кнопками, полупрозрачный модальный оверлей.




Additional Notes (Дополнительная информация)
• This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
• Этот виджет требует определенных стилей CSS, иначе он не будет работать. Если вы используете адаптированную схему, оттолкитесь в своей разработке от специализированного файла CSS.


Examples: (Примеры: )



Example: A simple jQuery UI Dialog.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>dialog demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</head>
<body>
 
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
 
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "open" );
});
</script>
 
</body>
</html>
Этот пример можно посмотреть здесь.



Примеры Диалогов на этом сайте: Дефолтный, Анимированный, Модальный, Сообщение, Подтверждение, Форма.



Если вы планируете вернуться сюда позднее...
Пожалуйста, запомните эту страничку -
URL: http://kocby.ru/post/webmaster/jquery/ui/dialog/
Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!
© KOCBY.RU :: перепечатка материалов разрешается с указанием ссылки на домен KOCBY.RU ©
Basket is empty :: Корзина пустая
Close and hide in basket :: Закрыть и спрятать в корзину
Посмотри в зеркало! Что там видно?
Красивая девушка брюнетка слева Красивая девушка блондинка справа




Close and hide in basket :: Закрыть и спрятать в корзину статистическую информацию о посетителях Клуба.
Створки зеркала Клуба Одиноких Сердец.
Красивая девушка блондинка слева Красивая девушка брюнетка справа