jQuery: Come creare delle finestre di dialogo personalizzate (1/2)

In questo articolo vedremo come sviluppare delle finestre di dialogo personalizzate sia nell’estetica che nelle funzionalità, andando così oltre alle limitatissime finestre messe a disposizione nativamente da javasrcipt (alert, confirm, prompt).
Lo faremo grazie a jQuery ed in particolare a dialog, un plugin appartenente alle user interface.
In questo articolo vedremo nel dettaglio questo plugin, le sue funzionalità e come utilizzarlo.
Alla fine del tutorial non avrai difficoltà a passare da una finestra di dialogo classica ad una più elaborata ed accattivante come questa.

Creare il pacchetto “custom”

Come ho già accennato in altri articoli, quando vogliamo utilizzare una user interface di jQuery, possiamo scaricare un pacchetto creato “on fly” contenente il plugin e tutte le dipendenze necessarie. Collegati allora all’area di download delle ui ed inizia a deselezionare tutto.
Ora individua il widget dialog e selezionalo, in questo modo si selezioneranno automaticamente anche le dipendenze necessarie (ui.core, ui.widget e ui.position). Seleziona anche ui.button. È una dipendenza facoltativa; se installata sostituisce i normali pulsanti con quelli delle user interface.
Ora che hai scaricato il pacchetto, possiamo procedere ad impostare la pagina.

Preparare la pagina

Crea ora la pagina dialog.html. Nell’header includi jQuery, il pacchetto custom ed il foglio di stile.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.custom.min.js"></script>
    <link href="css/jquery.custom.css" rel="stylesheet" type="text/css" />
    <title>jQuery dialog</title>
</head>
<body>

</body>
</html>

Creare la finestra di dialogo

Il primo esempio che realizzeremo é questo.
Iniziamo a definire la finestra di dialogo nel body del nostro documento, in questo modo

<div id="finestra" title="Titolo della finestra">
    <p>Contenuto della finestra</p>
</div>

Come puoi vedere, la finestra di dialogo consiste semplicemente in un div, che rappresenta il contenitore all’interno del quale possiamo scrivere il codice html che desideriamo. Nota che l’attributo title del div rappresenta il contenuto evidenziato nella parte superiore della finestra.

Dare vita alla finestra

Per rendere questa porzione di codice una finestra di dialogo, dovremo semplicemente passarla al metodo dialog, in questo modo

$(document).ready(function(){
    $('#finestra').dialog();
});

Ecco il documento completo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.custom.min.js"></script>
    <link href="css/jquery.custom.css" rel="stylesheet" type="text/css" />
    <title>jQuery dialog</title>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#finestra').dialog();
        });
    </script>
</head>
<body>
    <div id="finestra" title="Titolo della finestra">
        <p>Contenuto della finestra</p>
    </div>
</body>
</html>

Ed ora divertiamoci

Poniamo di voler realizzare questo secondo esempio. Come vedi ho aggiunto il pulsante “chiudi” ed ho reso opaco lo sfondo. Questa seconda opzione la si può ottenere settando a TRUE il parametro modal.
I bottoni vanno invece definiti tramite l’accoppiamento nome bottone -> funzione da eseguire alla pressione del bottone. Vediamo

$(document).ready(function(){
    $('#finestra').dialog({
        modal: true,
        buttons: {
            "Chiudi": function() {
                $( this ).dialog( "close" );
                }
            }
        });
    });

Come vedi faccio corrispondere al bottone “chiudi” una funzione nella quale viene applicato il metodo close alla finestra.
Possiamo definire tutti i bottoni che desideriamo ed attribuirgli le funzioni più bizzarre; vediamo questo esempio.
Scopriamo come realizzarlo.
Innanzi tutto modifica il body del documento in questo modo:

<div id="finestra" title="Titolo della finestra">
     <p>Premi su "chiudi" per <strong> chiudere la  finestra</strong> o su "scrivi ciao mondo" per scrivere nella  pagina principale la stringa "Ciao mondo"</p>
</div>
<p id="box"></p>

Come vedi ho modificato il contenuto della finestra ed ho aggiunto un paragrafo vuoto, nel quale andremo ad inserire la scritta “ciao mondo” quando sarà richiesto.
Il codice jQuery lo modificheremo invece in questo modo

$(document).ready(function(){
    $('#finestra').dialog({
        modal: true,
        buttons: {
            "Chiudi": function() {
                $( this ).dialog( "close" );
                },
            'Scrivi "Ciao Mondo"': function(){
                $('#box').html("Ciao mondo");
                    $( this ).dialog( "close" );
                    }
                }
            });
    });

La funzione relativa al bottone “scrivi ciao mondo”, prima di chiudere la finestra, va ad inserire nel paragrafo che abbiamo aggiunto la stringa “ciao mondo” tramite il metodo html.

Aprire la finestra in relazione ad un evento

Negli esempi che abbiamo visto fino ad ora la finestra si apre al caricamento della pagina. Questo in quanto il parametro autoOpen é impostato di default a TRUE. Se lo impostiamo su FALSE, la finestra non si aprirà fin tanto che non eseguiremo il metodo dialog(“open”).
Dunque potremo legare l’apertura della finestra ad un evento, per esempio il click su di un link, come in questa pagina.
Per realizzare quanto visto, inizia ad aggiungere il link nel body del documento:

<p><a href="#" id="open">Clicca questo link per aprire la finestra</a></p>

In seguito, nei parametri di dialog, aggiungi autoOpen: false.

Ed infine intercettiamo l’evento click sul link con id open, in questo modo:

$("a#open").click(function(){
     $('#finestra').dialog("open");
     return false;
});

Ed ecco la funzione completa:

$(document).ready(function(){
    $("a#open").click(function(){
        $('#finestra').dialog("open");
        return false;
    });

    $('#finestra').dialog({
        modal: true,
        autoOpen: false,
        buttons: {
            "Chiudi": function() {
                $( this ).dialog( "close" );
                },
            'Scrivi "Ciao Mondo"': function(){
                $('#box').html("Ciao mondo");
                $( this ).dialog( "close" );
                }
            }
        });
    });

Conclusione

Come hai potuto vedere, il metodo diaog é molto semplice e flessibile. Possiamo inoltre dare l’aspetto che vogliamo alla nostra finestra senza nessun limite in quanto dipende interamente da html e css.
Non vi é neppure nessun limite per quello che riguarda i pulsanti e le funzonalità che andranno ad implementare.

Ma continuiamo a divertirci!
Nel secondo articolo infatti, svilupperemo qualcosa di più complesso. Un modulo di login tramite finestra di dialogo con chiamata ajax per verificare i dati di autenticazione.

Tag: , ,

L'autore

Maurizio è sposato con la triade PHP - MySql - Apache e, non pago, ha un'amante chiamata jQuery. Ha un blog dove cerca di descrivere nei minimi particolari sia la moglie che l'amante. La sua vera specialità è la realizzazione di gestionali complessi anche se non rifiuta mai un sito web. +

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

34 commenti

Trackback e pingback

  1. jQuery: Come creare delle finestre di dialogo personalizzate? (2/2) | Your Inspiration Web
    [...] permetto di dare per scontato che tu abbia letto il precedente articolo che fornisce le basi per quello che…