Slik bygger du et tabbed-grensesnitt i AJAX for HTML5 og CSS3-programmering - dummier

En viktig teknikk i HTML5 og CSS3 webutvikling er bruken av et flippert grensesnitt i AJAX. Dette gjør at brukeren kan endre innholdet i et segment ved å velge en av en rekke faner.

I et flatt grensesnitt er bare ett element synlig om gangen, men fanene er alle synlige. Det flippede grensesnittet er litt mer forutsigbart enn trekkspillet fordi fanene (i motsetning til trekkspillets overskrifter) forblir på samme sted.

Flikene endrer farger for å indikere hvilken kategori som for øyeblikket er uthevet, og de endrer også tilstanden (normalt ved å endre farge) for å indikere at de blir svevet over. Når du klikker på en annen fane, erstattes hovedinnholdsområdet for widgeten med det tilsvarende innholdet.

Dette skjer når brukeren klikker på fanen.

Som trekkspillet, er tab-effekten utrolig lett å oppnå. Se over koden:

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

Tab Demo

Book 1
Book 2
Book 3


Bestill I - Opprett HTML-stiftelsen

Sound HTML Foundations
Det handler om validering
Velge verktøyene dine
Administrere informasjon med lister og tabeller
Lag tilkoblinger med koblinger
Legge til bilder
Opprette skjemaer


Bok II - Styling med CSS

Fargelegge verdenen din
Styling Text
Selectors, Class og Style
Borders and Backgrounds
Nivåer av CSS


Bok III - Bruk Posisjon CSS for Layout

Fun med den fantastiske Float
Bygg flytende sideoppsett
Styling Lists and Menus
Bruke alternativ posisjonering

Mekanismen for å bygge et flippbasert grensesnitt, ligner veldig på trekkspill:

1. Legg til alle de aktuelle filene.

   Som de fleste jQuery UI-effekter, trenger du jQuery, jQuery UI, og et tema CSS-fil. Du trenger også tilgang til bildekatalogen for temaets bakgrunnsgrafikk.

2. Bygg HTML som normalt.

   Hvis du bygger en velorganisert nettside uansett, er du allerede ganske nær.

3. Bygg en div som inneholder alle tabbedataene.

   Dette er elementet som du skal gjøre på jQuery-magien på.

4. Plasser hovedinnholdsområder i navngitte div.

   Hvert innhold som skal vises som en side, skal plasseres i en div med en beskrivende ID. Hver av disse divsene skal plasseres i kategorien div.

5. Legg til en liste over lokale lenker til innholdet.

   Bygg en meny med lenker. Plasser dette øverst på fanen div. Hver lenke skal være en lokal lenke til en av divsene. For eksempel ser indeksen slik ut:

   
   Book 1
   Book 2
   Book 3
   
   

6. Bygg en init () -funksjon som vanlig.

   Bruk de vanlige jQuery-teknikkene.

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

   Utrolig, en linje med jQuery-kode gjør alt arbeidet.