Összecsukható panelek létrehozása a jQuery segítségével a Dreamweaverben

A jQuery UI harmonika widget a Dreamweaverben megkönnyíti az összecsukható panelek hozzáadását, amelyeket a webhely látogatói a weboldal frissítése nélkül nyithatnak meg és zárhatnak be. Ez a jQuery funkció lehetővé teszi, hogy jobban kihasználja az oldalon lévő helyet azáltal, hogy több információt jelenít meg kevesebb helyen a böngészőablakban.

Ezen a természetvédelmi webhelyen megtekintheti, hogy a harmonika összecsukható panelek hogyan tartalmazzák az egyes énekesmadarak nevét, fényképét és élőhely-preferenciáját. Az eredmény az, hogy könnyedén láthatja az összes madár nevét egy oldalon. Bármely madár leírásának megtekintéséhez a felhasználónak csak a panel tetején lévő fülre kell kattintania (ahol a madár neve jelenik meg), és a panel azonnal megnyílik.

A narancskoronás poszáta fotója és leírása nyitva van, míg a többi oldal bezárva. A jQuery szépsége abban rejlik, hogy az oldalt nem kell újratölteni a panelek megnyitásához vagy bezárásához. Kattintson egyszer egy lapra, és azonnal megnyílik egy panel. Kattintson egy másik fülre, és az előzőleg megnyitott panel bezárásával megnyílik.

Az összecsukható panelek szövegek és képek, valamint multimédiás fájlok, például hang-, videó- ​​és Flash-fájlok megjelenítésére használhatók.

A harmonikapanel (vagy a Dreamweaver sok egyéb speciális funkciója) webböngészőben való megjelenítéséhez kattintson az Élő nézet gombra a Dreamweaver munkaterület bal felső sarkában.

Miután létrehozta a harmonikapaneleket a Dreamweaver jQuery UI menüjével, számos panelbeállítást módosíthat a Tulajdonságvizsgáló segítségével, az alábbi utasítások szerint.

A harmonika panelkészlet létrehozásához kövesse az alábbi lépéseket:

Vigye a kurzort arra az oldalra, ahol meg szeretné jeleníteni a harmonika paneleket.

Válassza a Beszúrás→jQuery UI→Accordion menüpontot, vagy kattintson az Accordion elemre a jQuery UI Beszúrás panelen.

A jQuery UI összecsukható harmonika panelcsoport három panellel jelenik meg az oldalon.

Válassza ki a Section szót az egyes panelek tetején, és cserélje ki arra a szövegre, amelyet meg szeretne jeleníteni a panel Tab területén.

Alapértelmezés szerint a Tab területen lévő szöveg egyszerű szöveg, de ezt megváltoztathatja a megfelelő CSS-szabály módosításával vagy a szöveg formázásával HTML-címkékkel, például a címsorcímkékkel.

Válassza ki a Tartalom szót az egyes panelek fő területén, és írja be a megjeleníteni kívánt szöveget vagy képet.

Szöveget úgy illeszthet be egy panelre, ahogyan az oldal bármely más részére beillesztene. Hasonlóképpen, ugyanúgy beszúrhat képeket a panelekbe, mint bárhol máshol az oldalon: Vigye a kurzort a panelre, válassza a Beszúrás→Kép→Kép menüpontot, és válassza ki a megjeleníteni kívánt GIF-, JPEG- vagy PNG-fájlt. Kiválaszthat egy Photoshop-fájlt is, ha a Dreamweavert szeretné használni a képek optimalizálására.

Amikor szöveget illeszt be egy panelre, válassza a Szerkesztés → Irányított beillesztés menüpontot, és válassza ki a megőrizni kívánt formázás mértékét a Dreamweaverben beillesztett szövegben. A megőrzött formázások mennyiségének korlátozása csökkentheti a lehetséges stílusütközéseket.

A panel beállításainak módosításához kattintson a kék jQuery Accordion fülre a panelek tetején a tervezési területen.

Ha a kék fülre kattint, a panel beállításai megjelennek a Tulajdonságvizsgálóban. (A kék fülre való helyes kattintás bonyolult lehet, ezért feltétlenül kattintson a kék területre.) Kattintson bárhová az oldalon, és az ellenőr visszatér az alapértelmezett beállításokhoz.

Panelek hozzáadása vagy eltávolítása a Tulajdonságvizsgáló Panelek mezőjével.

Panel hozzáadásához kattintson a Panelek mező jobb oldalán található pluszjelre (+). Panel eltávolításához egy harmonikakészletből először válassza ki a panel nevét a Panelek legördülő listából a Tulajdonságvizsgálóban, majd kattintson a mínusz jelre (@@min).

Új panel hozzáadásához kattintson ismét a pluszjelre.

Módosítsa a panelek megnyitásának módját az Esemény legördülő menü segítségével.

Az Eseménybeállítások szabályozzák, hogy a panelek megnyíljanak-e, amikor a felhasználó egy panelfülre kattint (Kattintás), vagy a kurzort a panellap fölé viszi (Egéráthelyezés).

Igény szerint állítson be további panelbeállításokat.

A Property Inspector harmonika opciói opcionálisak, és magukban foglalják a panelek vagy az összes panel letiltását (Letiltás), valamint a panelek nyitásának és bezárásának animálását (Animálás legördülő lista).

Válassza a Fájl→Mentés menüpontot az oldal mentéséhez; Amikor megjelenik a Függő fájlok másolása párbeszédpanel, kattintson az OK gombra az összes kapcsolódó fájl létrehozásához.

A Spry funkcióinak működéséhez fel kell töltenie ezeket a fájlokat a webszerverére a weboldal feltöltésekor.

A panel megjelenésének, például a betűtípus vagy a szöveg színének módosításához szerkessze a megfelelő CSS-szabályt.

Megjegyzés: Addig nem szerkesztheti a harmonikapanel megfelelő stílusait, amíg az oldalt el nem menti, és a Dreamweaver nem hozta létre a megfelelő CSS- és JavaScript-fájlokat.

Ha látni szeretné, hogyan jelennek meg a panelek a webböngészőben, kattintson a munkaterület tetején található földgömb ikonra, és válassza ki az oldal előnézetéhez használni kívánt böngészőt.

Ha olyan oldal előnézetét használja a számítógépén, amely JavaScriptet vagy más programozást igénylő interaktív funkcióval rendelkezik, néhány webböngésző, köztük az Internet Explorer, figyelmeztetést jelenít meg, amely szerint engedélyeznie kell az ActiveX-vezérlők számára az oldal megtekintéséhez.

Ez egy biztonsági figyelmeztetés, amely csak akkor jelenik meg, ha az oldalt ugyanazon a számítógépen nyitják meg, ahol az oldalt menti. Ha közzéteszi az oldalt egy webszerveren, majd internetkapcsolaton keresztül tekinti meg, ez a hiba nem jelenik meg sem Ön, sem webhelye látogatói számára.