Hur man bygger ett flikgränssnitt i AJAX för HTML5 och CSS3-programmering - dummies

En viktig teknik i HTML5 och CSS3 webbutveckling är användningen av ett flikgränssnitt i AJAX. Detta gör att användaren kan ändra innehållet i ett segment genom att välja en av en serie flikar.

I ett flikat gränssnitt är endast ett element synligt åt gången, men flikarna är alla synliga. Det flikiga gränssnittet är lite mer förutsägbart än dragspelet eftersom flikarna (till skillnad från dragspelets rubriker) är på samma plats.

Flikarna ändrar färger för att ange vilken flik som för närvarande är markerad och de ändrar också tillståndet (normalt genom att ändra färg) för att indikera att de svävar över. När du klickar på en annan flik ersätts widgetens huvudinnehållsområde med motsvarande innehåll.

Detta är vad som händer när användaren klickar på fliken.

Liksom dragspelet är fliken effekten oerhört lätt att uppnå. Titta över koden:

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

Tab Demo

Boka 1
Boka 2
Boka 3


Boka I - Skapa HTML-fonden


Ljud HTML-grundläggningar
Det handlar om validering
Välja dina verktyg
Hantera information med listor och tabeller
Skapa anslutningar med länkar
Lägga till bilder
Skapa formulär


Bok II - Styling med CSS

Färger din värld
Styling Text
Valörer, klass och stil
Gränser och bakgrunder
Nivåer av CSS


Bok III - Användning av position CSS för layout

Kul med den fantastiska flottan
Bygga flytande sidlayouter
Styling Lists and Menus
Använda alternativ positionering

Mekanismen för att skapa ett flikbaserat gränssnitt är mycket lik den för dragspel:

1. Lägg till alla lämpliga filer.

   Liksom de flesta jQuery UI-effekter behöver du jQuery, jQuery UI och ett tema CSS-fil. Du behöver också tillgång till bildkatalogen för temat bakgrundsgrafik.

2. Bygg HTML som vanligt.

   Om du bygger en välorganiserad webbsida, är du redan ganska nära.

3. Bygg en div som innehåller alla tabbedata.

   Detta är det element som du ska göra jQuery magiken på.

4. Placera huvudinnehållsområden i namngivna divs.

   Varje del innehåll som ska visas som en sida ska placeras i en div med ett beskrivande ID. Var och en av dessa divs ska placeras i fliken div.

5. Lägg till en lista över lokala länkar till innehållet.

   Bygg en meny med länkar. Placera det här på toppen av fliken div. Varje länk ska vara en lokal länk till en av delarna. Indexet ser till exempel så här ut:

   
   Bok 1
   Bok 2
   Bok 3
   
   

6. Bygg en init () -funktion som vanligt.

   Använd de vanliga jQuery-teknikerna.

7. Ring på fliken () -metoden på huvud div.

   Otroligt, en rad jQuery-kod gör allt arbete.