Slyweb
На разработку сайта! Скидки 50%!
Поиск функций jQuery
поиск



Характеристика функции
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="jquery-ui-1.7.2.custom.css" 
rel="stylesheet" type="text/css"/>
<script src="jquery-1.3.2.min.js"></script>
<script src="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


Опция: bgiframe


Опция: closeOnEscape


Опция: dialogClass


Опция: draggable


Опция: height


Опция: hide


Опция: maxHeight


Опция: maxWidth


Опция: minHeight


Опция: minWidth


Опция: modal


Опция: position


Опция: resizable


Опция: show


Опция: stack


Опция: title


Опция: width


Опция: zIndex


Событие: beforeclose

Событие: open

Событие: focus

Событие: dragStart

Событие: drag

Событие: dragStop

Событие: resizeStart

Событие: resize

Событие: resizeStop

Событие: close

Метод: destroy

Метод: disable

Метод: enable

Метод: option

Метод: moveToTop

Метод: close

Метод: isOpen

Метод: 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>.

Александр Ермаков. Хостинг - www.pwstudio.org