Cum se creează panourile cu tab-uri cu jQuery în Dreamweaver - dummies

Opțiunea Tab jQuery UI din Dreamweaver facilitează adăugarea unei serii de panouri care afișează sau ascund conținutul corespunzător unei serii de file. Similar cu panourile pliabile, această caracteristică UI jQuery vă permite să afișați mai multe informații în mai puțin spațiu într-o fereastră a browserului.

Similar cu panourile de acordeon, panourile cu tab-uri pot fi utilizate pentru a afișa text, imagini și multimedia.

Atunci când creați panouri tablate cu widgetul jQuery UI din Dreamweaver, puteți specifica ordinea filelor, controlând efectiv ce conținut apare atunci când pagina este încărcată pentru prima dată.

Urmați acești pași pentru a crea un grup de tab-uri:

1. Așezați cursorul pe o pagină în care doriți să apară panoul cu file.

2. Selectați Insert → jQuery UI → Tabs sau faceți clic pe elementul Tabs din panoul de inserare al interfeței jQuery.

   Un panou cu tab-uri este introdus în pagină, iar fișierele CSS corespunzătoare apar în panoul Sursă de Designer CSS.

   

3. În spațiul de lucru principal, selectați rândul textul Tab1, Tab2, și Tab 3 , apoi înlocuiți fiecare titlu de file cu textul pe care doriți să-l afișați în fila panoului zonă.

   Puteți edita conținutul filelor numai în spațiul de lucru, nu în inspectorul Proprietăți. În mod prestabilit, textul din zona Tab este îndrăzneț și negru, dar puteți schimba acel format prin modificarea regulii CSS corespunzătoare.

4. Pentru a ajusta dimensiunea fiecărei file, selectați fila și apoi utilizați setările Înălțime și lățime din inspectorul Proprietăți.

   Cu o singură filă selectată, inspectorul Proprietăți afișează specific setările pentru fila respectivă.

   

5. Pentru a adăuga conținut, selectați cuvântul Conținut în zona principală a oricărui panou selectat și apoi introduceți text, imagini sau multimedia.

   Puteți copia textul într-un panou prin adăugarea acestuia la fel cum ați inserat textul în altă parte a paginii. În mod similar, inserați imaginile în panouri la fel cum ați face oriunde în altă pagină: Alegeți Insert → Image → Image și apoi selectați fișierul GIF, JPEG sau PNG pe care doriți să îl afișați. De asemenea, puteți adăuga fișiere multimedia sau Photoshop dacă doriți să utilizați Dreamweaver pentru optimizarea imaginilor.

6. Pentru a modifica aspectul unei file sau al unui panou, cum ar fi chipul sau culoarea fontului, editați regula CSS corespunzătoare.

   De exemplu, pentru a edita culoarea sau fontul textului în file, selectați caseta din jurul filei, iar caseta din jurul stilului este selectată automat în panoul Selector de desene CSS.

7. Pentru a edita numărul sau ordinea panourilor cu file, faceți clic pe fila jQuery albastră din partea superioară a panoului din zona de proiectare.

   Când faceți clic pe fila albastră, setările panoului apar în inspectorul Proprietăți. Dați clic în afara zonei cutie albastră, iar inspectorul proprietății revine la setările implicite.

   

8. Pentru a adăuga file, faceți clic pe pictograma semn plus (+) din inspectorul Proprietăți.

   În spațiul de lucru apar tab-uri noi.

9. Pentru a modifica ordinea filelor, selectați numele tab-ului din inspectorul Proprietăți și apoi utilizați săgețile din câmpul Panouri pentru a muta panoul.

   Numele panourilor se deplasează în sus și în jos în meniu pe măsură ce comanda este schimbată. Panourile și filele corespunzătoare apar în pagina web în ordinea în care apar în inspectorul proprietății.

10. Selectați panoul din lista derulantă Panouri pe care doriți să o afișați când pagina este încărcată într-un browser web.

    Lista drop-down corespunde cu numele pe care îl dați fiecărei file în spațiul de lucru.

11. Selectați Fișier → Salvare pentru a salva pagina; când apare caseta de dialog Copiere dependentă de fișiere, faceți clic pe OK pentru a genera automat toate fișierele asociate.

    Pentru ca funcțiile jQuery UI să funcționeze, trebuie să încărcați aceste fișiere pe serverul dvs. web atunci când încărcați pagina web.

12. Faceți clic pe pictograma globului din partea superioară a spațiului de lucru și selectați un browser pentru a previzualiza munca dvs. într-un browser.

    În funcție de browserul dvs. web, este posibil să fie necesar să permiteți controalelor ActiveX să previzualizeze pagina de pe computer.