Come utilizzare il pulsante di jQuery HTML in una finestra di dialogo

August 25

Come utilizzare il pulsante di jQuery HTML in una finestra di dialogo


Il framework jQuery JavaScript fornisce un web designer con la capacità di manipolare dinamicamente elementi DOM HTML. Web designer usano comunemente il selettore pulsante per consentire ai visitatori del sito per innescare eventi jQuery. I plugin che aggiungono ulteriori funzioni sono disponibili; per esempio, il plugin jQuery UI include una finestra pop-up finestra di dialogo. La finestra di dialogo jQuery UI prende un elemento HTML e la presenta in una finestra pop-up attraente che incornicia fuori altri contenuti del sito web. Un web designer può consentire ai visitatori del suo sito per attivare la finestra di dialogo facendo clic sul pulsante di un selettore integrato nel codice HTML del sito. Egli può successivamente posizionare pulsanti aggiuntivi all'interno della finestra di dialogo e assegnare i comportamenti a questi pulsanti.

istruzione

1 Incorporare jQuery e jQuery UI nel tuo sito web. Il seguente codice di esempio utilizza l'API di Google da importare jQuery, jQuery UI e attraente "Cupertino" foglio di stile CSS di jQuery UI. Una lista completa dei temi disponibili è disponibile dalla pagina di prova finestra del jQuery UI.

<Link href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" rel = "stylesheet" type = "text / css" />

<Elemento script che contiene il testo che apparirà all'interno della finestra di dialogo. Questo codice di esempio crea una finestra di dialogo che utilizzerà un pulsante per confermare un'azione, come ad esempio l'eliminazione di un file. Il pulsante di conferma apparirà all'interno della finestra di dialogo. Il box è stato assegnato l'id di "finestra di dialogo Conferma." Questo permetterà jQuery per chiamare la casella in caso di necessità. Una regola in linea di stile CSS nasconde il div fino a quando non viene chiamato da jQuery.

<Div id = titolo di "dialogo-conferma" = "Sei sicuro di voler fare questo?" style = "display: none;">

&lt;p>This item will be deleted and cannot be recovered. Are you sure you wish to delete?&lt;/p>

</ Div>

4 Scrivere la funzione di jQuery per gestire le chiamate dal tasto di classe NewDialog. Questa funzione dovrebbe attivare il div di dialogo-confirm, chiamare la finestra di jQuery UI, assegnare i pulsanti per la finestra di dialogo ed eseguire l'azione preferita una volta che tali pulsanti sono premuti dall'utente. Si consideri il seguente esempio: quando la classe NewDialog si chiama, il div finestra Conferma viene visualizzata all'interno di una finestra di dialogo. L'altezza della scatola è impostata a 340 pixel, la scatola è modale - il che significa che blocca eventuali altri contenuti del sito - e due pulsanti sono posizionati nella parte inferiore della scatola. È possibile assegnare i comportamenti ai pulsanti. In questo esempio, sia il "Sì! Cancella questo" e "Cancel" pulsanti semplicemente chiudere la finestra di dialogo.

$ (Function () {

$ ( ". NewDialog"). Live ( 'click', la funzione (evento) {

$ ( "Dialogo-conferma #") .dialog ({

resizable: false,

altezza: 340,

modal: true,

pulsanti: {

"Sì Elimina questo": function () {

// Do something Here

$ (This) .dialog ( "close");

},

Annulla: function () {

$( this ).dialog( "close" );

}

}

});

});

});

Consigli e 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', la funzione (evento) {
  • $ ( "Dialogo-conferma #") .dialog ({
  • ridimensionabile: false,
  • altezza: 340,
  • modal: true,
  • pulsanti: {
  • "Sì Elimina questo": function () {
  • // Fa qualcosa qui
  • $ (This) .dialog ( "close");
  • },
  • Annulla: function () {
  • }
  • });
  • </ Script>
  • </ Head>
  • </ Html>
  • <Body>
  • <Button class = "NewDialog"> Show Me la finestra di dialogo </ button>
  • <Div id = titolo di "dialogo-conferma" = "Sei sicuro di voler fare questo?" style = "display: none;">
  • <P> Questo articolo sarà eliminato definitivamente e non può essere recuperato. Sei sicuro? </ P>
  • </ Div>
  • </ Body>