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">

&lt;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});

});