Kuidas luua Dreamweaveris jQueryga vahekaartidega paneele

Dreamweaveri jQuery UI Tab suvand muudab paneelide seeria lisamise lihtsaks, mis kuvavad või peidavad vahelehtede seeriale vastavat sisu. Sarnaselt kokkupandavatele paneelidele võimaldab see jQuery kasutajaliidese funktsioon kuvada rohkem teavet brauseriaknas väiksemas ruumis.

Sarnaselt akordionipaneelidele saab vahekaartidega paneele kasutada teksti, piltide ja multimeediumi kuvamiseks.

Kui loote Dreamweaveris jQuery kasutajaliidese vidinaga vahekaartidega paneele, saate määrata vahekaartide järjekorra, kontrollides tõhusalt, milline sisu lehe esmakordsel laadimisel kuvatakse.

Vahelehtedega paneelirühma loomiseks järgige neid samme.

Viige kursor lehele, kuhu soovite vahekaartidega paneeli kuvada.

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

Lehele lisatakse vahekaartidega paneel ja vastavad CSS-failid kuvatakse paneelil CSS Designer Source.

Valige põhitööruumis kordamööda Tab1, Tab2 ja Tab 3 tekst ning seejärel asendage iga vahelehe päis tekstiga, mida soovite paneeli vahekaartide alal kuvada.

Vahekaartide sisu saate redigeerida ainult tööalal, mitte atribuutide inspektoris. Vaikimisi on vahekaardi ala tekst rasvane ja must, kuid saate seda vormingut muuta, muutes vastavat CSS-reeglit.

Iga vahekaardi suuruse reguleerimiseks valige vahekaart ja seejärel kasutage atribuutide inspektori sätteid Kõrgus ja Laius.

Kui valitud on eraldi vahekaart, kuvab atribuutide inspektor selle vahekaardi sätted.

Sisu lisamiseks valige mis tahes valitud vahekaardi paneeli põhialal sõna Sisu ja seejärel sisestage tekst, pildid või multimeedium.

Saate teksti paneelile kopeerida, kleepides selle täpselt nii, nagu kleepiksite teksti mujale lehele. Sarnaselt sisestage pilte paneelidesse täpselt nagu mujal lehel: valige Lisa → Pilt → Pilt ja seejärel GIF-, JPEG- või PNG-fail, mida soovite kuvada. Kui soovite oma piltide optimeerimiseks kasutada Dreamweaverit, saate lisada ka multimeediumi- või Photoshopi faile.

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

Näiteks vahekaartidel oleva teksti värvi või fondi muutmiseks valige vahekaardi ümber olev kast ja stiili ümber olev kast valitakse automaatselt CSS-i kujundaja valija paneelil.

Vahekaartidega paneelide arvu või järjestuse muutmiseks klõpsake kujundusalas asuva paneeli ülaosas sinist vahekaarti jQuery Tabs.

Kui klõpsate sinist vahekaarti, kuvatakse paneeli sätted atribuutide inspektoris. Klõpsake väljaspool sinist kastiga ala ja atribuutide inspektor naaseb vaikeseadetele.

Vahelehtede lisamiseks klõpsake atribuutide inspektoris plussmärgi (+) ikooni.

Tööalale ilmuvad uued vahelehed.

Vahekaartide järjestuse muutmiseks valige atribuutide inspektoris vahekaardi nimi ja seejärel kasutage paneeli liigutamiseks väljal Paneelid olevaid nooli.

Paneelide nimed liiguvad menüüs üles ja alla, kui järjekorda muudetakse. Paneelid ja nende vastavad vahekaardid kuvatakse veebilehel selles järjekorras, nagu need kuvatakse kinnisvarainspektoris.

Valige ripploendist Paneelid paneel, mida soovite kuvada, kui leht laaditakse veebibrauserisse.

Rippmenüü vastab nimedele, mille annate igale tööruumi vahekaardile.

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

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

Klõpsake tööala ülaosas maakera ikoonil ja valige brauser, et oma tööd brauseris eelvaadata.

Olenevalt teie veebibrauserist peate võib-olla lubama ActiveX-juhtelementidel lehe eelvaate kuvamiseks teie arvutis.