Lapos panelek létrehozása a jQuery segítségével a Dreamweaverben

A Dreamweaver jQuery UI Tab opciója megkönnyíti egy sor panel hozzáadását, amelyek egy sor lapnak megfelelő tartalmat jelenítenek meg vagy rejtenek el. Az összecsukható panelekhez hasonlóan ez a jQuery UI funkció lehetővé teszi több információ megjelenítését kevesebb helyen a böngészőablakon belül.

A harmonikapanelekhez hasonlóan a füles panelek is használhatók szövegek, képek és multimédia megjelenítésére.

Amikor lapos paneleket hoz létre a jQuery UI widgettel a Dreamweaverben, megadhatja a lapok sorrendjét, így hatékonyan szabályozhatja, hogy milyen tartalom jelenjen meg az oldal első betöltésekor.

Lapos panelcsoport létrehozásához kövesse az alábbi lépéseket:

Vigye a kurzort arra az oldalra, ahol meg szeretné jeleníteni a füles panelt.

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

Egy füles panel kerül az oldalra, és a megfelelő CSS-fájlok megjelennek a CSS Designer Source panelen.

A fő munkaterületen jelölje ki egymás után a Tab1, Tab2 és Tab 3 szöveget, majd cserélje ki az egyes fülek fejléceit arra a szövegre, amelyet meg szeretne jeleníteni a panel lapterületén .

A lapok tartalmát csak a munkaterületen szerkesztheti, a Tulajdonságvizsgálóban nem. Alapértelmezés szerint a Tab területen lévő szöveg félkövér és fekete, de a formázást módosíthatja a megfelelő CSS-szabály módosításával.

Az egyes fülek méretének beállításához válassza ki a fület, majd használja a Tulajdonságvizsgáló Magasság és Szélesség beállításait.

Egy adott lap kiválasztásakor a Tulajdonságvizsgáló kifejezetten az adott lap beállításait jeleníti meg.

Tartalom hozzáadásához válassza ki a Tartalom szót bármelyik kiválasztott lappanel fő területén, majd írjon be szöveget, képeket vagy multimédiát.

Szöveget úgy másolhat be egy panelre, ha beilleszti, ahogyan az oldalon bárhová beilleszti a szöveget. Hasonló módon illesszen be képeket a panelekbe, ahogyan bárhol máshol az oldalon: Válassza a Beszúrás→Kép→Kép menüpontot, majd válassza ki a megjeleníteni kívánt GIF-, JPEG- vagy PNG-fájlt. Multimédiás vagy Photoshop-fájlokat is hozzáadhat, ha a Dreamweavert szeretné használni a képek optimalizálására.

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

Például a szöveg színének vagy betűtípusának szerkesztéséhez a lapokon jelölje be a lap körüli négyzetet, és a stílus körüli négyzet automatikusan kijelölődik a CSS Designer Selector panelen.

A füles panelek számának vagy sorrendjének szerkesztéséhez kattintson a kék jQuery Tabs fülre a tervezési területen lévő panel tetején.

Ha a kék fülre kattint, a panel beállításai megjelennek a Tulajdonságvizsgálóban. Kattintson a kék keretes területen kívülre, és a Tulajdonságvizsgáló visszatér az alapértelmezett beállításokhoz.

Lapok hozzáadásához kattintson a pluszjel (+) ikonra a tulajdonságvizsgálóban.

Új lapok jelennek meg a munkaterületen.

A lapok sorrendjének módosításához válassza ki a lap nevét a Tulajdonságvizsgálóban, majd a Panelek mezőben lévő nyilak segítségével mozgassa a panelt.

A panelnevek felfelé és lefelé mozognak a menüben, ahogy a sorrend megváltozik. A panelek és a hozzájuk tartozó fülek abban a sorrendben jelennek meg a weboldalon, ahogyan az ingatlanvizsgálóban megjelennek.

Válassza ki a Panelek legördülő listából azt a panelt, amelyet meg szeretne jeleníteni, amikor az oldalt betölti egy webböngészőbe.

A legördülő lista a munkaterület egyes lapjainak nevének felel meg.

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 automatikus generálásához.

A jQuery felhasználói felület funkcióinak működéséhez fel kell töltenie ezeket a fájlokat a webszerverre a weboldal feltöltésekor.

Kattintson a munkaterület tetején található földgömb ikonra, és válasszon egy böngészőt a munka előnézetének megtekintéséhez.

A webböngészőtől függően előfordulhat, hogy engedélyeznie kell az ActiveX-vezérlőknek, hogy megtekintsék az oldal előnézetét a számítógépen.