Kako stvoriti sklopive ploče pomoću jQueryja u Dreamweaveru

jQuery UI harmonika widget u Dreamweaveru olakšava dodavanje sklopivih ploča koje posjetitelji web-mjesta mogu otvarati i zatvarati bez osvježavanja web stranice. Ova značajka jQueryja omogućuje vam da bolje iskoristite prostor na stranici prikazujući više informacija na manje prostora u prozoru preglednika.

Možete vidjeti kako sklopivi paneli za harmoniku sadrže naziv, fotografiju i preferencije staništa svake ptice pjevice na ovoj web stranici o prirodi. Rezultat je da na jednoj stranici lako možete vidjeti imena svih ptica. Za prikaz opisa bilo koje ptice, korisnik treba samo kliknuti karticu na vrhu ploče (gdje se pojavljuje ime ptice) i ploča se odmah otvara.

Fotografija i opis za narančasto okrunjenu pečurku su otvoreni dok su ostali na stranici zatvoreni. Ljepota jQueryja je u tome što se stranica ne mora ponovno učitavati da bi se ploče otvorile ili zatvorile. Kliknite jednom na karticu i ploča se odmah otvara. Kliknite drugu karticu i ta će se ploča otvoriti kao što se zatvori prethodno otvorena ploča.

Sklopive ploče mogu se koristiti za prikaz teksta i slika, kao i multimedijskih datoteka kao što su audio, video i Flash datoteke.

Da biste vidjeli ploču harmonike (ili mnoge druge napredne značajke u Dreamweaveru) kako će se pojaviti u web-pregledniku, trebate kliknuti gumb Live view u gornjem lijevom kutu radnog prostora Dreamweavera.

Nakon što stvorite skup harmonika ploča s jQuery UI izbornikom u Dreamweaveru, možete promijeniti brojne postavke ploče pomoću Property inspectora, kao što je prikazano u uputama koje slijede.

Slijedite ove korake da biste stvorili set ploča za harmoniku:

Postavite pokazivač na stranicu na kojoj želite da se pojave ploče harmonike.

Odaberite Umetanje→ jQuery UI→ Harmonika ili kliknite stavku Harmonika na ploči Umetanje korisničkog sučelja jQuery.

Na stranici se pojavljuje grupa sklopivih ploča harmonika jQuery UI s tri ploče.

Odaberite riječ Odjeljak na vrhu svake ploče i zamijenite je tekstom koji želite da se pojavi u području kartica na ploči.

Prema zadanim postavkama, tekst u području kartice je običan tekst, ali to možete promijeniti izmjenom odgovarajućeg CSS pravila ili formatiranjem teksta pomoću HTML oznaka, kao što su oznake naslova.

Odaberite riječ Sadržaj u glavnom području svake ploče i unesite tekst ili slike koje želite prikazati.

Tekst možete zalijepiti u ploču kao što biste zalijepili tekst bilo gdje drugdje na stranici. Slično, umetnete slike u ploče kao što biste to učinili bilo gdje drugdje na stranici: Postavite pokazivač na ploču, odaberite Umetanje→Slika→Slika i odaberite GIF, JPEG ili PNG datoteku koju želite prikazati. Također možete odabrati datoteku Photoshopa ako želite koristiti Dreamweaver za optimizaciju slika.

Kada zalijepite tekst u ploču, odaberite Uredi→ Posebno zalijepi da biste odabrali količinu oblikovanja koju želite sačuvati u tekstu koji zalijepite u Dreamweaver. Ograničavanje količine sačuvanog oblikovanja može smanjiti potencijalne sukobe stilova.

Da biste promijenili postavke ploče, kliknite plavu karticu jQuery Accordion na vrhu ploča u području dizajna.

Kada kliknete plavu karticu, postavke ploče pojavljuju se u Property inspectoru. (Ispravno klikanje na plavu karticu može biti nezgodno, stoga provjerite jeste li kliknuli plavo područje.) Kliknite bilo gdje drugdje na stranici i inspektor se vraća na zadane postavke.

Dodajte ili uklonite ploče pomoću polja Paneli u Inspektoru svojstava.

Da biste dodali ploču, kliknite znak plus (+) desno od polja Paneli. Da biste uklonili ploču iz seta harmonike, najprije odaberite naziv ploče na padajućem popisu Paneli u Property inspectoru, a zatim kliknite znak minus (@@min).

Možete dodati još jednu ploču ponovnim klikom na znak plus.

Promijenite način otvaranja ploča pomoću padajućeg izbornika Događaj.

Postavke događaja kontroliraju otvaraju li se ploče kada korisnik klikne karticu ploče (Klik) ili prijeđe pokazivač preko kartice ploče (Prelazak mišem).

Postavite druge opcije ploče po želji.

Opcije harmonike u Property inspectoru nisu obavezne i uključuju mogućnost onemogućavanja bilo kojeg ili svih ploča (Onemogući) i animiranja načina na koji se ploče otvaraju i zatvaraju (padajući popis Animiraj).

Odaberite Datoteka→Spremi za spremanje stranice; kada se pojavi dijaloški okvir Kopiraj ovisne datoteke, kliknite U redu za generiranje svih povezanih datoteka.

Da bi Spry značajke funkcionirale, morate prenijeti ove datoteke na svoj web poslužitelj kada prenosite web stranicu.

Da biste promijenili izgled ploče, kao što je lice fonta ili boja teksta, uredite odgovarajuće CSS pravilo.

Napomena: Ne možete uređivati ​​odgovarajuće stilove za ploču harmonike dok se stranica ne spremi i Dreamweaver ne generira odgovarajuće CSS i JavaScript datoteke.

Da biste vidjeli kako će se ploče pojaviti u web-pregledniku, kliknite ikonu globusa na vrhu radnog prostora i odaberite preglednik koji želite koristiti za pregled stranice.

Kada koristite svoje računalo za pregled stranice koja ima interaktivnu značajku koja zahtijeva JavaScript ili neko drugo programiranje, neki web preglednici, uključujući Internet Explorer, prikazat će upozorenje da morate dopustiti ActiveX kontrolama da pregledaju stranicu.

Ovo je sigurnosno upozorenje koje se pojavljuje samo kada se stranica otvori na istom računalu na kojem je stranica spremljena. Ako stranicu objavite na web-poslužitelju, a zatim je pregledate putem internetske veze, ova se pogreška neće pojaviti ni vama ni posjetiteljima vaše stranice.