Hvordan bruke jQuery HTML Button i en dialogboks

May 7

jQuery Javascript rammeverk Den gir en webdesigner med evnen til å manipulere HTML DOM-elementer dynamisk. Webdesignere vanligvis bruker knappen velgeren for å tillate besøkende å utløse jQuery hendelser. Plugins som legger ekstra funksjoner er tilgjengelig; for eksempel, inneholder jQuery UI plugin en dialogboks pop-up boksen. Dialogboksen jQuery UI tar et HTML-element og presenterer det i en attraktiv pop-up vindu som rammer ut nettstedets innhold. En webdesigner kan tillate seg stedets besøkende å aktivere dialogboksen ved å klikke på en knapp for valg av integrert i nettstedets HTML-kode. Han kan deretter plassere ekstra knapper inne i dialogboksen og tilordne atferd til disse knappene.

Bruksanvisning

1 Innlemme jQuery og jQuery UI inn i din webside. Følgende eksempel kode bruker Google API for å importere jQuery, jQuery UI og jQuery UI attraktive "Cupertino" CSS stilark. En fullstendig liste over tilgjengelige temaer er tilgjengelig fra jQuery UI sin dialog demoside.

<Script element som inneholder teksten som vil vises inne i dialogboksen. Denne prøven kode oppretter en dialogboks som skal bruke en knapp for å bekrefte en handling, for eksempel å slette en fil. Bekreftelsen knappen vil vises inne i dialogboksen. Boksen er blitt tildelt id av "dialog-confirm." Dette vil tillate jQuery å ringe billett når det er nødvendig. En inline CSS stil regel skjuler div før det kalles av jQuery.

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

</ Div>

4 Skriv jQuery funksjon for å håndtere samtaler fra newdialog klassen knappen. Denne funksjonen bør aktivere dialogen-confirm div, ring dialogen jQuery UI, tildele knapper til dialogen og utføre ønsket handling når disse knappene trykkes av brukeren. Tenk deg følgende eksempel: Når newdialog klassen kalles, vises dialogboksen-confirm div inne i en dialogboks. Høyden på boksen er satt til 340 piksler, er boksen modal - noe som betyr at den blokkerer ut annen nettside innhold - og to knappene er plassert på bunnen av boksen. Du kan tilordne atferd til knappene. I dette eksempelet, både "Ja! Slett denne" og "Avbryt" knappene bare lukke dialogboksen.

$ (Funksjon () {

$ ( ". Newdialog"). Live ( "klikk", funksjon (hendelse) {

$ ( "# Dialog-confirm") .dialog ({

resizable: false,

høyde: 340,

modal: true,

knapper: {

"Ja Slett Denne": function () {

// Do something Here

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

}

Avbryt: function () {

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

}

});

Hint

Her er en eksempelkode:
<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">
$ (Funksjon () {
$ ( ". Newdialog"). Live ( "klikk", funksjon (hendelse) {
$ ( "# Dialog-confirm") .dialog ({
resizable: falsk,
høyde: 340,
modal: true,
knapper: {
"Ja Slett Denne": function () {
// Gjør noe her
$ (This) .dialog ( "close");
}
Avbryt: function () {
}
});
</ Script>
</ Head>
</ Html>
<Body>
<-knappen Class = "newdialog"> Vis meg Dialog </ knapp>
<Div id = "dialog-confirm" title = "Vil du virkelig ønsker å gjøre dette?" style = "display: none;">
<P> Dette elementet vil bli slettet og kan ikke gjenopprettes. Er du sikker? </ P>
</ Div>
</ Body>