Hoe een tabbedinterface te bouwen in AJAX voor HTML5 en CSS3 Programmering - dummies

Een belangrijke techniek bij het ontwikkelen van HTML5- en CSS3-websites is het gebruik van een interface met tabbladen in AJAX. Hierdoor kan de gebruiker de inhoud van een segment wijzigen door een van een reeks tabbladen te selecteren.

In een interface met tabbladen is slechts één element tegelijk zichtbaar, maar de tabbladen zijn allemaal zichtbaar. De interface met tabbladen is iets voorspelbaarder dan de accordeon omdat de lipjes (in tegenstelling tot de accolades) op dezelfde plaats blijven.

De tabs veranderen van kleur om aan te geven welk tabblad op dat moment is gemarkeerd en ze veranderen ook de status (normaal door de kleur te veranderen) om aan te geven dat ze worden omgedraaid. Wanneer u op een ander tabblad klikt, wordt het hoofdinhoudsgebied van de widget vervangen door de bijbehorende inhoud.

Dit gebeurt er wanneer de gebruiker op het tabblad klikt.

Net als de accordeon is het tab-effect ongelooflijk eenvoudig te realiseren. Kijk over de code:

$ (init); functie init () {$ ("# tabs"). tabbladen ();}. html

Tabblad Demo

Boek 1
Boek 2
Boek 3


Boek I - De HTML-basis maken







Goede HTML-stichtingen
It's All About Validation
Uw hulpprogramma's kiezen
Informatie beheren met lijsten en tabellen
Verbindingen maken met koppelingen
Afbeeldingen toevoegen
Aanmaken formulieren


Boek II - Stylen met CSS

Uw wereld kleuren
Stylingtekst
Selectors, Class en Style
Grenzen en achtergronden
CSS-niveaus


Boek III - Positional gebruiken CSS voor layout

Plezier met de fantastische Float
Float-paginalay-outs bouwen
Stylinglijsten en menu's
Alternatieve positionering gebruiken

Het mechanisme voor het bouwen van een tab-gebaseerde interface lijkt sterk op het mechanisme voor accordeons:

1. Voeg alle geschikte bestanden toe.

   Zoals de meeste jQuery UI-effecten heeft u jQuery, jQuery UI en een thema-CSS-bestand nodig. U hebt ook toegang tot de afbeeldingenmap nodig voor de achtergrondafbeeldingen van het thema.

2. Bouw HTML zoals normaal.

   Als je toch een overzichtelijke webpagina maakt, ben je al redelijk dichtbij.

3. Bouw een div die alle gegevens met tabbladen bevat.

   Dit is het element waar je de jQuery-magie op doet.

4. Plaats hoofdinhoudsgebieden in benoemde divs.

   Elk stukje inhoud dat als een pagina wordt weergegeven, moet in een div worden geplaatst met een beschrijvend ID. Elk van deze div's moet in de tab-div worden geplaatst.

5. Voeg een lijst met lokale koppelingen naar de inhoud toe.

   Bouw een menu met koppelingen. Plaats deze bovenaan de Div-eenheid met tabbladen. Elke link moet een lokale link naar een van de div's zijn. De index ziet er bijvoorbeeld als volgt uit:

   
   Boek 1
   Boek 2
   Boek 3
   
   

6. Bouw een init () -functie zoals gebruikelijk.

   Gebruik de normale jQuery-technieken.

7. Roep de methode tabs () op de hoofddel.

   Ongelooflijk, één regel met jQuery-code doet al het werk.