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" "http://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" "http://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.
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
34 commenti
Trackback e pingback
-
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…
Ciao Maurizio,
innanzitutto complimentoni per l’articolo, come sempre molto chiaro.
Ho da far notare alcune piccole cose, però, e se credi ne riparliamo nel forum.
1) seguendo esattamente i tuoi passaggi (scaricando il custom UI) la sintassi corretta da dover mettere nella pagina è
altrimenti non funziona :-)
2) Se, invece, provo a importare passo, passo ogni singola indipendenza mi esce un errore (come poi ho anche descritto nel 3D del forum) relativo al widget.
3) ho fatto la prova anche con un bottone e, ahimè, il comportamento è un po strano: innanzitutto ho dovuto togliere $(“a#open”) e mettere solo $( “#open”) ma il problema è che il bottone (definito come input type=”button” id=”open”) non funziona correttamente se esiste già un id=open definito.
I commenti hanno censurato il codice. Provo a riscriverlo senza tags:
“1) seguendo esattamente i tuoi passaggi (scaricando il custom UI) la sintassi corretta da dover mettere nella pagina è
(script type=”text/javascript” src=”libs/jQueryCustom/js/jquery-1.5.1.min.js”)(/script)
(script type=”text/javascript” src=”libs/jQueryCustom/js/jquery-ui-1.8.11.custom.min.js”)(/script)
(link href=”libs/jQueryCustom/css/ui-lightness/jquery-ui-1.8.11.custom.css” rel=”stylesheet” type=”text/css” /)
Sperando che si legga :)
Hai ragione sulla sintassi del di
$(“#open”).click(function()
però siccome non possono esserci due id, i quali sono necessariamente univoci (a prescindere di jquery…) io avrei utilizzato una classe e quindi:
$(“a.open”).click(function()
e poi i bottoni
input type=”button” class=”open”
… ovviamente aspetta la risposta di maurizio
1) beh, chiaramente sono da indicare i nomi dei file ed i percorsi corretti. Ho già detto che per comodità ho l’abitudine di modificare i nomi dei file e riorganizzare le cartelle.
2) questo é strano, forse é una questione dell’ordine di importazione (prima va ui.core, poi ui.widget…)
3) Chiaramente a#open é riferito al link con id=open. Se é un bottone sarà input#open. Mentre mettendo semplicemente #open si fa riferimento genericamente all’elemento con id=open.
E naturalmente , come é già stato detto, un id deve essere unico. Dunque se vuoi far coesistere sia il link sia il bottone potrai ustilizzare una classe come suggerito da oly
grazie mille per i vostri preziosi interventi! ;-)
Alla prossima!
Interessante. Quante cose si possono fare con jquery con poche righe di codice. Io non sto studiando bene jquery (ho così poco tempo anche solo per approfondire le mie conoscenze di php e mysql..figuriamoci), però devo dire che seguendo ogni volta questi tutorial sul noto framework qualche cosa della sua struttura e del suo uso lo sto assimilando automaticamente; adesso ho meno difficoltà a seguire i passaggi e a riconoscerne le funzionalità.
Grazie per tutto Maurizio!
studialo!!!
io sono legato maggiormente a php e mysql mentre di javascript “puro” non ci capisco quasi nulla…
ma con jquery, la sua UI, le sue funzioni per ajax, i millemila plugin…
si fanno cose molto complesse con pochissime righe di codice…
Ciao Luca,
concordo pienamente con oly.
Se hai già una certa esperienza di programmazione e se, come hai detto, non hai difficoltà a seguire un tutorial come questo, imparare jQuery ad un discreto livello diventa questione di una giornata di impegno.
A quel punto ti si apre un mondo che vale bene qualsiasi sforzo. Lo dico sempre, come dico sempre a chi programma in php di rinunciare ad ultilizzare il paradigma procedurale e di passare agli oggetti. Anche in quel caso, un piccolo sforzo ripagato pienamente
Ciao Maurizio,
articolo interessante.
Nella realtà con PHP potresti adottare entrambi i paradigmi di programmazione: procedurale e a oggetti. Con le ultime release la tendenza maggiore è su OOP.
Bye,
Antonio.
Vediamo, vediamo. Il mio problema è che prima di iniziare un nuovo, se pur semplice, lavoro con php e mysql (+jquery adesso) possono passare anche mesi (faccio tutt’altro quotidianamente) e dimentico molte cose, anche banali.
Devo ancora dedicarmi alla programmazione ad oggetti in php , per il momento per i miei lavori utilizzo solo il procedurale, a dire il vero più che sufficiente (si lo so che è l’approccio a cambiare).
Grazie.
ps: sono registrato al forum come Luke. Non ho capito come registrarmi in questa sezione (o solo semplicemente farmi “riconoscere”).
Ciao, se io volessi utilizzare la finestra per far vedere che la pagina si sta caricando come faccio? Con che evento la faccio apparire? E quando il caricamento della pagina è concluso, deve scomparire, come si fa?
Grazie :D
ciao,
ho dato una occhiata a questo articolo..mi servirebbe qualcosa di più articolato ossia il contenuto della finestra di dialogo deve essere più ricco nel senso che deve mostrare un contentuo dinamico (prelevato da database) e un form con una casella di testo..sai darmi qualche suggerimento?
grazie.
non cambia assolutamente nulla.
tu crei dinamicamente il contenitore, e a questo contenitore fai fare riferimento al metodo dialog
ciao,
sto smanettando con il codice che hai proposto nell’articolo e adattandolo al mio caso..mmh avrei bisogno di avere una finestra sufficientemente grande da non avere la barra di scorrimento e che tutto il contenuto, dunque, sia visibile insieme..come posso impostare le dimensioni della finestra?
Ho provato in questo modo
$(‘#finestra’).dialog({
modal: true,
autoOpen: false,
width: 550,
height: 300,
buttons: {
“Chiudi”: function() {
$( this ).dialog( “close” );
però mi esce la barra di scorrimento.
puoi darmi qualche indicazione?
grazie
PS sto usando il codice che apre la finestra in seguito a un click su un link.
Eh beh. Se metti un’altezza fissa….
elimina l’height e la finestra si adatterà in altezza al contenuto
Ok provo a vedere cosa riesco a combinare. Grazie mille per le dritte, complimenti per la guida e per l’ottimo sito, seguo molto spesso il tuo sito e l’ebook.
ciao,
scusa se torno a disturbarti..ho in una pagina 2 script che usano jquery: uno è quello che hai descritto nel tuo articolo e ce n’è un altro che implementa la funzione simile a quella del commenti di facebook..e ahimè vanno in conflitto e non funzionano..ho provato con le alternative trovate in rete ma niente..hai qualche consiglio in merito?
grazi mille.
Se entrambe gli script utilizzano jQuery, é possibile che il conflitto sia generato da ripetizioni di id (che sarebbe un errore a prescindere) o confusioni con le classi, controlla che non ci siano ripetizioni di id o ambiguità con le calssi.
Ciao ma al mio commento del 18 aprile 2011 nessuno sa darmi una risposta?
Grazie :)
Ciao è possibile impostare una pagina esterna da far aprire come modalbox?
il modo più semplice potrebbe essere utilizzare un iframe
Ciao grazie per la risposta, ok, spiego cosa dovrei fare, in pratica ho una tabella con dati presi da mysql sarebbe una lista di prodotti, vorrei fare in modo che alla pressione di button o link mi apra una finestra di dialogo contenente i dettagli di quel determinato prodotto, però non so come di a jquery di prendere il prodotto con id=19 se clicco sul prodotto con id19 oppure di farmi vedere i dettagli del prodotto con id=20 etc. Con php non ho problemi gli passo il valore tramite get ma con jquery non so come impostarlo. Hai qualche guida da consigliarmi?
Alla pressione del bottone, fai partire una chiamata ajax ad una pagina php che intercetta l’id e restutuisce i dettagli del prodotto, che tornano alla tua pagina sempre in ajax, e li li monti nella finestra di dialogo
Grazie mille per le dritte. Ottima guida. Ti farò sapere cosa riuscirò a combinare.
Ciao Maurizio,
ottimo tutorial…
Volevo sapere come faccio nella stessa pagina ad avere bottoni diversi che aprano delle finestre con contenuti diversi???
Ho provato e il primo bottone mi apre tutti contenuti contemporaneamente.
grazie
Ciao Efrem.
I bottoni dovranno avere id diversi tra loro.
A quel punto potrai dire:
Al click sul bottone con id xy apri la finesta 1
Al click sul bottone con id zk apri la finestra 2
eccetera
ciao, scusa se riesumo un post un po datato, ma ho un piccolo problema con le dialog. è possibile evitare la chiusura di una dialog in jquery per far si che si ricarichi una pagina all’interno della dialog stessa? mi spiego meglio. ho fatto uno script per passare dei parametri in post da inserire in un db, tutto dentro una pagina. se io linko la pagina mi viene aperta correttamente dalla dialog ed inserisco i dati che occorrono per il form, clicco su ok, la dialog sparisce ma non passa i parametri perchè viene chiusa. si può ovviare questo problema evitando che la dialog si chiuda in automatico?
let’s ok, ho risolto. ho inserito un iframe dentro una pagina vuota che richiama la pagina con il post. sperando che possa essere utile a qualun altro, saluto tutti i lettori di questo blog :D
Salve, interessante articolo !
Quali parametri devo modificare per gestire le dimensioni della finestra.
Grazie
Ciao a tutti, ho provato ad inserire il codice nella mia pagina web ma ho questo problema;
ho la necessità di avere diversi link, e ad ogni link aprire una finestra con contenuto diverso.
se inserisco un solo codice funziona, aggiungendone un secondo non funziona più nulla.
Mi potere aiutare?
Ciao ragazzi, ho usato la vostra guida per creare le finestre che mi occorrono, ora volevo capire una cosa. Che parametro devo usare per gestire l’apertura NON AUTOMATICA? Mi spiego meglio, sopra avete citato come fare per spegnere l’autoOpen, a me servirebbe ora capire come fare per gestire le finestre in modo che si aprano solo quando un form non è compilato correttamente. Posso contare su di voi??
ma se anziché un link per evitare l’apertura automatica e aprirla in funzione ad un evento, io volessi usare il pulsante “submit” di un form?
mi spiego, ho creato un form di invio dati in html, al quale ho legato un PHP che:
1. se sono stati compilati i dati obbligatori e se sono state accettate le condizioni d’uso del sito, invia una mail al proprietario del sito contenente i dati inseriti dall’utilizzatore e fa comparire una finestra nella quale il contenuto sarà di ringraziamento per l’invio dei dati;
2. se viene omesso qualche dato obbligatorio il sito restituisce una finestra con contenuto che indica di compilare tutti i dati obbligatori;
3. se non vengono accettate le note legali ma vengono compilati tutti i parametri obbligatori, il sito restituisce una finestra con contenuto che indica l’accettazione delle note legali.
Come l’ho creato funziona. Ho solo un problema, praticamente la mia finestra si apre al caricamento della pagina, invece io vorrei che si aprisse dopo aver cliccato sul pulsante “submit” e dopo che abbia gestito le regole del PHP, in modo da scrivere all’interno della finestra il contenuto opportuno rispetto alla situazione che si è verificata al momento del click sul tasto Submit. spero di essere stato chiaro, ma spero soprattutto che qualcuno sappia aiutarmi perché davvero sto diventando pazzo.
Finalmente qualche cosa di chiaro per principianti come me.
grazie