Kaip sukurti sulankstomus skydus naudojant „jQuery“ programoje „Dreamweaver“.

„JQuery“ vartotojo sąsajos akordeono valdiklis „Dreamweaver“ leidžia lengvai pridėti sulankstomų skydelių, kurias svetainės lankytojai gali atidaryti ir uždaryti neatnaujindami tinklalapio. Ši „jQuery“ funkcija leidžia geriau išnaudoti puslapio erdvę, nes naršyklės lange rodoma daugiau informacijos ir mažesnėje erdvėje.

Šioje gamtos svetainėje galite pamatyti, kaip akordeono sulankstomose plokštėse yra kiekvieno paukščio giesmininko vardas, nuotrauka ir buveinės nuostatos. Rezultatas yra tai, kad galite lengvai pamatyti visų paukščių pavadinimus viename puslapyje. Norėdami peržiūrėti bet kurio paukščio aprašą, vartotojui tereikia spustelėti skydelio viršuje esantį skirtuką (kur rodomas paukščio vardas), ir skydelis atsidarys akimirksniu.

Oranžinės karūnėlės nuotrauka ir aprašymas atidaryti, o kitos puslapyje uždaryti. „jQuery“ pranašumas yra tas, kad puslapio nereikia įkelti iš naujo, kad skydai būtų atidaryti ar uždaryti. Vieną kartą spustelėkite skirtuką ir iškart atsidarys skydelis. Spustelėkite kitą skirtuką ir tas skydelis atsidarys, kai uždaromas anksčiau atidarytas skydelis.

Sutraukiamos plokštės gali būti naudojamos tekstui ir vaizdams, taip pat daugialypės terpės failams, pvz., garso, vaizdo įrašams ir „Flash“ failams, rodyti.

Norėdami peržiūrėti akordeono skydelį (ar daugelį kitų išplėstinių Dreamweaver funkcijų), kaip jis bus rodomas žiniatinklio naršyklėje, turite spustelėti mygtuką Tiesioginis vaizdas, esantį viršutiniame kairiajame Dreamweaver darbo srities kampe.

Sukūrę akordeono skydelių rinkinį naudodami „jQuery“ vartotojo sąsajos meniu „Dreamweaver“, galite pakeisti daugybę skydelio nustatymų naudodami nuosavybės inspektorių, kaip parodyta toliau pateiktose instrukcijose.

Norėdami sukurti akordeono skydelio rinkinį, atlikite šiuos veiksmus:

Užveskite žymeklį ant puslapio, kuriame norite, kad būtų rodomos akordeono plokštės.

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

Puslapyje pasirodo jQuery UI sulankstomų akordeono skydelių grupė su trimis skydais.

Kiekvieno skydelio viršuje pasirinkite žodį Section ir pakeiskite jį tekstu, kurį norite matyti skydelio skirtukų srityje.

Pagal numatytuosius nustatymus skirtuko srityje esantis tekstas yra paprastas tekstas, tačiau jį galite pakeisti pakeisdami atitinkamą CSS taisyklę arba formatuodami tekstą naudodami HTML žymas, pvz., antraštės žymas.

Kiekvieno skydelio pagrindinėje srityje pasirinkite žodį Turinys ir įveskite norimą rodyti tekstą ar vaizdus.

Galite įklijuoti tekstą į skydelį taip pat, kaip įklijuojate tekstą bet kurioje kitoje puslapio vietoje. Panašiai į skydelius įterpiate vaizdus, ​​kaip ir bet kurioje kitoje puslapio vietoje: Užveskite žymeklį ant skydelio, pasirinkite Įterpti → Vaizdas → Vaizdas ir pasirinkite norimą rodyti GIF, JPEG arba PNG failą. Taip pat galite pasirinkti Photoshop failą, jei norite naudoti Dreamweaver vaizdams optimizuoti.

Kai įklijuojate tekstą į skydelį, pasirinkite Redaguoti → Įklijuoti specialų, kad pasirinktumėte formatavimo kiekį, kurį norite išsaugoti tekste, kurį įklijuojate Dreamweaver. Apribojus išsaugomo formatavimo kiekį, galima sumažinti galimus stiliaus konfliktus.

Norėdami pakeisti skydelio nustatymus, dizaino srities skydelių viršuje spustelėkite mėlyną skirtuką jQuery Accordion.

Spustelėjus mėlyną skirtuką, skydelio nustatymai rodomi nuosavybės inspektoriuje. (Teisingai spustelėti mėlyną skirtuką gali būti sudėtinga, todėl būtinai spustelėkite mėlyną sritį.) Spustelėkite bet kurioje kitoje puslapio vietoje ir inspektorius grįš į numatytuosius nustatymus.

Pridėkite arba pašalinkite skydelius naudodami nuosavybės inspektoriaus lauką Skydai.

Norėdami pridėti skydelį, spustelėkite pliuso ženklą (+) lauko Skydeliai dešinėje. Norėdami pašalinti skydelį iš akordeono rinkinio, pirmiausia nuosavybės inspektoriaus išskleidžiamajame sąraše Panelės pasirinkite skydelio pavadinimą ir spustelėkite minuso ženklą (@@min).

Dar kartą spustelėdami pliuso ženklą galite pridėti kitą skydelį.

Pakeiskite skydelių atidarymą naudodami išskleidžiamąjį meniu Įvykis.

Įvykio nustatymai valdo, ar skydeliai atidaromi, kai vartotojas spustelėja skydelio skirtuką (Spustelėti), ar perkelia žymeklį virš skydelio skirtuko (užvedimas pelės žymekliu).

Jei norite, nustatykite kitas skydelio parinktis.

Nuosavybės inspektoriaus akordeono parinktys yra neprivalomos ir apima galimybę išjungti bet kurią arba visas skydelius (Išjungti) ir animuoti skydelių atidarymo ir uždarymo būdus (išskleidžiamasis sąrašas Animuoti).

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

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

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

Pastaba: Negalite redaguoti atitinkamų akordeono skydelio stilių, kol puslapis nebus išsaugotas ir Dreamweaver nesugeneravo atitinkamų CSS ir JavaScript failų.

Norėdami pamatyti, kaip skydeliai bus rodomi žiniatinklio naršyklėje, spustelėkite gaublio piktogramą darbo srities viršuje ir pasirinkite naršyklę, kurią norite naudoti puslapiui peržiūrėti.

Kai naudojate kompiuterį norėdami peržiūrėti puslapį, kuriame yra interaktyvi funkcija, kuriai reikalinga „JavaScript“ ar kitas programavimas, kai kurios žiniatinklio naršyklės, įskaitant „Internet Explorer“, parodys įspėjimą, nurodantį, kad turite leisti „ActiveX“ valdiklius peržiūrėti puslapį.

Tai saugos įspėjimas, kuris pasirodo tik tada, kai puslapis atidaromas tame pačiame kompiuteryje, kuriame yra išsaugotas puslapis. Jei paskelbsite puslapį žiniatinklio serveryje ir peržiūrėsite jį naudodami interneto ryšį, ši klaida nebus rodoma jums ar jūsų svetainės lankytojams.