Si të krijoni panele të palosshme me jQuery në Dreamweaver

Miniaplikacioni i fizarmonikës jQuery UI në Dreamweaver e bën të lehtë shtimin e paneleve të palosshme që vizitorët e sajtit mund t'i hapin dhe mbyllin pa rifreskuar faqen e internetit. Kjo veçori jQuery ju mundëson të përdorni më mirë hapësirën në një faqe duke shfaqur më shumë informacion në më pak hapësirë ​​në një dritare të shfletuesit.

Ju mund të shihni se si panelet e palosshme të fizarmonikës përmbajnë emrin, foton dhe preferencat e habitatit të secilit zog këngëtar në këtë faqe interneti të natyrës. Rezultati është se ju mund të shihni lehtësisht emrat e të gjithë zogjve në një faqe. Për të parë përshkrimin e çdo zogu, një përdoruesi duhet vetëm të klikojë në skedën në krye të panelit (ku shfaqet emri i zogut) dhe paneli hapet menjëherë.

Fotoja dhe përshkrimi për kafshatën me kurorë portokalli është e hapur ndërsa të tjerat në faqe janë të mbyllura. E bukura e jQuery është se faqja nuk duhet të ringarkohet që panelet të hapen ose mbyllen. Klikoni një herë në një skedë dhe një panel hapet menjëherë. Klikoni një skedë tjetër dhe ai panel hapet ndërsa mbyllet paneli i hapur më parë.

Panelet e palosshme mund të përdoren për të shfaqur tekst dhe imazhe, si dhe skedarë multimedialë si skedarë audio, video dhe Flash.

Për të parë një panel fizarmonikë (ose shumë veçori të tjera të avancuara në Dreamweaver) siç do të shfaqet në një shfletues uebi, duhet të klikoni butonin Live View në pjesën e sipërme majtas të hapësirës së punës Dreamweaver.

Pasi të krijoni një grup panelesh fizarmonikësh me menynë jQuery UI në Dreamweaver, mund të ndryshoni një numër cilësimesh të panelit duke përdorur inspektorin "Property", siç tregohet në udhëzimet që vijojnë.

Ndiqni këto hapa për të krijuar një grup panelesh fizarmonikë:

Vendoseni kursorin në një faqe ku dëshironi të shfaqen panelet e fizarmonikës.

Zgjidhni Fut → jQuery UI → Fizarmonikë, ose klikoni artikullin Fizarmonikë në panelin Fut UI jQuery.

Një grup panelesh fizarmonike të palosshme jQuery UI me tre panele shfaqet në faqe.

Zgjidhni fjalën Seksion në krye të çdo paneli dhe zëvendësojeni me tekstin që dëshironi të shfaqet në zonën e skedës së panelit.

Si parazgjedhje, teksti në zonën e Skedës është tekst i thjeshtë, por ju mund ta ndryshoni atë duke ndryshuar rregullin përkatës CSS ose duke formatuar tekstin duke përdorur etiketat HTML, të tilla si etiketat e titullit.

Zgjidhni fjalën Përmbajtje në zonën kryesore të secilit panel dhe futni çdo tekst ose imazh që dëshironi të shfaqni.

Ju mund të ngjisni tekstin në një panel ashtu siç do të ngjisni tekstin kudo tjetër në faqe. Në mënyrë të ngjashme, ju futni imazhe në panele ashtu si do të bënit kudo tjetër në një faqe: Vendosni kursorin në panel, zgjidhni Fut → Imazhi → Imazhi dhe zgjidhni skedarin GIF, JPEG ose PNG që dëshironi të shfaqni. Ju gjithashtu mund të zgjidhni një skedar Photoshop nëse dëshironi të përdorni Dreamweaver për të optimizuar imazhet.

Kur ngjitni tekstin në një panel, zgjidhni Edit → Paste Special për të zgjedhur sasinë e formatimit që dëshironi të ruani në tekstin që ngjitni në Dreamweaver. Kufizimi i sasisë së formatimit të ruajtur mund të reduktojë konfliktet e mundshme të stilit.

Për të ndryshuar cilësimet e panelit, klikoni skedën blu jQuery Accordion në krye të paneleve në zonën e projektimit.

Kur klikoni në skedën blu, cilësimet e panelit shfaqen në inspektorin "Property". (Klikimi i saktë i skedës blu mund të jetë i ndërlikuar, prandaj sigurohuni që të klikoni në zonën blu.) Klikoni kudo tjetër në faqe dhe inspektori kthehet në cilësimet e tij të paracaktuara.

Shtoni ose hiqni panele duke përdorur fushën Panele në inspektorin e pronës.

Për të shtuar një panel, klikoni shenjën plus (+) në të djathtë të fushës Panele. Për të hequr një panel nga një grup fizarmonikësh, së pari zgjidhni emrin e panelit në listën rënëse Panels në inspektorin e vetive dhe më pas klikoni shenjën minus (@@min).

Mund të shtoni një panel tjetër duke klikuar sërish shenjën plus.

Ndryshoni mënyrën se si hapen panelet duke përdorur menynë rënëse Ngjarje.

Cilësimet e ngjarjes kontrollojnë nëse panelet hapen kur një përdorues klikon në një skedë paneli (Kliko) ose rrotullon një kursor mbi skedën e panelit (Mouseover).

Vendosni opsionet e tjera të panelit, sipas dëshirës.

Opsionet e fizarmonikës në "Property inspector" janë opsionale dhe përfshijnë aftësinë për të çaktivizuar një ose të gjitha panelet (Disable) dhe për të animuar mënyrën e hapjes dhe mbylljes së paneleve (Lista rënëse Animate).

Zgjidhni File→Save për të ruajtur faqen; kur shfaqet kutia e dialogut Copy Dependent Files, klikoni OK për të gjeneruar të gjithë skedarët e lidhur.

Që veçoritë Spry të funksionojnë, duhet t'i ngarkoni këta skedarë në serverin tuaj të internetit kur ngarkoni faqen e internetit.

Për të ndryshuar pamjen e panelit, si p.sh. fytyra e shkronjave ose ngjyra e tekstit, modifikoni rregullin përkatës CSS.

Shënim: Nuk mund të modifikoni stilet përkatëse për një panel fizarmonikë derisa faqja të jetë ruajtur dhe Dreamweaver të ketë gjeneruar skedarët përkatës CSS dhe JavaScript.

Për të parë se si do të shfaqen panelet në një shfletues ueb, klikoni ikonën e globit në krye të hapësirës së punës dhe zgjidhni shfletuesin që dëshironi të përdorni për të parë paraprakisht faqen.

Kur jeni duke përdorur kompjuterin tuaj për të parë paraprakisht një faqe që ka një veçori interaktive që kërkon JavaScript ose një program tjetër, disa shfletues ueb, duke përfshirë Internet Explorer, do të shfaqin një paralajmërim që thotë se duhet të lejoni kontrollet ActiveX për të parë faqen.

Ky është një paralajmërim sigurie që shfaqet vetëm kur faqja hapet në të njëjtin kompjuter ku ruhet faqja. Nëse e publikoni faqen në një server në internet dhe më pas e shihni atë përmes një lidhjeje interneti, ky gabim nuk do të shfaqet për ju ose vizitorët e faqes suaj.