Cum se construiește o interfață tabulară în AJAX pentru programarea HTML5 și CSS3 Programarea

O tehnică importantă în dezvoltarea de web-uri HTML5 și CSS3 este utilizarea unei interfețe tablate în AJAX. Acest lucru permite utilizatorului să modifice conținutul unui segment selectând una dintre serii de file.

Într-o interfață tabulară, este vizibil doar un singur element, dar filele sunt toate vizibile. Interfața tabelă este puțin mai previzibilă decât acordeonul, deoarece taburile (spre deosebire de titlurile acordeonului) rămân în același loc.

Taburile schimbă culorile pentru a indica ce filă este evidențiată în prezent și schimba, de asemenea, starea (în mod normal prin schimbarea culorii) pentru a indica faptul că acestea sunt pline. Când faceți clic pe altă filă, zona principală de conținut a widget-ului este înlocuită cu conținutul corespunzător.

Asta se întâmplă când utilizatorul face clic pe fila.

Ca și acordeonul, efectul filă este incredibil de ușor de realizat. Priviți codul:

$ (init); funcția init () {$ ("# tabs"). file ();} file. html

Tab Demo

Cartea 1
Cartea 2
Cartea 3


Cartea I - Crearea Fundației HTML

Valorile
Valoarea
Alegerea instrumentelor dvs.
Gestionarea informațiilor cu liste și tabele
Crearea de conexiuni cu linkuri
Adăugarea imaginilor
Crearea Formulare


Cartea II - Styling cu CSS

Culoarea Lumii
Textul Styling
Selectori, Clasa și Stil
CSS pentru Layout
Distracție cu Float Fabulos


Construirea de planuri plutitoare de pagini

Liste de stil și meniuri
Utilizarea poziționării alternative
Mecanismul de construire a unei interfețe bazate pe file este foarte similar cu cel pentru acordeoane:
Adăugați toate fișierele corespunzătoare.

Ca majoritatea efectelor jQuery UI, aveți nevoie de jQuery, jQuery UI și un fișier tematic CSS. De asemenea, aveți nevoie de acces la directorul de imagini pentru grafica de fundal a temei.

1. Construiește HTML ca normal.

   Dacă construiți o pagină web bine organizată oricum, sunteți deja destul de aproape.

2. Creați o div care conține toate datele din tab-uri.

   Acesta este elementul pe care îl veți face pe magia jQuery.

3. Plasați principalele domenii de conținut în divs numit.

   Fiecare piesă de conținut care va fi afișată ca pagină ar trebui plasată într-un div cu un ID descriptiv. Fiecare dintre aceste divuri ar trebui să fie plasate în tab-ul div.

4. Adăugați o listă de linkuri locale la conținut.

   Creați un meniu de link-uri. Plasați-o în partea de sus a tab-ului div. Fiecare legătură ar trebui să fie o legătură locală cu unul dintre div. De exemplu, indexul arată astfel:

5. Cartea 1

   Cartea 2

   
   Cartea 3
   Creați o funcție init () ca de obicei.
   Folosiți tehnicile jQuery normale.
   
   

6. Apelați metoda tabs () pe div div.

   Incredibil, o linie de cod jQuery face tot munca.