Dialog :: Диалог
Тесты по теории Элемент Диалог (Dialog) плагина UI библиотеки jQuery.
:: Дефолтный диалог, без параметров
:: { autoOpen: false }
:: { buttons: }
:: closeText: "Закрыть Диалог"
:: dialogClass: "alert"
:: disabled, height=640
:: Лимитированные размеры 400 +-100 :: 600 +-100
:: modal: true
:: Нестандартное позиционирование Диалога
:: Анимация
:: zIndex 90
:: Дефолтный диалог, без параметров
Дефолтный диалог (без параметров). Никакие параметры не передаются
::
:: { autoOpen: false }
{ autoOpen: false }
::
:: { buttons: }
dialog({ buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } ] }})
::
:: closeText: "Закрыть Диалог"
closeText: "Закрыть Диалог"
::
:: dialogClass: "alert"
dialogClass: "alert"
::
:: disabled, height=640
disabled, height=640 :: option: hide is explode!
::
:: Лимитированные размеры 400 +-100 :: 600 +-100
Лимитированные размеры 400 +-100 :: 600 +-100
$( "#dialog007" ).dialog( "option", "height", 400 );
$( "#dialog007" ).dialog( "option", "width", 600 );
$( "#dialog007" ).dialog( "option", "maxHeight", 500 );
$( "#dialog007" ).dialog( "option", "maxWidth", 700 );
$( "#dialog007" ).dialog( "option", "minHeight", 300 );
$( "#dialog007" ).dialog( "option", "minWidth", 500 );
::
$( "#dialog007" ).dialog( "option", "height", 400 );
$( "#dialog007" ).dialog( "option", "width", 600 );
$( "#dialog007" ).dialog( "option", "maxHeight", 500 );
$( "#dialog007" ).dialog( "option", "maxWidth", 700 );
$( "#dialog007" ).dialog( "option", "minHeight", 300 );
$( "#dialog007" ).dialog( "option", "minWidth", 500 );
:: modal: true
Если опция modal установлена на значение true (истина), Диалог будет иметь модальный характер; другие элементы на страничке будут выключены, т.е. будет невозможна работа с ними. Модальные диалоги создают оверлеи ниже диалога, но выше других элементов страницы.
::
:: Нестандартное позиционирование Диалога
Нестандартное позиционирование Диалога
В данном случае такое:
position: { my: "left top", at: "left bottom", of: window }
::
В данном случае такое:
position: { my: "left top", at: "left bottom", of: window }
:: Анимация
Анимировать ли и как именно анимировать показ диалога.
{ autoOpen: false, width: 800, modal: true, show: "blind", hide: "explode" }
Непонятка с эффектом "explode", то работает, то не работает... Эффект "blind" устойчивие в своих проявлениях.
::
{ autoOpen: false, width: 800, modal: true, show: "blind", hide: "explode" }
Непонятка с эффектом "explode", то работает, то не работает... Эффект "blind" устойчивие в своих проявлениях.
:: zIndex 90
zIndex (Default: 1000)
В данном примере: 90
::
В данном примере: 90
На данной страничке ряд тестов Диалог (Dialog). Играем опциями: autoOpen (Диалог автоматически открывается при инициализации), buttons (кнопки для диалога), modal (модальный характер Диалога с отключением других элементов страницы), position (позиционирование Диалога), эффекты возникновения и исчезновения и др.
Диалог
