Kuidas luua Dreamweaveris jQueryga kokkupandavaid paneele

Dreamweaveri jQuery UI akordionividin muudab kokkupandavate paneelide lisamise lihtsaks, mida saidi külastajad saavad avada ja sulgeda ilma veebilehte värskendamata. See jQuery funktsioon võimaldab teil lehe ruumi paremini ära kasutada, kuvades brauseriaknas rohkem teavet väiksemas ruumis.

Sellelt loodusveebisaidilt näete, kuidas akordioni kokkupandavad paneelid sisaldavad iga laululinnu nime, fotot ja elupaigaeelistusi. Tulemuseks on see, et näete ühel lehel hõlpsalt kõigi lindude nimesid. Mis tahes linnu kirjelduse vaatamiseks peab kasutaja klõpsama paneeli ülaosas olevat vahekaarti (kus on linnu nimi) ja paneel avaneb kohe.

Foto ja kirjeldus oranži võraga võsa kohta on avatud, teised lehel olevad on suletud. JQuery ilu seisneb selles, et paneelide avamiseks või sulgemiseks ei pea lehte uuesti laadima. Klõpsake vahekaardil üks kord ja paneel avaneb kohe. Klõpsake teist vahekaarti ja see paneel avaneb, kui varem avatud paneel sulgub.

Kokkupandavaid paneele saab kasutada teksti ja piltide ning multimeediumifailide (nt heli-, video- ja Flash-failide) kuvamiseks.

Akordionipaneeli (või paljude muude Dreamweaveri lisafunktsioonide) vaatamiseks veebibrauseris kuvatuna peate klõpsama Dreamweaveri tööala vasakus ülanurgas nuppu Otsevaade.

Kui olete Dreamweaveris jQuery kasutajaliidese menüüga loonud akordionipaneelide komplekti, saate atribuutide inspektori abil muuta mitmeid paneeli sätteid, nagu on näidatud järgmistes juhistes.

Akordionipaneeli komplekti loomiseks järgige neid samme:

Viige kursor lehele, kuhu soovite akordionipaneelid kuvada.

Valige Lisa → jQuery kasutajaliides → Akordion või klõpsake jQuery kasutajaliidese lisamise paneelil üksust Akordion.

Lehele ilmub jQuery kasutajaliidese kokkupandav kolme paneeliga akordionipaneelide rühm.

Valige iga paneeli ülaosas sõna Section ja asendage see tekstiga, mida soovite kuvada paneeli vahekaardil.

Vaikimisi on tabeldusalal olev tekst lihttekst, kuid saate seda muuta, muutes vastavat CSS-reeglit või vormindades teksti HTML-märgendite (nt päisesildid) abil.

Valige iga paneeli põhialal sõna Sisu ja sisestage tekst või pildid, mida soovite kuvada.

Saate kleepida teksti paneelile täpselt nii, nagu kleepiksite teksti mujale lehele. Sarnaselt sisestate pilte paneelidesse täpselt nagu mujale lehele: asetage kursor paneelile, valige Lisa → Pilt → Pilt ja valige GIF-, JPEG- või PNG-fail, mida soovite kuvada. Kui soovite piltide optimeerimiseks kasutada Dreamweaverit, saate valida ka Photoshopi faili.

Kui kleepite teksti paneelile, valige Redigeeri → Kleebi spetsiaalselt, et valida vormingu hulk, mida soovite Dreamweaveris kleebitavas tekstis säilitada. Säilitatava vormingu hulga piiramine võib vähendada võimalikke stiilikonflikte.

Paneeli sätete muutmiseks klõpsake kujundusalas paneelide ülaosas sinist vahekaarti jQuery Accordion.

Kui klõpsate sinist vahekaarti, kuvatakse paneeli sätted atribuutide inspektoris. (Sinisel vahekaardil õige klõpsamine võib olla keeruline, seega klõpsake kindlasti sinist ala.) Klõpsake lehel mujal ja inspektor naaseb vaikeseadetele.

Lisage või eemaldage paneele, kasutades atribuutide inspektori välja Paneelid.

Paneeli lisamiseks klõpsake väljast Paneelid paremal olevat plussmärki (+). Paneeli eemaldamiseks akordionikomplektist valige esmalt paneeli nimi Atribuutide inspektori ripploendist Paneelid ja seejärel klõpsake miinusmärki (@@min).

Saate lisada veel ühe paneeli, klõpsates uuesti plussmärgil.

Muutke paneelide avamise viisi, kasutades rippmenüüd Sündmus.

Sündmuse sätted määravad, kas paneelid avanevad, kui kasutaja klõpsab paneeli vahekaardil (Klikk) või viib kursori paneeli vahekaardile (Mouseover).

Soovi korral määrake muud paneelivalikud.

Omandiinspektori akordionivalikud on valikulised ja hõlmavad võimalust keelata mis tahes või kõik paneelid (Keela) ja animeerida paneelide avanemis- ja sulgemisviisi (rippmenüüs Animeerida).

Lehekülje salvestamiseks vali Fail→Salvesta; Kui kuvatakse dialoogiboks Kopeeri sõltuvad failid, klõpsake kõigi seotud failide genereerimiseks nuppu OK.

Et Spry funktsioonid töötaksid, peate need failid veebilehe üleslaadimisel oma veebiserverisse üles laadima.

Paneeli välimuse (nt fondi näo või teksti värvi) muutmiseks muutke vastavat CSS-reeglit.

Märkus. Te ei saa akordionipaneeli vastavaid stiile muuta enne, kui leht on salvestatud ja Dreamweaver on loonud vastavad CSS- ja JavaScript-failid.

Et näha, kuidas paneelid veebibrauseris kuvatakse, klõpsake tööala ülaosas maakera ikooni ja valige brauser, mida soovite lehe eelvaate kuvamiseks kasutada.

Kui kasutate oma arvutit JavaScripti või muud programmeerimist vajava interaktiivse funktsiooniga lehe eelvaateks, kuvavad mõned veebibrauserid, sealhulgas Internet Explorer, hoiatuse, et peate lubama lehe vaatamiseks ActiveX-juhtelemente.

See on turvahoiatus, mis kuvatakse ainult siis, kui leht avatakse samas arvutis, kuhu leht on salvestatud. Kui avaldate lehe veebiserveris ja vaatate seda seejärel Interneti-ühenduse kaudu, ei kuvata seda tõrget teile ega teie saidi külastajatele.