jQuery UI. Widgets. Dialogs (Окна)

Иногда перед веб-программистом встает задача вывести что-то в окне, будь то уведомление или форма регистрации. И вот наконец-то появилось простое и функциональное средство! Виджет jQuery UI — Dialog … Вообщем не жизнь, а сказка!
🙂

Если вдруг кто не видел предыдущию статью, то повторюсь:
Скачиваем jqueryui и подключаем все это дело:

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

Для разминки сделаем «просто окно» — без затей. Для этого нам потребуется всего одна строка html:

<div id="dialog"></div>

И одна строка яваскрипт кода:

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

autoOpen не обязательный параметр, нам он нужен для наглядности (для чего он нужен см. ниже).
Открывать и закрывать окно теперь можно соответственно:

$("#dialog").dialog("open");

и

$("#dialog").dialog("close");

И получим вот такое чудо.

Итак, у нас есть окно, безвкусное квадратное и ничем не примечательное… Надо это исправить. Начнем наверное с изменения заголовка(точнее его добавления), изменения координат появления окна и… ну и режим модальности для завершения картины.
JS:

$("#dialog").dialog({
	title: "Warning!!!",  //тайтл, заголовок окна
	position: [725,200],  //месторасположение окна [отступ слева,отступ сверху]
	modal: true           //булева переменная если она равно true -  то окно модальное, false -  то нет
});

Пример: смотрим.

В параметре position можно так же использовать и такие конструкции:

position: ["left"]
position: ["left", "top"]

Ну вот, окно более-менее приобрело людской вид. Добавим функциональности — кнопками.
JS:

$("#dialog").dialog({
	title: "Warning!!!",  	//тайтл, заголовок окна
	width:450,				//ширина
	height: 300,			//высота
	modal: true,           	//true -  окно модальное, false - нет
	buttons: {
		"Добавить текст в окно": function() { $("#dialog").text("опа! текст!"); },
		"Закрыть": function() { $(this).dialog("close"); }
	}
});

Пример: смотрим.

Как Вы уже заметили я добавил еще два параметра — width и height, ширина и высота. Параметры простые, но не факт что Вы про них знали 🙂 Ну вот вроде бы и все из простого. Вот так плавно мы подобрались к событиям…

Приступим, как всегда — JS:

$("#dialog").dialog({
	dragStop: function(event, ui) {                    //если окно оставили в покое после перетаскивания, то
		alert("ui.offset.top = " + ui.offset.top + 		// выводим координату "потолка" окна
            "nui.offset.left = " + ui.offset.left);    // выводим координату левой стороны окна
    }
});

Это он. Он самый… Пример.

Напоследок самое скучное… Справочный материал по всем опциям, методам и событиям. Пользуйтесь!

Опции:
  • autoOpen — по умолчанию эта опция имеет значение true, что означает автоматическое появление диалогового окна при вызове метода dialog. Если установить значение опции в 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.
Методы:
  • 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») открывает диалоговое окно.
События:
  • beforeClose — наступает, перед закрытием диалогового окна (если связанная с этим событием функция вернет false – это предотвратит закрытие диалога);
  • open — наступает при открытии диалога;
  • focus — наступает в момент получения фокуса диалоговым окном;
  • dragStart — наступает в начале перемещения диалогового окна;
  • drag — наступает постоянно во время процесса перемещения диалогового окна;
  • dragStop — наступает в конце перемещения диалогового окна;
  • resizeStart — наступает в начале изменения размеров диалогового окна;
  • resize — наступает постоянно во время процесса изменения размеров диалогового окна;
  • resizeStop — наступает в конце изменения размеров диалогового окна;
  • close — наступает, когда диалоговое окно было успешно закрыто.

26 Комментарии “jQuery UI. Widgets. Dialogs (Окна)

  1. Хочется добавить пару слов о заклятом друге веберов — ИЕ. При использовании jquery dialogs в зависимости от компоновки страницы в любимом браузере довольно часто возникает красноречивая ошибка: HTML Parsing Error. Unable to modify the parent container element before the child element is closed (KB927917) Лечится это вынесением инициализации диалога в пост-загрузку:$(function (){$("#dialog").dialog({autoOpen: false});});

  2. Мне понравилась эта штука widget.UI Хочу найти теперь учебник про это и внедрить себе на сайты.А что они будут делать -потом решу. Кстати про мнения,что надо оказать что крутой:У меня сайтик про транс-качает -куча-и за два года 13 000 посетилелей.Где то 50-80 в день.

  3. Знаете, я никак не могу научится пользоваться jquery, вообще мне легче yf javascripte кодить, вот помню мне года говорили, если ты за 1.5 года не научился ajax, то лучше оставь это не твоё, а потом нашёл нормальный пример переделал его и теперь работате во всех браузерах. А по началу мне советовали тоже jquery… Короче не катит, вот хочется как с QT скачал примеры переделывай их ….. Вот гляньте сайт нашей группы moc-081.narod.ru Ведь js понимаю, почему не получается jquery понять?

  4. меньше самовнушения .. ну нравится JS, ну и мне он нравится, но либо мастерски знать JS, а это уйма времени, либо юзать jQuery, нужно уметь меняться, дякую за статью

  5. Уважаемый автор. Мне понравился ваш ресурс в целом, а предложенные скрипты просто поражают простотой. Я всегда стремился писать(кодить) красиво, и мне хотелось бы знать ход ваших мыслей при написании скрипта. Как вижу вам не хочется нагружать статьи излишними комментариями, но не хотелось бы вам создать видеокурс о веб программировании, ну или хотя бы отдельные видео уроки?

  6. видать, раскрутился… отдельно про капчу: что? так спамят, что так мучать?

  7. Очень интересный сайт!! Очень жаль что сайт перестал обновляться 🙁 🙁 🙁

  8. >А как написать чтонибуть в окно ? $('#dialog').html('hello world');

  9. подскажите пожалуста как перекрыть это диалоговое окно своим див блоком? [code] <div /> > сколькобы девяток не писал, диалоговое окно всеравно получается поверх этого обьекта </div> [/code]

  10. >подскажите пожалуста как перекрыть это диалоговое окно своим див блоком? сколькобы девяток не писал, диалоговое окно всеравно получается поверх этого обьекта Поставьте z-index своего блока больше чем у окна (у фона он 1001, у окна — 1002) Ваш блок должен иметь абсолютное позиционирование

  11. Спасибо автору! Очень помог! Тут все классно и доступно написано! У меня вопрос. Открываю одно окно нажатием на кнопку, потом открываю второе окно, нажатием на другую кнопку. При нажатии на вторую кнопку делаю, чтобы первое окно закрывалось и сразу открывалось второе. Но проблема в том, что второе окно открывается, не дав еще закрыться первому. И получается накладка. Может есть какая-то задержка? Чтобы она дала закрыться первому окну, а потом уже открывалось второе?

  12. Здравствуйте, а как передать диалогу какой нибудь параметр (id к примеру), не подскажете? или только какому-нибудь скрытому <div> задавать значение, а из диалога считывать его?

  13. Будьте добры, добавьте на сайт кнопку G+ 🙂 Так и хочется плюсануть сайту за такие полезные статьи, как эта!

  14. Здравствуйте, у меня проблема с выводом в диалоговым окном. Дело в том чём, когда нажимаешь кнопку "купить" происходит вывод окна где нужно указать сумму с помощью бегунка. Бегунок отображается, а вот в строке ввода всегда 1. что только не делал уже. привожу код: $("#selldialog").click(function() {$("#confirmsell").dialog({ height: 200, width: 460, modal: true, buttons: { "OK": function() { window.location = $('.oksell ').attr('href'); $(this).dialog("close"); }, "Отмена": function() { $(this).dialog("close"); } } }); }); $(function() { $( "#sliderp" ).slider({ min: 0.01, max: 5, step: 0.01, value: 1, slide: function( event, ui ) { $( "#p" ).val( ui.value ); } }); $( "#p" ).val( $( "#sliderp" ).slider( "value") ); });

  15. Очень полезная дока, а для меня еще и вовремя!

  16. Извините, просто хочу проверить капчу, не пойму в чем тут мучения. капча как капча

  17. Здравствуйте, кроме кнопок, ещё можно что либо добавлять? Интерисует комбобокс в этом примере или другом, это вообще возможно?

  18. Здравствуйте! Есть вот такой код: $(window).resize(function () { var headerHeight = $('#header').height(); // узнаем высоту слоя header! var footerHeight = $('#footer').height(); // узнаем высоту слоя footer! var contHeight = $(window).height() — headerHeight — footerHeight; // узнаем высоту основного слоя; 100% минус высота слоя header, минус высота слоя footer! $('#container').css({'height':contHeight}); // прописываем полученную высоту основного слоя container! }); Вопрос как сделать так чтобы задать минимальную высоту окна браузера $(window).height() припустим 300рх и если высота окна браузера меньше 300рх мы останавливаем работу кода, а когда высота окна браузера $(window).height() опять больше 300рх код снова должен работать. Заранее Спасибо!

  19. а чем обычный if то не подходит? if ($(window).height() < 300) …

  20. У меня диалоговое окно в Mozila Firefox работает прекрасно, а в IE при перетаскивании окна начинается сильное дрожание(дерганье) и окна, и нижней страницы. Что делать?

  21. Ну зачем? Всё это быстрее, проще и надёжнее делается на CSS.

  22. Хотя справедливости ради отмечу, что большая часть материалов сайта очень полезна для образовательных целей. Простота действительно спасительна!

  23. Подскажите, сделал модальное окно, а картинки на сайте все равно идут поверх него. Как это исправить?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *