Hvordan man opbygger et tabbed interface i AJAX til HTML5 og CSS3 programmering - dummies

En vigtig teknik i HTML5 og CSS3 webudvikling er brugen af ​​en flad grænseflade i AJAX. Dette gør det muligt for brugeren at ændre indholdet af et segment ved at vælge en af ​​en række faner.

I en flad grænseflade er kun et element synligt ad gangen, men fanerne er alle synlige. Den fladede grænseflade er lidt mere forudsigelig end accordeonet, fordi fanerne (i modsætning til accordeonets overskrifter) forbliver på samme sted.

Fanerne ændrer farver for at angive, hvilken fane der aktuelt er markeret, og de ændrer også tilstand (normalt ved at ændre farve) for at angive, at de svæver over. Når du klikker på en anden fane, erstattes widgetens hovedindholdsareal med det tilsvarende indhold.

Dette er hvad der sker, når brugeren klikker på fanen.

Som harmonikeren er tab-effekten utrolig let at opnå. Se over koden:

$ (init); funktion init () {$ ("# faner"). faner ();} faner. html

Tab Demo

Bog 1
Bog 2
Bog 3


Bog I - Oprettelse af HTML-fonden


Sound HTML Foundations
Det handler om validering
Valg af dine værktøjer
Administrering af informationer med lister og tabeller
Forbindelser med links
Tilføjelse af billeder
Oprettelse formularer


Bog II - Styling med CSS

Farver din verden
Styling Text
Valgmænd, klasse og stil
Border og baggrunde
Niveauer af CSS


Bog III - Brug af Positional CSS til layout

Sjov med den fantastiske Float
Opbygning af flydende sideindstillinger
Styling Lists and Menus
Brug af alternativ positionering

Mekanismen til opbygning af en fanebaseret grænseflade ligner meget på den harmonika:

1. Tilføj alle de relevante filer.

   Som de fleste jQuery UI-effekter har du brug for jQuery, jQuery UI og et tema CSS-fil. Du har også brug for adgang til billedmappen for temaets baggrundsgrafik.

2. Bygg HTML som normalt.

   Hvis du alligevel bygger en velorganiseret webside, er du allerede tæt på.

3. Opbyg en div, der indeholder alle tabbedataene.

   Dette er det element, du vil gøre jQuery magien på.

4. Placer hovedindholdsområder i navngivne divs.

   Hvert stykke indhold, der vises som en side, skal placeres i en div med et beskrivende id. Hver af disse divs skal placeres i fanen div.

5. Tilføj en liste over lokale links til indholdet.

   Byg en menu med links. Placer dette øverst på fanebladet div. Hvert link skal være et lokalt link til en af ​​divs. For eksempel ser indekset ud som dette:

   
   Bog 1
   Bog 2
   Bog 3
   
   

6. Opbyg en init () -funktion som sædvanlig.

   Brug de normale jQuery-teknikker.

7. Kald tabs () -metoden på hoved div.

   Utroligt gør en linje af jQuery-kode alt arbejdet.