Cum se creează panouri pliabile cu jQuery în Dreamweaver - dummies

Widget-ul acordeonului jQuery UI din Dreamweaver facilitează adăugarea de panouri pliante pe care vizitatorii site-ului le pot deschide și închide fără a reîmprospăta pagina web. Această caracteristică jQuery vă permite să utilizați mai bine spațiul dintr-o pagină prin afișarea mai multor informații în mai puțin spațiu într-o fereastră de browser.

Puteți vedea cum panourile pliabile în acordeon conțin preferințele de nume, fotografii și habitate ale fiecărei păsări cântătoare pe acest site web. Rezultatul este că puteți vedea cu ușurință numele tuturor păsărilor pe o singură pagină. Pentru a vedea descrierea oricărei păsări, un utilizator trebuie doar să facă clic pe fila din partea superioară a panoului (unde apare numele păsării), iar panoul se deschide instantaneu.

Fotografia și descrierea pentru crocodilul coroană portocalie sunt deschise, în timp ce ceilalți pe pagină sunt închise. Frumusețea lui jQuery este că pagina nu trebuie să fie reîncărcată pentru ca panourile să se deschidă sau să se închidă. Faceți clic o dată pe o filă și un panou se deschide instantaneu. Faceți clic pe altă filă și acest panou se deschide deoarece panoul deschis anterior se închide.

Panourile pliabile pot fi utilizate pentru a afișa text și imagini, precum și fișiere multimedia, cum ar fi fișiere audio, video și Flash.

Pentru a vizualiza un panou de acordeon (sau multe alte caracteristici avansate în Dreamweaver) așa cum va apărea într-un browser web, trebuie să faceți clic pe butonul Live view din partea stângă sus a spațiului de lucru Dreamweaver.

După ce creați un set de panouri de acordeon cu meniul jQuery UI din Dreamweaver, puteți modifica un număr de setări ale panoului utilizând Inspectorul proprietăți, după cum se arată în instrucțiunile care urmează.

Urmați acești pași pentru a crea un set de panouri acordeon:

Așezați cursorul pe o pagină în care doriți să apară panourile acordeonului.
Selectați Insert → jQuery UI → Accordion sau faceți clic pe elementul Accordion din panoul de inserare UI jQuery.

Un grup de panouri acordeon jQuery UI cu trei panouri apare pe pagină.
Selectați cuvântul Secțiunea în partea de sus a fiecărui panou și înlocuiți-l cu textul pe care doriți să-l afișați în zona Tab.

În mod implicit, textul din zona Tab este text simplu, dar îl puteți modifica prin modificarea regulii CSS corespunzătoare sau prin formatarea textului utilizând etichete HTML, cum ar fi etichetele de titlu.
Selectați cuvântul Conținut în zona principală a fiecărui panou și introduceți orice text sau imagini pe care doriți să le afișați.

Aveți posibilitatea să inserați textul într-un panou la fel cum ați inserat textul în altă parte a paginii. În mod similar, introduceți imaginile în panouri la fel cum ați face oriunde pe altă pagină: plasați cursorul în panou, alegeți Inserare → Imagine → Imagine și selectați fișierul GIF, JPEG sau PNG pe care doriți să îl afișați.De asemenea, puteți selecta un fișier Photoshop dacă doriți să utilizați Dreamweaver pentru a optimiza imaginile.

Când inserați textul într-un panou, alegeți Editare → Paste special pentru a alege cantitatea de formatare pe care doriți să o păstrați în textul pe care îl inserați în Dreamweaver. Limitarea cantității de formatare păstrată poate reduce potențialele conflicte de stil.
Pentru a modifica setările panoului, faceți clic pe fila albastră jQuery Accordion din partea superioară a panourilor din zona de proiectare.

Când faceți clic pe fila albastră, setările panoului apar în inspectorul Proprietăți. (Faceți clic corect pe fila albastră poate fi dificilă, deci asigurați-vă că faceți clic pe zona albastră.) Faceți clic în orice altă parte a paginii și inspectorul revine la setările implicite.
Adăugați sau eliminați panourile utilizând câmpul Panouri din inspectorul Proprietăți.

Pentru a adăuga un panou, faceți clic pe semnul plus (+) în partea dreaptă a câmpului Panouri. Pentru a elimina un panou dintr-un set de acordeoane, selectați mai întâi numele panoului din lista derulantă Panouri din inspectorul Proprietăți și apoi faceți clic pe semnul minus (@@ min).

Puteți adăuga un alt panou făcând din nou clic pe semnul plus.
Modificați modul în care sunt deschise panourile utilizând meniul drop-down Eveniment.

Setările Evenimentului controlează dacă panourile se deschid atunci când un utilizator face clic pe o filă a panoului (Faceți clic pe) sau rotește un cursor peste fila panoului (Mouseover).
Setați alte opțiuni de panou, după cum doriți.

Opțiunile de acordeon din inspectorul proprietății sunt opționale și includ capacitatea de a dezactiva toate panourile (Dezactivați) și de a anima modul în care panourile se deschid și se închid (lista verticală Animați).
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 toate fișierele asociate.

Pentru ca funcțiile Spry să funcționeze, trebuie să încărcați aceste fișiere pe serverul dvs. web atunci când încărcați pagina web.
Pentru a modifica aspectul panoului, cum ar fi culoarea feței sau a textului, editați regula CSS corespunzătoare.

Notă: Nu puteți edita stilurile corespunzătoare pentru un panou de acordeoane până când pagina nu a fost salvată, iar Dreamweaver a generat fișierele CSS și JavaScript corespunzătoare.
Pentru a vedea cum vor apărea panourile într-un browser web, faceți clic pe pictograma globului din partea superioară a spațiului de lucru și selectați browserul pe care doriți să îl utilizați pentru a previzualiza pagina.

Când utilizați computerul pentru a previzualiza o pagină care are o caracteristică interactivă care necesită JavaScript sau o altă programare, unele browsere web, inclusiv Internet Explorer, vor afișa un avertisment care să indice că trebuie să permiteți controalelor ActiveX să vizualizeze pagina.

Acesta este un avertisment de securitate care apare numai când pagina este deschisă pe același computer unde este salvată pagina. Dacă publicați pagina la un server web și apoi o vizualizați printr-o conexiune la Internet, această eroare nu va apărea pentru dvs. sau vizitatorii site-ului dvs.