Kaip sukurti skirtukus su jQuery programoje Dreamweaver

„JQuery UI Tab“ parinktis „Dreamweaver“ leidžia lengvai pridėti skydelių, kuriuose rodomas arba slepiamas turinys, atitinkantis skirtukų seriją. Panašiai kaip sulankstomose plokštėse, ši „jQuery“ vartotojo sąsajos funkcija leidžia rodyti daugiau informacijos ir mažiau vietos naršyklės lange.

Panašiai kaip akordeono skydeliai, skydeliai su skirtukais gali būti naudojami tekstui, vaizdams ir daugialypės terpės rodyti.

Kurdami skydelius su skirtukais naudodami „jQuery“ vartotojo sąsajos valdiklį „Dreamweaver“, galite nurodyti skirtukų tvarką ir efektyviai valdyti, koks turinys bus rodomas pirmą kartą įkeliant puslapį.

Norėdami sukurti skydelių grupę su skirtukais, atlikite šiuos veiksmus:

Užveskite žymeklį ant puslapio, kuriame norite, kad būtų rodomas skydelis su skirtukais.

Pasirinkite Įterpti → jQuery UI → Skirtukai arba spustelėkite elementą Tabs jQuery UI įterpimo skydelyje.

Į puslapį įterpiamas skydelis su skirtukais ir atitinkami CSS failai rodomi CSS Designer šaltinio skydelyje.

Pagrindinėje darbo srityje paeiliui pasirinkite Tab1, Tab2 ir Tab 3 tekstus, tada pakeiskite kiekvieno skirtuko antraštę tekstu, kurį norite rodyti skydelio skirtukų srityje.

Skirtukų turinį galite redaguoti tik darbo srityje, o ne nuosavybės inspektoriuje. Pagal numatytuosius nustatymus skirtuko srityje esantis tekstas yra paryškintas ir juodas, tačiau galite pakeisti šį formatavimą pakeisdami atitinkamą CSS taisyklę.

Norėdami koreguoti kiekvieno skirtuko dydį, pasirinkite skirtuką ir naudokite nuosavybės inspektoriaus aukščio ir pločio nustatymus.

Pasirinkus atskirą skirtuką, nuosavybės inspektorius rodo konkrečiai to skirtuko nustatymus.

Norėdami pridėti turinį, bet kurio pasirinkto skirtuko skydelio pagrindinėje srityje pasirinkite žodį Turinys ir įveskite tekstą, vaizdus arba daugialypės terpės informaciją.

Galite nukopijuoti tekstą į skydelį įklijuodami jį taip, kaip įklijuotumėte tekstą bet kurioje kitoje puslapio vietoje. Panašiai įterpkite vaizdus į skydelius taip, kaip darytumėte bet kur kitur puslapyje: Pasirinkite Įterpti → Vaizdas → Vaizdas, tada pasirinkite GIF, JPEG arba PNG failą, kurį norite rodyti. Taip pat galite pridėti daugialypės terpės arba „Photoshop“ failų, jei norite naudoti „Dreamweaver“ vaizdams optimizuoti.

Norėdami pakeisti skirtuko ar skydelio išvaizdą, pvz., šrifto veidą arba spalvą, redaguokite atitinkamą CSS taisyklę.

Pavyzdžiui, norėdami redaguoti teksto spalvą arba šriftą skirtukuose, pažymėkite laukelį aplink skirtuką ir langelis aplink stilių bus automatiškai parenkamas skydelyje CSS Designer Selector.

Norėdami redaguoti skirtukų skydelių skaičių arba tvarką, dizaino srityje esančio skydelio viršuje spustelėkite mėlyną skirtuką jQuery Tabs.

Spustelėjus mėlyną skirtuką, skydelio nustatymai rodomi nuosavybės inspektoriuje. Spustelėkite už mėlynos srities ribų ir nuosavybės inspektorius grįš į numatytuosius nustatymus.

Norėdami pridėti skirtukų, spustelėkite pliuso ženklo (+) piktogramą nuosavybės inspektoriuose.

Darbo srityje atsiranda naujų skirtukų.

Norėdami pakeisti skirtukų tvarką, ypatybių inspektoriuose pasirinkite skirtuko pavadinimą ir naudokite rodykles lauke Skydai, kad perkeltumėte skydelį.

Keičiant tvarką, skydelių pavadinimai meniu juda aukštyn ir žemyn. Skydai ir atitinkami skirtukai tinklalapyje rodomi tokia tvarka, kokia jie rodomi nuosavybės inspektoriuose.

Išskleidžiamajame skydelių sąraše pasirinkite skydelį, kurį norite rodyti, kai puslapis įkeliamas į žiniatinklio naršyklę.

Išskleidžiamasis sąrašas atitinka pavadinimus, kuriuos suteikiate kiekvienam darbo srities skirtukui.

Norėdami išsaugoti puslapį, pasirinkite Failas→Išsaugoti; Kai pasirodys dialogo langas Kopijuoti priklausomus failus, spustelėkite Gerai, kad automatiškai sugeneruotumėte visus susijusius failus.

Kad jQuery UI funkcijos veiktų, įkeldami tinklalapį turite įkelti šiuos failus į savo žiniatinklio serverį.

Spustelėkite gaublio piktogramą darbo srities viršuje ir pasirinkite naršyklę, kad peržiūrėtumėte savo darbą naršyklėje.

Atsižvelgiant į žiniatinklio naršyklę, gali reikėti leisti ActiveX valdikliui peržiūrėti puslapį kompiuteryje.