Hvordan lage en JQuery Tab i JQuery Modal
jQuery Javascript-rammeverk De kan du presentere nettstedets besøkende med innhold som er organisert i en effektiv faner menyvinduet. Når brukeren klikker på en kategori, vises tilsvarende innhold umiddelbart på skjermen. Du kan velge å plassere dette innholdet inne i en dialogmodell boks. Et dialogmodell boks rammer fanene og fanebasert innhold inne i et pop-up vindu. Funksjonaliteten for både modellen dialog og tabbed innhold er en del av jQuery brukergrensesnitt plug-in.
Bruksanvisning
1 Embed jQuery og jQuery UI plugin inn på området. Begge disse bibliotekene er tilgjengelige fra API Google utviklerens. Følgende eksempelkode demonstrerer metoden for å legge ned begge bibliotekene:
<Script rel = "stylesheet" type = "text / css" />
3 Opprett en HTML-liste og initiere et listeelement for hver fane som du vil skal vises på fanemenyen. Knyt en intern anker link til hvert listepunkt. I dette eksempelet en liste vert tre kategoriene, og ligger innenfor en div som har id faner.
<div id = "tabs">
<ul>
& Lt; li> & lt; a href = "# tabs-1"> Tab One & lt; / a> & lt; / li>
& Lt; li> & lt; a href = "# tabs-2"> Tab Two & lt; / a> & lt; / li>
& Lt; li> & lt; a href = "# tabs-3"> Tab Tre & lt; / a> & lt; / li>
& Lt; / ul>
</ Div>
4 Lag en div for hver kategori. Tittel div å koordinere med anker koblingen teksten fra listeelementene. Plasser hver div innsiden av fanene div.
<Div id = "tabs-1"> Dette er teksten på innsiden av den første kategorien </ div>
<Div id = "tabs-2"> Dette er teksten på innsiden av den andre kategorien </ div>
<Div id = "tabs-3"> Dette er teksten på innsiden av den tredje kategorien </ div>
5 Pakk faner div inne i en dialogmodellen div. Det er nødvendig å pakke på menyen i en dialogmodell div slik at fanene menyen vises på innsiden av pop-up vindu. Her er et eksempel på en div berettiget dialog.
<Div id = "dialog" title = "Velg en fane">
6 Skriv jQuery kode. JQuery kode åpnes automatisk dialogen og etablerer fanemenyen funksjonalitet. Betrakt følgende eksempel. Den første jQuery funksjon fester jQuery UI kategoriene () -funksjonen til faner id. Den andre jQuery-funksjonen legger dialog () -funksjonen til dialogen div og angir bredden av dialogvinduet til 840 piksler.
$(function() {
$ ( "#tabs") .tabs ();
});
$ (Funksjon () {
$ ( "#dialog") .dialog ({Width: 840});
});