JqueryUI - Dialogue

Les boîtes de dialogue sont l'un des moyens les plus intéressants de présenter des informations sur une page HTML. Une boîte de dialogue est une fenêtre flottante avec un titre et une zone de contenu. Cette fenêtre peut être déplacée, redimensionnée et bien sûr fermée en utilisant l'icône "X" par défaut.

jQueryUI fournit dialog() méthode qui transforme le code HTML écrit sur la page en code HTML pour afficher une boîte de dialogue.

Syntaxe

le dialog() La méthode peut être utilisée sous deux formes -

$ (selector, context) .dialog (options), méthode
$ (selector, context) .dialog ("action", [params]), méthode

$ (selector, context) .dialog (options), méthode

La méthode dialog (options) déclare qu'un élément HTML peut être administré sous la forme d'une boîte de dialogue. Le paramètre options est un objet qui spécifie l'apparence et le comportement de cette fenêtre.

Syntaxe

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

Vous pouvez fournir une ou plusieurs options à la fois en utilisant un objet Javascript. S'il y a plus d'une option à fournir, vous les séparerez en utilisant une virgule comme suit -

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

Le tableau suivant répertorie les différentes options pouvant être utilisées avec cette méthode -

N ° Sr.	Option et description
1	ajouter à Si cette option est définie sur false, cela empêchera le ui-draggableclasse d'être ajoutée dans la liste des éléments DOM sélectionnés. Par défaut, sa valeur esttrue. Option - appendTo Cette option est utilisée pour ajouter une boîte de dialogue à l'élément spécifié. Par défaut, sa valeur est"body". Syntax `$(".selector").dialog( { appendTo: "#identifier" } );`
2	autoOpen Cette option, sauf si elle est définie sur false , la boîte de dialogue s'ouvre lors de la création. Lorsque la valeur est false , la boîte de dialogue sera ouverte lors d'un appel à dialog («open»). Par défaut, sa valeur esttrue. Option - autoOpen Cette option, sauf si elle est définie sur false , la boîte de dialogue s'ouvre lors de la création. Lorsque la valeur est false , la boîte de dialogue sera ouverte lors d'un appel à dialog («open»). Par défaut, sa valeur esttrue. Syntax `$(".selector").dialog( { autoOpen: false } );`
3	boutons Cette option ajoute des boutons dans la boîte de dialogue. Ceux-ci sont répertoriés comme des objets et chaque propriété est le texte du bouton. La valeur est une fonction de rappel appelée lorsque l'utilisateur clique sur le bouton. Par défaut, sa valeur est{}. Option - buttons Cette option ajoute des boutons dans la boîte de dialogue. Ceux-ci sont répertoriés comme des objets et chaque propriété est le texte du bouton. La valeur est une fonction de rappel appelée lorsque l'utilisateur clique sur le bouton. Par défaut, sa valeur est{}. Ce gestionnaire est appelé avec un contexte de fonction de l'élément de boîte de dialogue et reçoit l'instance d'événement avec le bouton défini comme propriété cible. S'il est omis, aucun bouton n'est créé pour la boîte de dialogue. Syntax `$(".selector").dialog( { buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] } );`
4	closeOnEscape À moins que cette option soit définie sur false , la boîte de dialogue se ferme lorsque l'utilisateur appuie sur la touche Échap alors que la boîte de dialogue a le focus. Par défaut, sa valeur esttrue. Option - closeOnEscape À moins que cette option soit définie sur false , la boîte de dialogue se ferme lorsque l'utilisateur appuie sur la touche Échap alors que la boîte de dialogue a le focus. Par défaut, sa valeur esttrue. Syntax `$(".selector").dialog( { closeOnEscape: false } );`
5	closeText Cette option contient du texte pour remplacer la valeur par défaut de Fermer pour le bouton de fermeture. Par défaut, sa valeur est"close". Option - closeText Cette option contient du texte pour remplacer la valeur par défaut de Fermer pour le bouton de fermeture. Par défaut, sa valeur est"close". Syntax `$(".selector").dialog( { closeText: "hide" } );`
6	dialogClass Si cette option est définie sur false, cela empêchera le ui-draggableclasse d'être ajoutée dans la liste des éléments DOM sélectionnés. Par défaut, sa valeur est"". Option - dialogClass Si cette option est définie sur false, cela empêchera le ui-draggableclasse d'être ajoutée dans la liste des éléments DOM sélectionnés. Par défaut, sa valeur est"". Syntax `$(".selector").dialog( { dialogClass: "alert" } );`
sept	traînable À moins que vous ne puissiez false, la boîte de dialogue sera déplaçable en cliquant et en faisant glisser la barre de titre. Par défaut, sa valeur esttrue. Option - draggable À moins que vous ne puissiez false, la boîte de dialogue sera déplaçable en cliquant et en faisant glisser la barre de titre. Par défaut, sa valeur esttrue. Syntax `$(".selector").dialog( { draggable: false } );`
8	la taille Cette option définit la hauteur de la boîte de dialogue. Par défaut, sa valeur est"auto". Option - height Si cette option définit la hauteur de la boîte de dialogue. Par défaut, sa valeur est"auto". Cette option peut être de type - Cela peut être de type - Number - Ceci spécifie la durée en millisecondes String- La seule valeur de chaîne prise en charge est auto, ce qui permettra à la hauteur de la boîte de dialogue de s'ajuster en fonction de son contenu. Syntax `$(".selector").dialog( { height: 400 } );`
9	cacher Cette option est utilisée pour définir l'effet à utiliser lorsque la boîte de dialogue est fermée. Par défaut, sa valeur estnull. Option - hide Cette option est utilisée pour définir l'effet à utiliser lorsque la boîte de dialogue est fermée. Par défaut, sa valeur estnull. Cela peut être de type - Boolean- Les valeurs peuvent être true / false . Si faux, aucune animation ne sera utilisée et la boîte de dialogue sera immédiatement masquée. Si true , la boîte de dialogue disparaîtra avec la durée par défaut et l'accélération par défaut. Number - La boîte de dialogue disparaîtra avec la durée spécifiée et l'accélération par défaut. String- La boîte de dialogue sera masquée en utilisant l'effet spécifié tel que slideUp , fold . Object- Si la valeur est un objet, des propriétés d' effet, de retard, de durée et d' accélération peuvent être fournies pour masquer la boîte de dialogue. dix Syntax `$(".selector").dialog( { hide: { effect: "explode", duration: 1000 } } );`
11	hauteur maximum Cette option définit la hauteur maximale, en pixels, à laquelle la boîte de dialogue peut être redimensionnée. Par défaut, sa valeur estfalse. Option - maxHeight Cette option définit la hauteur maximale, en pixels, à laquelle la boîte de dialogue peut être redimensionnée. Par défaut, sa valeur estfalse. Syntax `$(".selector").dialog( { maxHeight: 600 } );`
12	largeur maximale Cette option définit la largeur maximale à laquelle la boîte de dialogue peut être redimensionnée, en pixels. Par défaut, sa valeur estfalse. Option - maxWidth Cette option définit la largeur maximale à laquelle la boîte de dialogue peut être redimensionnée, en pixels. Par défaut, sa valeur estfalse. Syntax `$(".selector").dialog( { maxWidth: 600 } );`
13	minHeight Cette option est la hauteur minimale, en pixels, à laquelle la boîte de dialogue peut être redimensionnée. Par défaut, sa valeur est150. Option - minHeight Cette option est la hauteur minimale, en pixels, à laquelle la boîte de dialogue peut être redimensionnée. Par défaut, sa valeur est150. Syntax `$(".selector").dialog( { minHeight: 200 } );`
14	minWidth Cette option est la largeur minimale, en pixels, à laquelle la boîte de dialogue peut être redimensionnée. Par défaut, sa valeur est150. Option - minWidth Cette option est la largeur minimale, en pixels, à laquelle la boîte de dialogue peut être redimensionnée. Par défaut, sa valeur est150. Syntax `$(".selector").dialog( { minWidth: 200 } );`
15	modal Si cette option est définie sur true, la boîte de dialogue aura un comportement modal; les autres éléments de la page seront désactivés, c'est-à-dire qu'ils ne pourront pas interagir avec. Les boîtes de dialogue modales créent une superposition sous la boîte de dialogue mais au-dessus des autres éléments de la page. Par défaut, sa valeur estfalse. Option - modal Si cette option est définie sur true, la boîte de dialogue aura un comportement modal; les autres éléments de la page seront désactivés, c'est-à-dire qu'ils ne pourront pas interagir avec. Les boîtes de dialogue modales créent une superposition sous la boîte de dialogue mais au-dessus des autres éléments de la page. Par défaut, sa valeur estfalse. Syntax `$(".selector").dialog( { modal: true } );`
16	position Cette option spécifie la position initiale de la boîte de dialogue. Il peut s'agir de l'une des positions prédéfinies: centre (par défaut), gauche, droite, haut ou bas . Peut également être un tableau à 2 éléments avec les valeurs gauche et supérieure (en pixels) comme [gauche, haut], ou des positions de texte telles que ['droite', 'haut']. Par défaut, sa valeur est{ my: "center", at: "center", of: window }. Option - position Cette option spécifie la position initiale de la boîte de dialogue. Il peut s'agir de l'une des positions prédéfinies: centre (par défaut), gauche, droite, haut ou bas . Peut également être un tableau à 2 éléments avec les valeurs gauche et supérieure (en pixels) comme [gauche, haut], ou des positions de texte telles que ['droite', 'haut']. Par défaut, sa valeur est{ my: "center", at: "center", of: window }. Syntax `$(".selector").dialog( { position: { my: "left top", at: "left bottom", of: button } } );`
17	redimensionnable Cette option sauf si elle est définie sur false, la boîte de dialogue est redimensionnable dans toutes les directions. Par défaut, sa valeur esttrue. Option - resizable Cette option sauf si elle est définie sur false, la boîte de dialogue est redimensionnable dans toutes les directions. Par défaut, sa valeur esttrue. Syntax `$(".selector").dialog( { resizable: false } );`
18	spectacle Cette option est un effet à utiliser lors de l'ouverture de la boîte de dialogue. Par défaut, sa valeur estnull. Option - show Cette option est un effet à utiliser lors de l'ouverture de la boîte de dialogue. Par défaut, sa valeur estnull. Cela peut être de type - Boolean- Les valeurs peuvent être true / false . Si false, aucune animation ne sera utilisée et la boîte de dialogue sera affichée immédiatement. Si c'est vrai , la boîte de dialogue s'affichera avec la durée par défaut et l'accélération par défaut. Number - La boîte de dialogue s'affichera avec la durée spécifiée et l'accélération par défaut. String- La boîte de dialogue sera affichée en utilisant l'effet spécifié tel que slideDown , fold . Object- Si la valeur est un objet, des propriétés d' effet, de retard, de durée et d' accélération peuvent être fournies pour afficher la boîte de dialogue. 19 Syntax `$(".selector").dialog( { show: { effect: "blind", duration: 800 } } );`
20	Titre Cette option spécifie le texte à afficher dans la barre de titre de la boîte de dialogue. Par défaut, sa valeur estnull. Option - title Cette option spécifie le texte à afficher dans la barre de titre de la boîte de dialogue. Par défaut, sa valeur estnull. Syntax `$(".selector").dialog( { title: "Dialog Title" } );`
21	largeur Cette option spécifie la largeur de la boîte de dialogue en pixels. Par défaut, sa valeur est300. Option - width Cette option spécifie la largeur de la boîte de dialogue en pixels. Par défaut, sa valeur est300. Syntax `$(".selector").dialog( { width: 500 } );`

La section suivante vous montrera quelques exemples fonctionnels de fonctionnalités de dialogue.

Fonctionnalité par défaut

L'exemple suivant montre un exemple simple de fonctionnalité de dialogue ne transmettant aucun paramètre au dialog() méthode.

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

Sauvegardons le code ci-dessus dans un fichier HTML dialogexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Utilisation des boutons, du titre et de la position

L'exemple suivant illustre l'utilisation de trois options buttons, title et position dans le widget de dialogue de 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>

Utilisation de la peau, du spectacle et de la hauteur

L'exemple suivant illustre l'utilisation de trois options hide, show et height dans le widget de dialogue de 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>

Utilisation du modal

L'exemple suivant illustre l'utilisation de trois options buttons, title et position dans le widget de dialogue de 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>

$ (selector, context) .dialog ("action", [params]), méthode

La méthode dialog (action, params) peut effectuer une action sur la boîte de dialogue, telle que la fermeture de la boîte. leaction est spécifié sous forme de chaîne dans le premier argument et éventuellement, un ou plusieurs params peut être fourni en fonction de l'action donnée.

En gros, ici les actions ne sont rien mais ce sont des méthodes jQuery que nous pouvons utiliser sous forme de chaîne.

Syntaxe

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

Le tableau suivant répertorie les actions pour cette méthode -

N ° Sr.	Action et description
1	Fermer() Cette action ferme la boîte de dialogue. Cette méthode n'accepte aucun argument. Action - close() Cette action ferme la boîte de dialogue. Cette méthode n'accepte aucun argument. Syntax `$(".selector").dialog("close");`
2	détruire() Cette action supprime la boîte de dialogue en concurrence. Cela ramènera l'élément à son état pré-init. Cette méthode n'accepte aucun argument. Action - destroy() Cette action supprime la boîte de dialogue en concurrence. Cela ramènera l'élément à son état pré-init. Cette méthode n'accepte aucun argument. Syntax `$(".selector").dialog("destroy");`
3	est ouvert() Cette action vérifie si la boîte de dialogue est ouverte. Cette méthode n'accepte aucun argument. Action - isOpen() Cette action vérifie si la boîte de dialogue est ouverte. Cette méthode n'accepte aucun argument. Syntax `$(".selector").dialog("isOpen");`
4	moveToTop () Cette action place les boîtes de dialogue correspondantes au premier plan (au-dessus des autres). Cette méthode n'accepte aucun argument. Action - moveToTop() Cette action place les boîtes de dialogue correspondantes au premier plan (au-dessus des autres). Cette méthode n'accepte aucun argument. Syntax `$(".selector").dialog("moveToTop");`
5	ouvert() Cette action ouvre la boîte de dialogue. Cette méthode n'accepte aucun argument. Action - open() Cette action ouvre la boîte de dialogue. Cette méthode n'accepte aucun argument. Syntax `$(".selector").dialog("open");`
6	option (optionName) Cette action obtient la valeur actuellement associée au nom d'option spécifié. Où optionName est le nom de l'option à obtenir. Action - option( optionName ) Cette action obtient la valeur actuellement associée au nom d'option spécifié. Où optionName est le nom de l'option à obtenir. Syntax `var isDisabled = $( ".selector" ).dialog( "option", "disabled" );`
sept	option() Cette action obtient un objet contenant des paires clé / valeur représentant le hachage actuel des options de dialogue. Cette méthode n'accepte aucun argument. Action - option() Cette action obtient un objet contenant des paires clé / valeur représentant le hachage actuel des options de dialogue. Cette méthode n'accepte aucun argument. Syntax `var options = $( ".selector" ).dialog( "option" );`
8	option (optionName, valeur) Cette action définit la valeur de l'option de dialogue associée au nom d'option spécifié. Action - option( optionName, value ) Cette action définit la valeur de l'option de dialogue associée au nom d'option spécifié. Syntax `$(".selector").dialog( "option", "disabled", true );`
9	option (options) Cette action définit une ou plusieurs options pour la boîte de dialogue. Action - option( options ) Cette action définit une ou plusieurs options pour la boîte de dialogue. Syntax `$(".selector").dialog( "option", { disabled: true });`
dix	widget () Cette action renvoie l'élément widget de la boîte de dialogue; l'élément annoté avec le nom de la classe ui-dialog. Cette méthode n'accepte aucun argument. Action - widget() Cette action renvoie l'élément widget de la boîte de dialogue; l'élément annoté avec le nom de la classe ui-dialog. Cette méthode n'accepte aucun argument. Syntax `$(".selector").dialog("widget");`

Exemple

Voyons maintenant un exemple utilisant les actions du tableau ci-dessus. L'exemple suivant illustre l'utilisation des méthodes isOpen () , open () et 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>

Sauvegardons le code ci-dessus dans un fichier HTML dialogexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -

Gestion des événements dans la boîte de dialogue

En plus de la méthode de dialogue (options) que nous avons vue dans les sections précédentes, JqueryUI fournit des méthodes d'événement qui sont déclenchées pour un événement particulier. Ces méthodes d'événement sont répertoriées ci-dessous -

N ° Sr.	Méthode d'événement et description
1	beforeClose (événement, interface utilisateur) Cet événement est déclenché lorsque la boîte de dialogue est sur le point de se fermer. Renvoyer false empêche la boîte de dialogue de se fermer. Il est pratique pour les boîtes de dialogue avec des formulaires dont la validation échoue. Où event est de type Event et ui est de type Object . Event - beforeClose(event, ui) Cet événement est déclenché lorsque la boîte de dialogue est sur le point de se fermer. Renvoyer false empêche la boîte de dialogue de se fermer. Il est pratique pour les boîtes de dialogue avec des formulaires dont la validation échoue. Où event est de type Event et ui est de type Object . Syntax `$(".selector").dialog ( beforeClose: function(event, ui) {} );`
2	close (événement, interface utilisateur) Cet événement est déclenché lorsque la boîte de dialogue est fermée. Où event est de type Event et ui est de type Object . Event - close(event, ui) Cet événement est déclenché lorsque la boîte de dialogue est fermée. Où event est de type Event et ui est de type Object . Syntax `$(".selector").dialog ( close: function(event, ui) {} );`
3	create (événement, interface utilisateur) Cet événement est déclenché lors de la création de la boîte de dialogue. Où event est de type Event et ui est de type Object . Event - create(event, ui) Cet événement est déclenché lors de la création de la boîte de dialogue. Où event est de type Event et ui est de type Object . Syntax `$(".selector").dialog ( create: function(event, ui) {} );`
4	glisser (événement, interface utilisateur) Cet événement est déclenché à plusieurs reprises lorsqu'une boîte de dialogue est déplacée lors d'un glissement. Où event est de type Event et ui est de type Object . Event - drag(event, ui) Cet événement est déclenché à plusieurs reprises lorsqu'une boîte de dialogue est déplacée lors d'un glissement. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - position - Un objet jQuery représentant la position CSS actuelle de la boîte de dialogue. offset - Un objet jQuery représentant la position de décalage actuelle de la boîte de dialogue. Syntax `$(".selector").dialog ( drag: function(event, ui) {} );`
5	dragStart (événement, interface utilisateur) Cet événement est déclenché lorsqu'un repositionnement de la boîte de dialogue commence en faisant glisser sa barre de titre. Où event est de type Event et ui est de type Object . Event - dragStart(event, ui) Cet événement est déclenché lorsqu'un repositionnement de la boîte de dialogue commence en faisant glisser sa barre de titre. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - position - Un objet jQuery représentant la position CSS actuelle de la boîte de dialogue. offset - Un objet jQuery représentant la position de décalage actuelle de la boîte de dialogue. Syntax `$(".selector").dialog ( dragStart: function(event, ui) {} );`
6	dragStop (événement, interface utilisateur) Cet événement est déclenché lorsqu'une opération de glissement se termine. Où event est de type Event et ui est de type Object . Event - dragStop(event, ui) Cet événement est déclenché lorsqu'une opération de glissement se termine. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - position - Un objet jQuery représentant la position CSS actuelle de la boîte de dialogue. offset - Un objet jQuery représentant la position de décalage actuelle de la boîte de dialogue. Syntax `$(".selector").dialog ( dragStop: function(event, ui) {} );`
sept	focus (événement, interface utilisateur) Cet événement est déclenché lorsque la boîte de dialogue obtient le focus. Où event est de type Event et ui est de type Object . Event - focus(event, ui) Cet événement est déclenché lorsque la boîte de dialogue obtient le focus. Où event est de type Event et ui est de type Object . Syntax `$(".selector").dialog ( focus: function(event, ui) {} );`
8	open (événement, interface utilisateur) Cet événement est déclenché à l'ouverture de la boîte de dialogue. Où event est de type Event et ui est de type Object . Event - open(event, ui) Cet événement est déclenché à l'ouverture de la boîte de dialogue. Où event est de type Event et ui est de type Object . Syntax `$(".selector").dialog ( open: function(event, ui) {} );`
9	redimensionner (événement, interface utilisateur) Cet événement est déclenché à plusieurs reprises lorsqu'une boîte de dialogue est redimensionnée. Où event est de type Event et ui est de type Object . Event - resize(event, ui) Cet événement est déclenché à plusieurs reprises lorsqu'une boîte de dialogue est redimensionnée. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - originalPosition - Un objet jQuery représentant la position CSS du dialogue avant d'être redimensionné. position - Un objet jQuery représentant la position CSS actuelle de la boîte de dialogue. originalSize - Un objet jQuery représentant la taille de la boîte de dialogue avant d'être redimensionnée. size - Un objet jQuery représentant la taille actuelle de la boîte de dialogue. Syntax `$(".selector").dialog ( resize: function(event, ui) {} );`
dix	resizeStart (événement, interface utilisateur) Cet événement est déclenché lorsqu'un redimensionnement de la boîte de dialogue commence. Où event est de type Event et ui est de type Object . Event - resizeStart(event, ui) Cet événement est déclenché lorsqu'un redimensionnement de la boîte de dialogue commence. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - originalPosition - Un objet jQuery représentant la position CSS du dialogue avant d'être redimensionné. position - Un objet jQuery représentant la position CSS actuelle de la boîte de dialogue. originalSize - Un objet jQuery représentant la taille de la boîte de dialogue avant d'être redimensionnée. size - Un objet jQuery représentant la taille actuelle de la boîte de dialogue. Syntax `$(".selector").dialog ( resizeStart: function(event, ui) {} );`
11	resizeStop (événement, interface utilisateur) Cet événement est déclenché lorsqu'un redimensionnement de la boîte de dialogue se termine. Où event est de type Event et ui est de type Object . Event - resizeStop(event, ui) Cet événement est déclenché lorsqu'un redimensionnement de la boîte de dialogue se termine. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - originalPosition - Un objet jQuery représentant la position CSS du dialogue avant d'être redimensionné. position - Un objet jQuery représentant la position CSS actuelle de la boîte de dialogue. originalSize - Un objet jQuery représentant la taille de la boîte de dialogue avant d'être redimensionnée. size - Un objet jQuery représentant la taille actuelle de la boîte de dialogue. Syntax `$(".selector").dialog ( resizeStop: function(event, ui) {} );`

Les exemples suivants illustrent l'utilisation des événements répertoriés dans le tableau ci-dessus.

Utilisation de la méthode d'événement beforeClose

L'exemple suivant montre l'utilisation de beforeClose méthode d'événement.

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

Sauvegardons le code ci-dessus dans un fichier HTML dialogexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -

Utilisation de la méthode d'événement de redimensionnement

L'exemple suivant montre l'utilisation de resize méthode d'événement.

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

Sauvegardons le code ci-dessus dans un fichier HTML dialogexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -

Points d'extension

Le widget de dialogue est construit avec la fabrique de widgets et peut être étendu. Pour étendre les widgets, nous pouvons remplacer ou ajouter au comportement des méthodes existantes. La méthode suivante fournit comme point d'extension la même stabilité d'API que les méthodes de dialogue. Répertorié dans le tableau ci-dessus .

N ° Sr.	Méthode et description
1	_allowInteraction (événement) Cette méthode permet à l'utilisateur d'interagir avec un élément cible donné en mettant en liste blanche des éléments qui ne sont pas des enfants de la boîte de dialogue mais permettent aux utilisateurs de pouvoir l'utiliser. Où l' événement est de type Event . Extension Point - allowInteraction(event, ui) Cette méthode permet à l'utilisateur d'interagir avec un élément cible donné en mettant en liste blanche des éléments qui ne sont pas des enfants de la boîte de dialogue mais permettent aux utilisateurs de pouvoir l'utiliser. Où l' événement est de type Event . Code Example `_allowInteraction: function( event ) { return !!$( event.target ).is( ".select2-input" ) \|\| this._super( event ); }` Le plugin Select2 est utilisé dans les boîtes de dialogue modales L'appel super () garantit que les éléments de la boîte de dialogue peuvent toujours être utilisés.

La jQuery UI Widget Factory est une base extensible sur laquelle tous les widgets de jQuery UI sont construits. L'utilisation de la fabrique de widgets pour créer un plugin fournit des commodités pour la gestion de l'état, ainsi que des conventions pour les tâches courantes telles que l'exposition des méthodes de plugin et la modification des options après l'instanciation.