JqueryUI - Finestra di dialogo

Le finestre di dialogo sono uno dei modi piacevoli per presentare le informazioni su una pagina HTML. Una finestra di dialogo è una finestra mobile con un titolo e un'area del contenuto. Questa finestra può essere spostata, ridimensionata e, naturalmente, chiusa utilizzando l'icona "X" per impostazione predefinita.

jQueryUI fornisce dialog() metodo che trasforma il codice HTML scritto sulla pagina in codice HTML per visualizzare una finestra di dialogo.

Sintassi

Il dialog() metodo può essere utilizzato in due forme:

$ (selettore, contesto) .dialog (opzioni) Metodo

Il metodo dialog (opzioni) dichiara che un elemento HTML può essere amministrato sotto forma di una finestra di dialogo. Il parametro options è un oggetto che specifica l'aspetto e il comportamento di quella finestra.

Sintassi

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

Puoi fornire una o più opzioni alla volta utilizzando l'oggetto Javascript. Se ci sono più opzioni da fornire, le separerai usando una virgola come segue:

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

La tabella seguente elenca le diverse opzioni che possono essere utilizzate con questo metodo:

Sr.No. Opzione e descrizione
1 appendTo

Se questa opzione è impostata su false, impedirà il ui-draggableclasse dall'essere aggiunta all'elenco degli elementi DOM selezionati. Per impostazione predefinita, il suo valore ètrue.

Option - appendTo

Questa opzione viene utilizzata per aggiungere la finestra di dialogo all'elemento specificato. Per impostazione predefinita, il suo valore è"body".

Syntax

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

Questa opzione, a meno che non sia impostata su false , la finestra di dialogo viene aperta al momento della creazione. Se false , la finestra di dialogo verrà aperta alla chiamata a dialog ("open"). Per impostazione predefinita, il suo valore ètrue.

Option - autoOpen

Questa opzione, a meno che non sia impostata su false , la finestra di dialogo viene aperta al momento della creazione. Se false , la finestra di dialogo verrà aperta alla chiamata a dialog ("open"). Per impostazione predefinita, il suo valore ètrue.

Syntax

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

Questa opzione aggiunge pulsanti nella finestra di dialogo. Questi sono elencati come oggetti e ogni proprietà è il testo sul pulsante. Il valore è una funzione di callback chiamata quando l'utente fa clic sul pulsante. Per impostazione predefinita, il suo valore è{}.

Option - buttons

Questa opzione aggiunge pulsanti nella finestra di dialogo. Questi sono elencati come oggetti e ogni proprietà è il testo sul pulsante. Il valore è una funzione di callback chiamata quando l'utente fa clic sul pulsante. Per impostazione predefinita, il suo valore è{}.

Questo gestore viene richiamato con un contesto di funzione dell'elemento della finestra di dialogo e viene passata all'istanza dell'evento con il pulsante impostato come proprietà di destinazione. Se omesso, non viene creato alcun pulsante per la finestra di dialogo.

Syntax

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

A meno che questa opzione non sia impostata su false , la finestra di dialogo verrà chiusa quando l'utente preme il tasto Esc mentre la finestra di dialogo è attiva. Per impostazione predefinita, il suo valore ètrue.

Option - closeOnEscape

A meno che questa opzione non sia impostata su false , la finestra di dialogo verrà chiusa quando l'utente preme il tasto Esc mentre la finestra di dialogo è attiva. Per impostazione predefinita, il suo valore ètrue.

Syntax

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

Questa opzione contiene il testo per sostituire il valore predefinito di Chiudi per il pulsante di chiusura. Per impostazione predefinita, il suo valore è"close".

Option - closeText

Questa opzione contiene il testo per sostituire il valore predefinito di Chiudi per il pulsante di chiusura. Per impostazione predefinita, il suo valore è"close".

Syntax

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

Se questa opzione è impostata su false, impedirà il ui-draggableclasse dall'essere aggiunta all'elenco degli elementi DOM selezionati. Per impostazione predefinita, il suo valore è"".

Option - dialogClass

Se questa opzione è impostata su false, impedirà il ui-draggableclasse dall'essere aggiunta all'elenco degli elementi DOM selezionati. Per impostazione predefinita, il suo valore è"".

Syntax

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

A meno che tu non abbia questa opzione false, la finestra di dialogo sarà trascinabile facendo clic e trascinando la barra del titolo. Per impostazione predefinita, il suo valore ètrue.

Option - draggable

A meno che tu non abbia questa opzione false, la finestra di dialogo sarà trascinabile facendo clic e trascinando la barra del titolo. Per impostazione predefinita, il suo valore ètrue.

Syntax

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

Questa opzione imposta l'altezza della finestra di dialogo. Per impostazione predefinita, il suo valore è"auto".

Option - height

Se questa opzione imposta l'altezza della finestra di dialogo. Per impostazione predefinita, il suo valore è"auto". Questa opzione può essere di tipo -

Questo può essere di tipo -

  • Number - Specifica la durata in millisecondi

  • String- L'unico valore di stringa supportato è auto che consentirà di regolare l'altezza della finestra di dialogo in base al suo contenuto.

Syntax

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

Questa opzione viene utilizzata per impostare l'effetto da utilizzare alla chiusura della finestra di dialogo. Per impostazione predefinita, il suo valore ènull.

Option - hide

Questa opzione viene utilizzata per impostare l'effetto da utilizzare alla chiusura della finestra di dialogo. Per impostazione predefinita, il suo valore ènull.

Questo può essere di tipo -

  • Boolean- I valori potrebbero essere vero / falso . Se false non verrà utilizzata alcuna animazione e la finestra di dialogo verrà nascosta immediatamente. Se true , la finestra di dialogo si dissolverà con la durata predefinita e l'andamento predefinito.

  • Number - La finestra di dialogo si dissolverà con la durata specificata e l'andamento predefinito.

  • String- La finestra di dialogo verrà nascosta utilizzando l'effetto specificato come slideUp , fold .

  • Object- Se il valore è un oggetto, è possibile fornire le proprietà effetto, ritardo, durata e andamento per nascondere la finestra di dialogo.

    10

Syntax

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

Questa opzione imposta l'altezza massima, in pixel, alla quale è possibile ridimensionare la finestra di dialogo. Per impostazione predefinita, il suo valore èfalse.

Option - maxHeight

Questa opzione imposta l'altezza massima, in pixel, alla quale è possibile ridimensionare la finestra di dialogo. Per impostazione predefinita, il suo valore èfalse.

Syntax

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

Questa opzione imposta la larghezza massima alla quale la finestra di dialogo può essere ridimensionata, in pixel. Per impostazione predefinita, il suo valore èfalse.

Option - maxWidth

Questa opzione imposta la larghezza massima alla quale la finestra di dialogo può essere ridimensionata, in pixel. Per impostazione predefinita, il suo valore èfalse.

Syntax

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

Questa opzione è l'altezza minima, in pixel, alla quale è possibile ridimensionare la finestra di dialogo. Per impostazione predefinita, il suo valore è150.

Option - minHeight

Questa opzione è l'altezza minima, in pixel, alla quale è possibile ridimensionare la finestra di dialogo. Per impostazione predefinita, il suo valore è150.

Syntax

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

Questa opzione è la larghezza minima, in pixel, alla quale è possibile ridimensionare la finestra di dialogo. Per impostazione predefinita, il suo valore è150.

Option - minWidth

Questa opzione è la larghezza minima, in pixel, alla quale è possibile ridimensionare la finestra di dialogo. Per impostazione predefinita, il suo valore è150.

Syntax

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

Se questa opzione è impostata su true, la finestra di dialogo avrà un comportamento modale; altri elementi della pagina verranno disabilitati, ovvero non sarà possibile interagire con. Le finestre di dialogo modali creano una sovrapposizione sotto la finestra di dialogo ma sopra gli altri elementi della pagina. Per impostazione predefinita, il suo valore èfalse.

Option - modal

Se questa opzione è impostata su true, la finestra di dialogo avrà un comportamento modale; altri elementi della pagina verranno disabilitati, ovvero non sarà possibile interagire con. Le finestre di dialogo modali creano una sovrapposizione sotto la finestra di dialogo ma sopra gli altri elementi della pagina. Per impostazione predefinita, il suo valore èfalse.

Syntax

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

Questa opzione specifica la posizione iniziale della finestra di dialogo. Può essere una delle posizioni predefinite: centro (impostazione predefinita), sinistra, destra, in alto o in basso . Può anche essere un array di 2 elementi con i valori sinistro e superiore (in pixel) come [left, top] o posizioni del testo come ['right', 'top']. Per impostazione predefinita, il suo valore è{ my: "center", at: "center", of: window }.

Option - position

Questa opzione specifica la posizione iniziale della finestra di dialogo. Può essere una delle posizioni predefinite: centro (impostazione predefinita), sinistra, destra, in alto o in basso . Può anche essere un array di 2 elementi con i valori sinistro e superiore (in pixel) come [left, top] o posizioni del testo come ['right', 'top']. Per impostazione predefinita, il suo valore è{ my: "center", at: "center", of: window }.

Syntax

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

Questa opzione a meno che non sia impostata su false, la finestra di dialogo è ridimensionabile in tutte le direzioni. Per impostazione predefinita, il suo valore ètrue.

Option - resizable

Questa opzione a meno che non sia impostata su false, la finestra di dialogo è ridimensionabile in tutte le direzioni. Per impostazione predefinita, il suo valore ètrue.

Syntax

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

Questa opzione è un effetto da utilizzare quando viene aperta la finestra di dialogo. Per impostazione predefinita, il suo valore ènull.

Option - show

Questa opzione è un effetto da utilizzare quando viene aperta la finestra di dialogo. Per impostazione predefinita, il suo valore ènull.

Questo può essere di tipo -

  • Boolean- I valori potrebbero essere vero / falso . Se false non verrà utilizzata alcuna animazione e la finestra di dialogo verrà visualizzata immediatamente. Se true , la finestra di dialogo si aprirà con la durata predefinita e l'andamento predefinito.

  • Number - La finestra di dialogo si aprirà con la durata specificata e l'andamento predefinito.

  • String- La finestra di dialogo verrà visualizzata utilizzando l'effetto specificato come slideDown , fold .

  • Object- Se il valore è un oggetto, possono essere fornite le proprietà effetto, ritardo, durata e andamento per mostrare la finestra di dialogo.

    19

Syntax

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

Questa opzione specifica il testo da visualizzare nella barra del titolo della finestra di dialogo. Per impostazione predefinita, il suo valore ènull.

Option - title

Questa opzione specifica il testo da visualizzare nella barra del titolo della finestra di dialogo. Per impostazione predefinita, il suo valore ènull.

Syntax

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

Questa opzione specifica la larghezza della finestra di dialogo in pixel. Per impostazione predefinita, il suo valore è300.

Option - width

Questa opzione specifica la larghezza della finestra di dialogo in pixel. Per impostazione predefinita, il suo valore è300.

Syntax

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

La sezione seguente mostrerà alcuni esempi di funzionamento della funzionalità di dialogo.

Funzionalità predefinita

L'esempio seguente mostra un semplice esempio di funzionalità di dialogo che non passa parametri al file dialog() metodo.

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

Salviamo il codice sopra in un file HTML dialogexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Uso di pulsanti, titolo e posizione

Il seguente esempio dimostra l'utilizzo di tre opzioni buttons, title e position nel widget di dialogo di 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>

Salviamo il codice sopra in un file HTML dialogexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Uso di pelle, spettacolo e altezza

Il seguente esempio dimostra l'utilizzo di tre opzioni hide, show e height nel widget di dialogo di 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>

Salviamo il codice sopra in un file HTML dialogexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Uso di Modal

Il seguente esempio dimostra l'utilizzo di tre opzioni buttons, title e position nel widget di dialogo di 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>

Salviamo il codice sopra in un file HTML dialogexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

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

Il metodo dialog (action, params) può eseguire un'azione sulla finestra di dialogo, come la chiusura della finestra. Ilaction è specificato come una stringa nel primo argomento e, facoltativamente, uno o più params può essere fornito in base all'azione data.

Fondamentalmente, qui le azioni non sono altro che metodi jQuery che possiamo usare sotto forma di stringa.

Sintassi

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

La tabella seguente elenca le azioni per questo metodo:

Sr.No. Azione e descrizione
1 vicino()

Questa azione chiude la finestra di dialogo. Questo metodo non accetta argomenti.

Action - close()

Questa azione chiude la finestra di dialogo. Questo metodo non accetta argomenti.

Syntax

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

Questa azione rimuove la finestra di dialogo correttamente. Questo riporterà l'elemento al suo stato pre-inizializzazione. Questo metodo non accetta argomenti.

Action - destroy()

Questa azione rimuove la finestra di dialogo correttamente. Questo riporterà l'elemento al suo stato pre-inizializzazione. Questo metodo non accetta argomenti.

Syntax

$(".selector").dialog("destroy");
3 è aperto()

Questa azione controlla se la finestra di dialogo è aperta. Questo metodo non accetta argomenti.

Action - isOpen()

Questa azione controlla se la finestra di dialogo è aperta. Questo metodo non accetta argomenti.

Syntax

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

Questa azione posiziona le finestre di dialogo corrispondenti in primo piano (sopra le altre). Questo metodo non accetta argomenti.

Action - moveToTop()

Questa azione posiziona le finestre di dialogo corrispondenti in primo piano (sopra le altre). Questo metodo non accetta argomenti.

Syntax

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

Questa azione apre la finestra di dialogo. Questo metodo non accetta argomenti.

Action - open()

Questa azione apre la finestra di dialogo. Questo metodo non accetta argomenti.

Syntax

$(".selector").dialog("open");
6 opzione (optionName)

Questa azione ottiene il valore attualmente associato con optionName specificato. Dove optionName è il nome dell'opzione da ottenere.

Action - option( optionName )

Questa azione ottiene il valore attualmente associato con optionName specificato. Dove optionName è il nome dell'opzione da ottenere.

Syntax

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

Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni di dialogo corrente. Questo metodo non accetta argomenti.

Action - option()

Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni di dialogo corrente. Questo metodo non accetta argomenti.

Syntax

var options = $( ".selector" ).dialog( "option" );
8 opzione (optionName, value)

Questa azione imposta il valore dell'opzione di dialogo associata all'opzione optionName specificato.

Action - option( optionName, value )

Questa azione imposta il valore dell'opzione di dialogo associata all'opzione optionName specificato.

Syntax

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

Questa azione imposta una o più opzioni per la finestra di dialogo.

Action - option( options )

Questa azione imposta una o più opzioni per la finestra di dialogo.

Syntax

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

Questa azione restituisce l'elemento widget della finestra di dialogo; l'elemento annotato con il nome della classe ui-dialog. Questo metodo non accetta argomenti.

Action - widget()

Questa azione restituisce l'elemento widget della finestra di dialogo; l'elemento annotato con il nome della classe ui-dialog. Questo metodo non accetta argomenti.

Syntax

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

Esempio

Vediamo ora un esempio usando le azioni della tabella sopra. L'esempio seguente mostra l'uso dei metodi isOpen () , open () e 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>

Salviamo il codice sopra in un file HTML dialogexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output:

Gestione eventi nella finestra di dialogo

Oltre al metodo dialog (opzioni) che abbiamo visto nelle sezioni precedenti, JqueryUI fornisce metodi evento che vengono attivati ​​per un particolare evento. Questi metodi di evento sono elencati di seguito:

Sr.No. Metodo e descrizione dell'evento
1 beforeClose (evento, ui)

Questo evento viene attivato quando la finestra di dialogo sta per chiudersi. La restituzione di false impedisce la chiusura della finestra di dialogo. È utile per le finestre di dialogo con moduli che non superano la convalida. Dove event è di tipo Event e ui è di tipo Object .

Event - beforeClose(event, ui)

Questo evento viene attivato quando la finestra di dialogo sta per chiudersi. La restituzione di false impedisce la chiusura della finestra di dialogo. È utile per le finestre di dialogo con moduli che non superano la convalida. Dove event è di tipo Event e ui è di tipo Object .

Syntax

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

Questo evento viene attivato alla chiusura della finestra di dialogo. Dove event è di tipo Event e ui è di tipo Object .

Event - close(event, ui)

Questo evento viene attivato alla chiusura della finestra di dialogo. Dove event è di tipo Event e ui è di tipo Object .

Syntax

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

Questo evento viene attivato quando viene creata la finestra di dialogo. Dove event è di tipo Event e ui è di tipo Object .

Event - create(event, ui)

Questo evento viene attivato quando viene creata la finestra di dialogo. Dove event è di tipo Event e ui è di tipo Object .

Syntax

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

Questo evento viene attivato ripetutamente quando una finestra di dialogo viene spostata durante un trascinamento. Dove event è di tipo Event e ui è di tipo Object .

Event - drag(event, ui)

Questo evento viene attivato ripetutamente quando una finestra di dialogo viene spostata durante un trascinamento. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • position - Un oggetto jQuery che rappresenta la posizione CSS corrente della finestra di dialogo.

  • offset - Un oggetto jQuery che rappresenta la posizione di offset corrente della finestra di dialogo.

Syntax

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

Questo evento viene attivato quando inizia un riposizionamento della finestra di dialogo trascinando la barra del titolo. Dove event è di tipo Event e ui è di tipo Object .

Event - dragStart(event, ui)

Questo evento viene attivato quando inizia un riposizionamento della finestra di dialogo trascinando la barra del titolo. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • position - Un oggetto jQuery che rappresenta la posizione CSS corrente della finestra di dialogo.

  • offset - Un oggetto jQuery che rappresenta la posizione di offset corrente della finestra di dialogo.

Syntax

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

Questo evento viene attivato quando termina un'operazione di trascinamento. Dove event è di tipo Event e ui è di tipo Object .

Event - dragStop(event, ui)

Questo evento viene attivato quando termina un'operazione di trascinamento. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • position - Un oggetto jQuery che rappresenta la posizione CSS corrente della finestra di dialogo.

  • offset - Un oggetto jQuery che rappresenta la posizione di offset corrente della finestra di dialogo.

Syntax

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

Questo evento viene attivato quando il dialogo diventa attivo. Dove event è di tipo Event e ui è di tipo Object .

Event - focus(event, ui)

Questo evento viene attivato quando il dialogo diventa attivo. Dove event è di tipo Event e ui è di tipo Object .

Syntax

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

Questo evento viene attivato all'apertura della finestra di dialogo. Dove event è di tipo Event e ui è di tipo Object .

Event - open(event, ui)

Questo evento viene attivato all'apertura della finestra di dialogo. Dove event è di tipo Event e ui è di tipo Object .

Syntax

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

Questo evento viene attivato ripetutamente quando una finestra di dialogo viene ridimensionata. Dove event è di tipo Event e ui è di tipo Object .

Event - resize(event, ui)

Questo evento viene attivato ripetutamente quando una finestra di dialogo viene ridimensionata. Dove event è di tipo Event e ui è di tipo Object. I valori possibili di ui sono:

  • originalPosition - Un oggetto jQuery che rappresenta la posizione CSS della finestra di dialogo prima del ridimensionamento.

  • position - Un oggetto jQuery che rappresenta la posizione CSS corrente della finestra di dialogo.

  • originalSize - Un oggetto jQuery che rappresenta la dimensione della finestra di dialogo prima del ridimensionamento.

  • size - Un oggetto jQuery che rappresenta la dimensione corrente della finestra di dialogo.

Syntax

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

Questo evento viene attivato quando inizia un ridimensionamento della finestra di dialogo. Dove event è di tipo Event e ui è di tipo Object .

Event - resizeStart(event, ui)

Questo evento viene attivato quando inizia un ridimensionamento della finestra di dialogo. Dove event è di tipo Event e ui è di tipo Object. I valori possibili di ui sono:

  • originalPosition - Un oggetto jQuery che rappresenta la posizione CSS della finestra di dialogo prima del ridimensionamento.

  • position - Un oggetto jQuery che rappresenta la posizione CSS corrente della finestra di dialogo.

  • originalSize - Un oggetto jQuery che rappresenta la dimensione della finestra di dialogo prima del ridimensionamento.

  • size - Un oggetto jQuery che rappresenta la dimensione corrente della finestra di dialogo.

Syntax

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

Questo evento viene attivato quando termina un ridimensionamento della finestra di dialogo. Dove event è di tipo Event e ui è di tipo Object .

Event - resizeStop(event, ui)

Questo evento viene attivato quando termina un ridimensionamento della finestra di dialogo. Dove event è di tipo Event e ui è di tipo Object. I valori possibili di ui sono:

  • originalPosition - Un oggetto jQuery che rappresenta la posizione CSS della finestra di dialogo prima del ridimensionamento.

  • position - Un oggetto jQuery che rappresenta la posizione CSS corrente della finestra di dialogo.

  • originalSize - Un oggetto jQuery che rappresenta la dimensione della finestra di dialogo prima del ridimensionamento.

  • size - Un oggetto jQuery che rappresenta la dimensione corrente della finestra di dialogo.

Syntax

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

I seguenti esempi dimostrano l'uso degli eventi elencati nella tabella precedente.

Uso del metodo beforeClose Event

Il seguente esempio dimostra l'uso di beforeClose metodo dell'evento.

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

Salviamo il codice sopra in un file HTML dialogexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output:

Uso del metodo Resize Event

Il seguente esempio dimostra l'uso di resize metodo dell'evento.

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

Salviamo il codice sopra in un file HTML dialogexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output:

Punti di estensione

Il widget di dialogo è costruito con la fabbrica di widget e può essere esteso. Per estendere i widget, possiamo sovrascrivere o aggiungere al comportamento dei metodi esistenti. Il seguente metodo fornisce come punto di estensione la stessa stabilità API dei metodi di dialogo. Elencato nella tabella sopra .

Sr.No. Metodo e descrizione
1 _allowInteraction (evento)

Questo metodo consente all'utente di interagire con un determinato elemento di destinazione inserendo nella whitelist elementi che non sono figli della finestra di dialogo ma che gli utenti possono utilizzare. Dove l' evento è di tipo Evento .

Extension Point - allowInteraction(event, ui)

Questo metodo consente all'utente di interagire con un determinato elemento di destinazione inserendo nella whitelist elementi che non sono figli della finestra di dialogo ma che gli utenti possono utilizzare. Dove l' evento è di tipo Evento .

Code Example

_allowInteraction: function( event ) {
  return !!$( event.target ).is( ".select2-input" ) || this._super( event );
}

  • Il plugin Select2 viene utilizzato nelle finestre di dialogo modali

  • La chiamata super () assicura che gli elementi all'interno della finestra di dialogo possano ancora essere interagiti con.
JQuery UI Widget Factory è una base estensibile su cui sono costruiti tutti i widget di jQuery UI. L'utilizzo della fabbrica di widget per creare un plug-in offre comodità per la gestione dello stato, nonché convenzioni per attività comuni come l'esposizione dei metodi del plug-in e la modifica delle opzioni dopo l'istanza.