Web — мастер

Категория: jQuery.

В этом примере мы будем говорить о создании диалогового пользовательского окна. Для реализации этого будем использовать всеми любимую библиотеку JQuery и специальный для неё плагин UI Dialog. Этот плагин позволяет выбирать текст, кнопки и их поведение и многие другие параметры окна диалогов. Такие диалоговые окна очень удобны, и похожи на модальные окна в Windows, в них также содержится в верхнем углу кнопка с крестиком для закрытия, и они могут масштабироваться и перемещаться по экрану пользователем.

Demo просмотреть архив

HTML

Как обычно начнём с HTML, это основной код разметки со всеми примерами.

 
 Open dialog 1
 Open dialog 2
 Modal dialog #3
 
 
 Move to top dialog 1
 Move to top dialog 2
 Modal dialog #4

 
 
 Enable dialog 1
 Enable dialog 2
 
 
 Disable dialog 1
 Disable dialog 2
 

 
 
 
This dialog using 'slide/explode' methods to show/hide, plus, can be closed by 'close' button, by 'x' icon and by 'esc' button. This dialog window can be moved using mouse.
 

 
 
This dialog using 'blind/fold' methods to show/hide, plus, can be closed by 'x' icon and by 'esc' button. This dialog window can be moved and resized using mouse.
 

 
 
This is the first modal dialog with some text and 2 buttons. This dialog window can be moved, resized and closed with the 'x' icon.
 

 
 
Another sample of modal dialogs - login forms. The dialog using 'highlight/scale' methods to 'show/hide'. Can be moved and closed with the 'x' icon.
 
 
 Name
 

 Password
 
 
 
 
 

CSS / main.css

body
{background:#eee;
font-family:Verdana, Helvetica, Arial, sans-serif;
margin:0;
padding:0
}
.example
{
background:#FFF;width:600px;
height:200px;
font-size:80%;
border:1px #000 solid;
margin:0.5em 10% 0.5em;
padding:1em 2em 2em;
-moz-border-radius:3px;
-webkit-border-radius:3px
}
.example button 
{
width:150px
}

 JS / main.js

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

$(function(){
 // Диалоговое окно Свойства 1
 $('#dialog1').dialog({
 autoOpen: false,
 show: 'slide',
 hide: 'explode',
 buttons: { 'Close': function() { $(this).dialog('close'); } },
 closeOnEscape: true,
 resizable: false
 });

 // Диалоговое окно 1 открыть / закрыть
 $('#toggle1').click(function() {
 if ($('#dialog1').dialog('isOpen') == true)
 $('#dialog1').dialog('close');
 else
 $('#dialog1').dialog('open');
 return false;
 });

 // Диалоговое окно Свойства 2
 $('#dialog2').dialog({
 autoOpen: false,
 show: 'blind',
 hide: 'fold',
 closeOnEscape: true
 });

 // Диалоговое окно 2 открыть / закрыть
 $('#toggle2').click(function() {
 if ($('#dialog2').dialog('isOpen') == true)
 $('#dialog2').dialog('close');
 else
 $('#dialog2').dialog('open');
 return false;
 });

 // Диалоговое окно Свойства 3
 $('#dialog3').dialog({
 autoOpen: false,
 show: 'fade',
 hide: 'fade',
 modal: true,
 buttons: {
 'Ok': function() { $(this).dialog('close'); },
 'Close': function() { $(this).dialog('close'); }
 },
 resizable: false
 });

 // Диалоговое окно 3 открыть / закрыть
 $('#toggle3').click(function() {
 if ($('#dialog3').dialog('isOpen') == true)
 $('#dialog3').dialog('close');
 else
 $('#dialog3').dialog('open');
 return false;
 });

 // Диалоговое окно Свойства 4
 $('#dialog4').dialog({
 autoOpen: false,
 show: 'highlight',
 hide: 'scale',
 modal: true,
 buttons: {
 'Login': function() {
 var name = $('#name').val(), password = $('#password').val();
 var mydialog4 = $(this);

 if (name != '' && password != '') {
 $.ajax({
 type: 'POST',
 url: 'some.php',
 data: 'name='+name+'&pass='+password,
 success: function(msg){
 alert(msg);
 $(mydialog4).dialog('close');
 }
 });
 }
 },
 'Close': function() { $(this).dialog('close'); }
 },
 resizable: false,
 width: '400px'
 });

 // Диалоговое окно 4 открыть / закрыть
 $('#toggle4').click(function() {
 if ($('#dialog4').dialog('isOpen') == true)
 $('#dialog4').dialog('close');
 else
 $('#dialog4').dialog('open');
 return false;
 });

 // Переместить наверх функция
 $('#top1').click(function() {
 $('#dialog1').dialog('moveToTop');
 });

 $('#top2').click(function() {
 $('#dialog2').dialog('moveToTop');
 });

 // функция включить
 $('#enable1').click(function() {
 $('#dialog1').dialog('enable');
 });

 $('#enable2').click(function() {
 $('#dialog2').dialog('enable');
 });

 // функция закрыть
 $('#disable1').click(function() {
 $('#dialog1').dialog('disable');
 });

 $('#disable2').click(function() {
 $('#dialog2').dialog('disable');
 });
});