JqueryUI — Диалог

Метод $ (селектор, контекст) .dialog (параметры)

Метод dialog (параметры) объявляет, что HTML-элемент может быть администрирован в форме диалогового окна. Параметр options — это объект, который определяет внешний вид и поведение этого окна.

Синтаксис

$(selector, context).dialog(options);

Вы можете предоставить один или несколько параметров одновременно, используя объект Javascript. Если нужно указать несколько параметров, разделите их запятой следующим образом:

$(selector, context).dialog({option1: value1, option2: value2..... });

В следующей таблице перечислены различные параметры, которые можно использовать с этим методом —

$(".selector").dialog(
   { appendTo: "#identifier" }
);

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

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

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

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

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

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

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

$(".selector").dialog(
   { hide: { effect: "explode", duration: 1000 } }
);

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

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

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

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

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

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

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

$(".selector").dialog(
   { show: { effect: "blind", duration: 800 } }
);

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

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

Если для этой опции задано значение false , это предотвратит добавление класса ui-draggable в список выбранных элементов DOM. По умолчанию его значение равно true .

Вариант — appendTo

Эта опция используется для добавления диалогового окна к указанному элементу. По умолчанию его значением является «тело» .

Синтаксис

Если эта опция не установлена ​​в false , диалоговое окно открывается при создании. Если false , диалоговое окно будет открыто после вызова диалога («open»). По умолчанию его значение равно true .

Опция — автооткрытие

Если эта опция не установлена ​​в false , диалоговое окно открывается при создании. Если false , диалоговое окно будет открыто после вызова диалога («open»). По умолчанию его значение равно true .

Синтаксис

Эта опция добавляет кнопки в диалоговом окне. Они перечислены как объекты, и каждое свойство является текстом на кнопке. Значение является функцией обратного вызова, вызываемой, когда пользователь нажимает кнопку. По умолчанию его значение равно {} .

Вариант — кнопки

Эта опция добавляет кнопки в диалоговом окне. Они перечислены как объекты, и каждое свойство является текстом на кнопке. Значение является функцией обратного вызова, вызываемой, когда пользователь нажимает кнопку. По умолчанию его значение равно {} .

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

Синтаксис

Если для этого параметра не установлено значение false , диалоговое окно будет закрыто, когда пользователь нажимает клавишу Escape, когда диалоговое окно имеет фокус. По умолчанию его значение равно true .

Вариант — closeOnEscape

Если для этого параметра не установлено значение false , диалоговое окно будет закрыто, когда пользователь нажимает клавишу Escape, когда диалоговое окно имеет фокус. По умолчанию его значение равно true .

Синтаксис

Эта опция содержит текст для замены значения по умолчанию для кнопки «Закрыть». По умолчанию его значение равно «закрыть» .

Опция — closeText

Эта опция содержит текст для замены значения по умолчанию для кнопки «Закрыть». По умолчанию его значение равно «закрыть» .

Синтаксис

Если для этой опции задано значение false , это предотвратит добавление класса ui-draggable в список выбранных элементов DOM. По умолчанию его значение равно «» .

Опция — dialogClass

Если для этой опции задано значение false , это предотвратит добавление класса ui-draggable в список выбранных элементов DOM. По умолчанию его значение равно «» .

Синтаксис

Если этот параметр не установлен в значение false , диалоговое окно будет перетаскиваться при нажатии и перетаскивании строки заголовка. По умолчанию его значение равно true .

Вариант — перетаскиваемый

Если этот параметр не установлен в значение false , диалоговое окно будет перетаскиваться при нажатии и перетаскивании строки заголовка. По умолчанию его значение равно true .

Синтаксис

Эта опция устанавливает высоту диалогового окна. По умолчанию его значение равно «auto» .

Вариант — высота

Если этот параметр устанавливает высоту диалогового окна. По умолчанию его значение равно «auto» . Эта опция может быть типа —

Это может быть типа —

Число — указывает продолжительность в миллисекундах.

String — Единственное поддерживаемое строковое значение — auto, которое позволяет изменять высоту диалога в зависимости от его содержимого.

Синтаксис

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

Вариант — скрыть

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

Это может быть типа —

Boolean — Значения могут быть истинными / ложными . Если false, анимация не будет использоваться, и диалог будет скрыт немедленно. Если true , диалоговое окно будет затухать с продолжительностью по умолчанию и ослаблением по умолчанию.

Число — Диалог исчезнет с указанной продолжительностью и ослаблением по умолчанию.

String — диалоговое окно будет скрыто с использованием указанного эффекта, например slideUp , fold .

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

Синтаксис

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

Опция — maxHeight

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

Синтаксис

Этот параметр устанавливает максимальную ширину, до которой можно изменять размер диалога, в пикселях. По умолчанию его значение равно false .

Опция — maxWidth

Этот параметр устанавливает максимальную ширину, до которой можно изменять размер диалога, в пикселях. По умолчанию его значение равно false .

Синтаксис

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

Опция — minHeight

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

Синтаксис

Этот параметр задает минимальную ширину в пикселях, до которой можно изменить размер диалогового окна. По умолчанию его значение равно 150 .

Опция — minWidth

Этот параметр задает минимальную ширину в пикселях, до которой можно изменить размер диалогового окна. По умолчанию его значение равно 150 .

Синтаксис

Если для этой опции задано значение true , диалог будет иметь модальное поведение; другие элементы на странице будут отключены, т. е. с ними нельзя будет взаимодействовать. Модальные диалоги создают наложение под диалогом, но над другими элементами страницы. По умолчанию его значение равно false .

Опция — модальная

Если для этой опции задано значение true , диалог будет иметь модальное поведение; другие элементы на странице будут отключены, т. е. с ними нельзя будет взаимодействовать. Модальные диалоги создают наложение под диалогом, но над другими элементами страницы. По умолчанию его значение равно false .

Синтаксис

Эта опция указывает начальную позицию диалогового окна. Может быть одной из предопределенных позиций: центр (по умолчанию), слева, справа, сверху или снизу . Также может быть двухэлементным массивом со значениями left и top (в пикселях) как [left, top] или позициями текста, такими как [‘right’, ‘top’]. По умолчанию его значение равно {my: «center», at: «center», of: window} .

Вариант — позиция

Эта опция указывает начальную позицию диалогового окна. Может быть одной из предопределенных позиций: центр (по умолчанию), слева, справа, сверху или снизу . Также может быть двухэлементным массивом со значениями left и top (в пикселях) как [left, top] или позициями текста, такими как [‘right’, ‘top’]. По умолчанию его значение равно {my: «center», at: «center», of: window} .

Синтаксис

Если этот параметр не установлен в значение false , размер диалогового окна можно изменять во всех направлениях. По умолчанию его значение равно true .

Опция — изменяемого размера

Если этот параметр не установлен в значение false , размер диалогового окна можно изменять во всех направлениях. По умолчанию его значение равно true .

Синтаксис

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

Вариант — показать

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

Это может быть типа —

Boolean — Значения могут быть истинными / ложными . Если false, анимация не будет использоваться, и диалог будет немедленно отображен. Если true , диалоговое окно исчезнет с продолжительностью по умолчанию и ослаблением по умолчанию.

Number — Диалог исчезнет с указанной продолжительностью и ослаблением по умолчанию.

String — Диалог будет отображаться с использованием указанного эффекта, такого как slideDown , fold .

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

Синтаксис

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

Вариант — название

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

Синтаксис

Эта опция указывает ширину диалогового окна в пикселях. По умолчанию его значение составляет 300 .

Опция — ширина

Эта опция указывает ширину диалогового окна в пикселях. По умолчанию его значение составляет 300 .

Синтаксис

Следующий раздел покажет вам несколько рабочих примеров функциональности диалогов.

Функциональность по умолчанию

В следующем примере демонстрируется простой пример функциональности диалога, не передающей параметры методу dialog () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-1" ).dialog({
               autoOpen: false,  
            });
            $( "#opener" ).click(function() {
               $( "#dialog-1" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-1" 
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener">Open Dialog</button>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле dialogexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Использование кнопок, заголовок и положение

В следующем примере демонстрируется использование трех кнопок параметров, заголовка и позиции в диалоговом виджете JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-2" ).dialog({
               autoOpen: false, 
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
               title: "Success",
               position: {
                  my: "left center",
                  at: "left center"
               }
            });
            $( "#opener-2" ).click(function() {
               $( "#dialog-2" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-2"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-2">Open Dialog</button>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле dialogexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Использование скрытия, шоу и высоты

В следующем примере демонстрируется использование трех параметров hide , show и height в диалоговом виджете JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-3" ).dialog({
               autoOpen: false, 
               hide: "puff",
               show : "slide",
               height: 200      
            });
            $( "#opener-3" ).click(function() {
               $( "#dialog-3" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-3"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-3">Open Dialog</button>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле dialogexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Использование Модал

В следующем примере демонстрируется использование трех кнопок параметров, заголовка и позиции в диалоговом виджете JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-4" ).dialog({
               autoOpen: false, 
               modal: true,
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
            });
            $( "#opener-4" ).click(function() {
               $( "#dialog-4" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-4" title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-4">Open Dialog</button>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
         ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
         laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <label for = "textbox">Enter Name: </label>
      <input type = "text">
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле dialogexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Метод $ (selector, context) .dialog («action», [params])

Метод dialog (action, params) может выполнять действие над диалоговым окном, например закрывать окно. Действие указывается в виде строки в первом аргументе, и необязательно, один или несколько параметров могут быть предоставлены на основе данного действия.

По сути, здесь действия — это не что иное, как методы jQuery, которые мы можем использовать в виде строки.

Синтаксис

$(selector, context).dialog ("action", [params]);

В следующей таблице перечислены действия для этого метода —

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

$(".selector").dialog("destroy");

$(".selector").dialog("isOpen");

$(".selector").dialog("moveToTop");

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

var isDisabled = $( ".selector" ).dialog( "option", "disabled" );

var options = $( ".selector" ).dialog( "option" );

$(".selector").dialog( "option", "disabled", true );

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

$(".selector").dialog("widget");

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

Действие — закрыть ()

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

Синтаксис

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

Действие — уничтожить ()

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

Синтаксис

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

Действие — isOpen ()

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

Синтаксис

Это действие помещает соответствующие диалоговые окна на передний план (поверх других). Этот метод не принимает никаких аргументов.

Действие — moveToTop ()

Это действие помещает соответствующие диалоговые окна на передний план (поверх других). Этот метод не принимает никаких аргументов.

Синтаксис

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

Действие — открыть ()

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

Синтаксис

Это действие возвращает значение, связанное с указанным параметром optionName. Где optionName — имя опции, которую нужно получить.

Действие — опция (optionName)

Это действие возвращает значение, связанное с указанным параметром optionName. Где optionName — имя опции, которую нужно получить.

Синтаксис

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

Действие — опция ()

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

Синтаксис

Это действие устанавливает значение опции диалога, связанной с указанным optionName.

Действие — опция (optionName, value)

Это действие устанавливает значение опции диалога, связанной с указанным optionName.

Синтаксис

Это действие устанавливает один или несколько параметров для диалога.

Действие — опция (варианты)

Это действие устанавливает один или несколько параметров для диалога.

Синтаксис

Это действие возвращает элемент виджета диалогового окна; элемент аннотирован именем класса пользовательского диалога. Этот метод не принимает никаких аргументов.

Действие — виджет ()

Это действие возвращает элемент виджета диалогового окна; элемент аннотирован именем класса пользовательского диалога. Этот метод не принимает никаких аргументов.

Синтаксис

пример

Теперь давайте посмотрим на пример, используя действия из таблицы выше. В следующем примере демонстрируется использование методов isOpen () , open () и close () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $("#toggle").click(function() {
               ($("#dialog-5").dialog("isOpen") == false) ? $(
                  "#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
            });
            $("#dialog-5").dialog({autoOpen: false});
         });
      </script>
   </head>
   
   <body>
      <button id = "toggle">Toggle dialog!</button>
      <div id = "dialog-5" title = "Dialog Title!">
         Click on the Toggle button to open and close this dialog box.
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле dialogexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод:

Управление событиями в диалоговом окне

В дополнение к методу диалога (опций), который мы видели в предыдущих разделах, JqueryUI предоставляет методы событий, которые запускаются для определенного события. Эти методы событий перечислены ниже —

$(".selector").dialog (
   beforeClose: function(event, ui) {}
);

$(".selector").dialog (
   close: function(event, ui) {}
);

$(".selector").dialog (
   create: function(event, ui) {}
);

$(".selector").dialog (
   drag: function(event, ui) {}
);

$(".selector").dialog (
   dragStart: function(event, ui) {}
);

$(".selector").dialog (
   dragStop: function(event, ui) {}
);

$(".selector").dialog (
   focus: function(event, ui) {}
);

$(".selector").dialog (
   open: function(event, ui) {}
);

$(".selector").dialog (
   resize: function(event, ui) {}
);

$(".selector").dialog (
   resizeStart: function(event, ui) {}
);

$(".selector").dialog (
   resizeStop: function(event, ui) {}
);

Это событие срабатывает, когда диалоговое окно закрывается. Возвращение false предотвращает закрытие диалогового окна. Это удобно для диалоговых окон с формами, которые не проходят проверку. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — beforeClose (событие, пользовательский интерфейс)

Это событие срабатывает, когда диалоговое окно закрывается. Возвращение false предотвращает закрытие диалогового окна. Это удобно для диалоговых окон с формами, которые не проходят проверку. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис

Это событие срабатывает, когда диалоговое окно закрыто. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — закрыть (событие, интерфейс)

Это событие срабатывает, когда диалоговое окно закрыто. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис

Это событие срабатывает при создании диалогового окна. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — создать (событие, пользовательский интерфейс)

Это событие срабатывает при создании диалогового окна. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис

Это событие вызывается повторно, когда диалоговое окно перемещается во время перетаскивания. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — перетащить (событие, пользовательский интерфейс)

Это событие вызывается повторно, когда диалоговое окно перемещается во время перетаскивания. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

position — объект jQuery, представляющий текущую позицию CSS диалогового окна.

смещение — объект jQuery, представляющий текущую позицию смещения диалога.

Синтаксис

Это событие вызывается, когда изменение положения диалогового окна начинается с перетаскивания его строки заголовка. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — dragStart (событие, пользовательский интерфейс)

Это событие вызывается, когда изменение положения диалогового окна начинается с перетаскивания его строки заголовка. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

position — объект jQuery, представляющий текущую позицию CSS диалогового окна.

смещение — объект jQuery, представляющий текущую позицию смещения диалога.

Синтаксис

Это событие срабатывает, когда операция перетаскивания завершается. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — dragStop (событие, пользовательский интерфейс)

Это событие срабатывает, когда операция перетаскивания завершается. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

position — объект jQuery, представляющий текущую позицию CSS диалогового окна.

смещение — объект jQuery, представляющий текущую позицию смещения диалога.

Синтаксис

Это событие срабатывает, когда диалог получает фокус. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — фокус (событие, интерфейс)

Это событие срабатывает, когда диалог получает фокус. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис

Это событие вызывается при открытии диалогового окна. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — открыть (событие, интерфейс)

Это событие вызывается при открытии диалогового окна. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис

Это событие вызывается повторно при изменении размера диалогового окна. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — изменить размер (событие, пользовательский интерфейс)

Это событие вызывается повторно при изменении размера диалогового окна. Где событие имеет тип события , и пользовательский интерфейс имеет тип объекта. Возможные значения пользовательского интерфейса —

originalPosition — объект jQuery, представляющий позицию CSS диалогового окна перед изменением размера.

position — объект jQuery, представляющий текущую позицию CSS диалогового окна.

originalSize — объект jQuery, представляющий размер диалога до изменения размера.

размер — объект jQuery, представляющий текущий размер диалога.

Синтаксис

Это событие срабатывает, когда начинается изменение размера диалогового окна. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — resizeStart (событие, пользовательский интерфейс)

Это событие срабатывает, когда начинается изменение размера диалогового окна. Где событие имеет тип события , и пользовательский интерфейс имеет тип объекта. Возможные значения пользовательского интерфейса —

originalPosition — объект jQuery, представляющий позицию CSS диалогового окна перед изменением размера.

position — объект jQuery, представляющий текущую позицию CSS диалогового окна.

originalSize — объект jQuery, представляющий размер диалога до изменения размера.

размер — объект jQuery, представляющий текущий размер диалога.

Синтаксис

Это событие вызывается, когда изменение размера диалогового окна завершается. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — resizeStop (событие, пользовательский интерфейс)

Это событие вызывается, когда изменение размера диалогового окна завершается. Где событие имеет тип события , и пользовательский интерфейс имеет тип объекта. Возможные значения пользовательского интерфейса —

originalPosition — объект jQuery, представляющий позицию CSS диалогового окна перед изменением размера.

position — объект jQuery, представляющий текущую позицию CSS диалогового окна.

originalSize — объект jQuery, представляющий размер диалога до изменения размера.

размер — объект jQuery, представляющий текущий размер диалога.

Синтаксис

Следующие примеры демонстрируют использование событий, перечисленных в приведенной выше таблице.

Использование метода beforeClose Event

В следующем примере демонстрируется использование метода события beforeClose .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .invalid { color: red; }
         textarea {
            display: inline-block;
            width: 100%;
            margin-bottom: 10px;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-6" ).dialog({
	       autoOpen: false, 
               buttons: {
                  OK: function() {
                     $( this ).dialog( "close" );
                  }
               },
               beforeClose: function( event, ui ) {
                  if ( !$( "#terms" ).prop( "checked" ) ) {
                     event.preventDefault();
                     $( "[for = terms]" ).addClass( "invalid" );
                  }
               },
               width: 600
            });
            $( "#opener-5" ).click(function() {
               $( "#dialog-6" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "dialog-6">
         <p>You must accept these terms before continuing.</p>
         <textarea>This Agreement and the Request constitute the entire agreement of the 
         parties with respect to the subject matter of the Request. This Agreement shall be 
         governed by and construed in accordance with the laws of the State, without giving 
         effect to principles of conflicts of law.</textarea>
         <div>
            <label for = "terms">I accept the terms</label>
            <input type = "checkbox" id = "terms">
         </div>
      </div>
      <button id = "opener-5">Open Dialog</button>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле dialogexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод:

Использование метода изменения размера события

В следующем примере демонстрируется использование метода события resize .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-7" ).dialog({
               autoOpen: false, 
               resize: function( event, ui ) {
                  $( this ).dialog( "option", "title",
	         ui.size.height + " x " + ui.size.width );
               }
            });
            $( "#opener-6" ).click(function() {
               $( "#dialog-7" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "dialog-7" title = "Dialog Title goes here..."
         >Resize this dialog to see the dialog co-ordinates in the title!</div>
      <button id = "opener-6">Open Dialog</button>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле dialogexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод:

Точки расширения