Slik bruker du jQuery til å lage et tabbed-grensesnitt i CSS3 - dummies

For noen nettsteder er et flatt grensesnitt den beste metoden for å vise informasjonen. CSS3 har kode for å bruke jQuery-metoden for å opprette et flippert grensesnitt.

$ (funksjon () {// Opprett variabler for å holde midlertidige data. Var TabHeads = "; var TabContent ="; // Hent XML-datafilen og behandle den. $. Get ("XMLTabData. Xml", funksjon (data) {// Finn hver overskrift og Bruk den til å // opprette en fanepost. $ (data). finn ("Overskrift"). hver (funksjon () {TabHeads + = "
" + $ (dette). Attr ("caption") +
";}); // Legg til dataene i overskriftsområdet. $ (" # Overskrifter ").append (TabHeads); // Finn hver innholdsinngang og bruk den til // data ()), () innhold () + ("innhold"). hver (funksjon () {TabContent + = " " + $. $ ("# Tabs "). føye (TabContent); // Fullfør prosessen ved å vise // fanene. $ ("# Tabs"). faner ();}};});

Koden begynner med å opprette to variabler: TabHeads og TabContent, for å inneholde dataene som brukes til å fylle ut det flippede grensesnittet. Denne informasjonen blir til slutt lagt til i to HTML-koder, som vist her:

Get () -metoden får XML-filen, XMLTabData. XML, og plasserer innholdet i data. Hvilke data inneholder er en fullstendig XML-fil som er sendt til en anonym funksjon (en som ikke har noe navn) som du definerer som: funksjon (data) {}. Funksjonen utføres når datainnhentingen er fullført, så det fungerer som tilbakeringing for en asynkron dataavlesning.

Alt du trenger å vite for øyeblikket er at XML-filen inneholder elementer som inneholder dataene som brukes til å lage fanepostene, samt elementer som inneholder dataene som er plassert i hver kategori. I dette tilfellet vil Tab 1 være en overskrift og "Dette er noe innhold for Tab 1." ville være tilfredsstillende for den kategorien.

Alle kursopplysningene vises i elementene. Koden spør jQuery å finne () hver av elementene og behandle dem en om gangen ved hjelp av hver () -metoden. Metoden hver () lager en sløyfe som automatisk gir tilgang til individuelle elementer gjennom denne variabelen. Tab-overskrifter lagres i en uordnet liste (

), Overskrifter, som allerede er en del av HTML-en for eksempelsiden.

Innholdet for hver kategori vises i elementer som er vedlagt etter elementet

, Overskrifter. Innholdet kan være noe - inkludert kontroller som brukt for det forrige tabb-grensesnittet eksempel. Det viktigste problemet å vurdere er hvordan du lagrer informasjon i XML-filen.Pass på at du unnslipper noen koder slik at de ikke blir fortolket som XML-elementer.

Som med overskriftene, bruker koden finn () for å finne hver av elementene i XML-filen og konvertere dem til HTML-koden som kreves for å lage kategorien innhold. Hver () -metoden lager sløyfen som brukes til å behandle hvert element en om gangen.