Kako ustvariti zložljive plošče z jQuery v Dreamweaverju

Pripomoček harmonika uporabniškega vmesnika jQuery v Dreamweaverju omogoča preprosto dodajanje zložljivih plošč, ki jih obiskovalci spletnega mesta lahko odprejo in zaprejo brez osveževanja spletne strani. Ta funkcija jQuery vam omogoča, da bolje izkoristite prostor na strani, tako da prikažete več informacij na manj prostora v oknu brskalnika.

Na tem spletnem mestu o naravi lahko vidite, kako zložljive plošče za harmoniko vsebujejo ime, fotografijo in habitatne nastavitve vsake ptice pevke. Rezultat je, da lahko preprosto vidite imena vseh ptic na eni strani. Za ogled opisa katere koli ptice mora uporabnik samo klikniti zavihek na vrhu plošče (kjer se prikaže ime ptice) in plošča se odpre takoj.

Fotografija in opis za oranžno kronano peličico sta odprta, ostali na strani pa so zaprti. Lepota jQueryja je v tem, da strani ni treba znova naložiti, da se plošče odprejo ali zaprejo. Enkrat kliknite na zavihek in plošča se takoj odpre. Kliknite drug zavihek in ta plošča se odpre, ko se zapre prej odprta plošča.

Zložljive plošče se lahko uporabljajo za prikaz besedila in slik ter večpredstavnostnih datotek, kot so avdio, video in Flash datoteke.

Če si želite ogledati ploščo harmonike (ali številne druge napredne funkcije v Dreamweaverju), kot bo prikazana v spletnem brskalniku, morate klikniti gumb Pogled v živo v zgornjem levem kotu delovnega prostora Dreamweaver.

Ko v Dreamweaverju ustvarite nabor plošč harmonike z menijem uporabniškega vmesnika jQuery, lahko spremenite številne nastavitve plošče z uporabo inšpektorja lastnosti, kot je prikazano v naslednjih navodilih.

Sledite tem korakom, da ustvarite komplet plošč za harmonike:

Postavite kazalec na stran, kjer želite, da se prikažejo plošče harmonike.

Izberite Vstavljanje→ Uporabniški vmesnik jQuery→ Harmonika ali kliknite element Harmonika na plošči Vstavljanje uporabniškega vmesnika jQuery.

Na strani se prikaže skupina zložljivih plošč harmonika jQuery UI s tremi ploščami.

Izberite besedo Razdelek na vrhu vsake plošče in jo zamenjajte z besedilom, ki ga želite prikazati v območju zavihkov plošče.

Privzeto je besedilo v območju zavihka navadno besedilo, vendar ga lahko spremenite tako, da spremenite ustrezno pravilo CSS ali formatirate besedilo z oznakami HTML, kot so oznake naslovov.

Izberite besedo Vsebina v glavnem delu vsake plošče in vnesite poljubno besedilo ali slike, ki jih želite prikazati.

Besedilo lahko prilepite v ploščo, tako kot bi besedilo prilepili kamor koli drugje na strani. Podobno vstavite slike v plošče tako kot kjer koli drugje na strani: postavite kazalec na ploščo, izberite Vstavi → Slika → Slika in izberite datoteko GIF, JPEG ali PNG, ki jo želite prikazati. Izberete lahko tudi datoteko Photoshop, če želite uporabiti Dreamweaver za optimizacijo slik.

Ko prilepite besedilo v ploščo, izberite Uredi→ Posebno lepljenje, da izberete količino oblikovanja, ki jo želite ohraniti v besedilu, ki ga prilepite v Dreamweaverju. Omejevanje količine ohranjenega oblikovanja lahko zmanjša morebitne slogovne konflikte.

Če želite spremeniti nastavitve plošče, kliknite modri zavihek jQuery Accordion na vrhu plošč v območju oblikovanja.

Ko kliknete modri zavihek, se nastavitve plošče prikažejo v inšpektorju lastnosti. (Pravilno klikanje modrega zavihka je lahko težavno, zato se prepričajte, da kliknete modro območje.) Kliknite kjer koli drugje na strani in inšpektor se vrne na privzete nastavitve.

Dodajte ali odstranite plošče z uporabo polja Panels v inšpektorju lastnosti.

Če želite dodati ploščo, kliknite znak plus (+) na desni strani polja Plošče. Če želite odstraniti ploščo iz kompleta harmonike, najprej izberite ime plošče na spustnem seznamu Panels v Inšpektorju lastnosti in nato kliknite znak minus (@@min).

Dodate lahko še eno ploščo tako, da znova kliknete znak plus.

Spremenite način odpiranja plošč s spustnim menijem Dogodek.

Nastavitve dogodka nadzirajo, ali se plošče odprejo, ko uporabnik klikne zavihek plošče (Klik) ali premakne kazalec čez zavihek plošče (Premak miške).

Po želji nastavite druge možnosti plošče.

Možnosti harmonike v inšpektorju lastnosti so neobvezne in vključujejo možnost onemogočanja katere koli ali vseh plošč (Onemogoči) in animiranja načina odpiranja in zapiranja plošč (spustni seznam Animiraj).

Izberite Datoteka→ Shrani, da shranite stran; ko se prikaže pogovorno okno Kopiraj odvisne datoteke, kliknite V redu, da ustvarite vse povezane datoteke.

Da bi funkcije Spry delovale, morate te datoteke naložiti na svoj spletni strežnik, ko naložite spletno stran.

Če želite spremeniti videz plošče, kot je obraz pisave ali barva besedila, uredite ustrezno pravilo CSS.

Opomba: ne morete urejati ustreznih slogov za ploščo harmonike, dokler ni stran shranjena in Dreamweaver ustvari ustrezne datoteke CSS in JavaScript.

Če si želite ogledati, kako bodo plošče prikazane v spletnem brskalniku, kliknite ikono globusa na vrhu delovnega prostora in izberite brskalnik, ki ga želite uporabiti za predogled strani.

Ko uporabljate računalnik za predogled strani, ki ima interaktivno funkcijo, ki zahteva JavaScript ali drugo programiranje, bodo nekateri spletni brskalniki, vključno z Internet Explorerjem, prikazali opozorilo, da morate kontrolnikom ActiveX dovoliti ogled strani.

To je varnostno opozorilo, ki se prikaže samo, ko stran odprete na istem računalniku, kjer je stran shranjena. Če stran objavite v spletnem strežniku in si jo nato ogledate prek internetne povezave, se ta napaka ne bo prikazala vam ali obiskovalcem vašega spletnega mesta.