Corsi on-line

Gestire alert e confirm con jQuery e Impromptu

In questo post vedremo come gestire, in modo visivamente gradevole, le finestre di alert e di confirm normalmente delegate alle classiche (ed esteticamente discutibili) funzioni Javascript alert() e confirm().
Per farlo utilizzeremo la libreria jQuery ed il plug-in Impromptu (che trovate qui).

Per prima cosa, quindi, includiamo nell’intestazione della nostra pagina web il framework jQuery ed il plug-in Impromptu:

<scrypt type="text/javascript" src="jquery.js"></script>
<scrypt type="text/javascript" src="jquery-impromptu.js"></script>

Oltre ad includere il JS del plug-in, dovremo aggiungere anche alcune stilizzazioni: per farlo possiamo includere un foglio di stile ad hoc oppure accodare il contenuto del CSS del plug-in al foglio di stile del nostro sito.

Fatto questo creiamo due funzioni Javascript ad hoc:

<scrypt type="text/javascript">
function avviso(testo) {
  $.prompt(testo,{
    buttons:{ Chiudi: true }
  });
}
function conferma(testo) {
  $.prompt(testo,{
    callback: function(v,m,f) { if (v == true) location.href = '/conferma.html'; },
    buttons:{ OK: true, Annulla: false }
  });
}
</scrip>

La prima funzione – avviso() – sarà da utilizzare in sostituzione di alert(). Questa funzione ammette come unico parametro il testo da mostrare all’interno della finestra.

La seconda funzione – conferma() – è stata pensata per sostituire il classico confirm() di Javascript. Questa funzione ammette, quale unico parametro, il testo da mostrare all’utente, al quale si accosteranno due bottoni ("OK" e "Annulla"). Qualora l’utente clicchi su "Annulla" la finestra verrà chiusa e non succederà altro; qualora invece clicchi su "OK" la funzione di callback effettuerà un semplice redirect (ovviamente potete cambiare a piacimento l’evento scatenato dalla pressione del tasto di conferma agendo sulla funzione di callback, appunto).

Come potete vedere le due funzioni riproducono le funzionalità di alert() e confirm() offrendo, allo stesso tempo, una buona resa grafica.

Post correlati
I più letti del mese
Tematiche