Il framework JavaScript jQuery fornisce un Web designer con la capacità di manipolare in modo dinamico gli elementi HTML DOM. Web designer utilizzano comunemente il pulsante selettore per permettere ai visitatori del sito attivare eventi di jQuery. Plugin che aggiungono funzioni extra sono disponibili; per esempio, il plugin di jQuery UI include una finestra di dialogo pop-up. La finestra di dialogo dell'interfaccia utente jQuery accetta un elemento HTML e si presenta in una finestra di pop-up attraente che fotogrammi fuori il sito Web di altri contenuti. Un Web designer può consentire ai visitatori del suo sito attivare la finestra di dialogo facendo clic su un pulsante selettore integrato nel codice HTML del sito. Successivamente può inserire ulteriori pulsanti all'interno della finestra di dialogo e assegnare i comportamenti di quei pulsanti.
Istruzioni
1
Incorporare il tuo sito Web jQuery e jQuery UI. Il seguente codice di esempio utilizza l'API di Google per importare jQuery, jQuery UI e foglio di stile CSS di jQuery UI attraente "Cupertino". Un elenco completo dei temi disponibili è disponibile dalla pagina di demo di finestra di dialogo dell'interfaccia utente jQuery.
< link href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" rel = "stylesheet" type = "text/css" / >
< script elemento contenente il testo che verrà visualizzato all'interno della finestra di dialogo. Questo esempio di codice crea una finestra di dialogo che verrà utilizzato un pulsante per confermare un'azione, ad esempio l'eliminazione di un file. Il pulsante di conferma apparirà all'interno della finestra di dialogo. La casella è stata assegnata l'id di "dialogo-conferma." Questo vi permetterà di jQuery chiamare la casella quando necessario. Una regola di stile CSS inline nasconde il div finché non viene chiamato da jQuery.
< div id = "finestra di dialogo conferma" title = "Vuoi davvero fare questo?" style = "visualizzare: none;" >
<p>This item will be deleted and cannot be recovered. Are you sure you wish to delete?</p>
< / div >
4
Scrivere la funzione jQuery per gestire le chiamate da pulsante della classe newdialog. Questa funzione dovrebbe attivare la finestra di dialogo-confermare div, chiamare la finestra di dialogo jQuery UI, assegnare tasti alla finestra di dialogo ed eseguire il tuo preferito azione una volta che i pulsanti vengono premuti dall'utente. Si consideri il seguente esempio: quando la classe newdialog viene chiamata, il dialogo-confermare div viene visualizzato all'interno di una finestra di dialogo. L'altezza della scatola è impostata su 340 pixel, la finestra è modale..--che significa che si blocca fuori altri contenuti del sito Web..--e due pulsanti sono posizionati nella parte inferiore della scatola. È possibile assegnare comportamenti ai pulsanti. In questo esempio, entrambi i "Sì! Eliminare questo"e"Annulla"pulsanti semplicemente chiudere la finestra di dialogo.
$(function() () {
$(".newdialog").live ('click', {function(event)
$("#dialog-confermare") .dialog({
resizable: false,
height:340,
modal: true,
pulsanti: {
"Sì! Eliminare questo": function () {
// Do something Here
$( this ).dialog( "close" );
},
Annulla: function () {
$( this ).dialog( "close" );
}
}
});
});
});
Consigli & Avvertenze
- Ecco il codice di esempio completo:
- < html >
- < head >
- < link href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" rel = "stylesheet" type = "text/css" / >
- < script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" >< / script >
- < script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" >< / script >
- < script type = "text/javascript" >
- $(function() () {
- $(".newdialog").live ('click', {function(event)
- $("#dialog-confermare") .dialog({
- Resizable: falso,
- Altezza: 340,
- modale: vero,
- pulsanti: {
- "Sì! Eliminare questo": function () {
- Fare qualcosa qui
- $(questo) .dialog ("close");
- },
- Annulla: function () {
- }
- });
- < / script >
- < / head >
- < / html >
- < corpo >
- < classe button = "newdialog" > mi mostra la finestra di dialogo < / button >
- < div id = "finestra di dialogo conferma" title = "Vuoi davvero fare questo?" style = "visualizzare: none;" >
- < p > questo elemento viene eliminato definitivamente e non può essere recuperato. Sei sicuro? </p >
- < / div >
- < / body >