Kokoontaitettavien paneelien luominen jQuerylla Dreamweaverissa

Dreamweaverin jQuery-käyttöliittymän harmonikkawidgetin avulla on helppo lisätä kokoontaitettavia paneeleja, jotka sivuston vierailijat voivat avata ja sulkea päivittämättä verkkosivua. Tämän jQuery-ominaisuuden avulla voit hyödyntää paremmin sivun tilaa näyttämällä enemmän tietoa pienemmässä tilassa selainikkunassa.

Näet tällä luontosivustolla, kuinka harmonikkakokoon taitettavat paneelit sisältävät kunkin laululinnun nimen, valokuvan ja elinympäristötoiveet. Tuloksena on, että voit helposti nähdä kaikkien lintujen nimet yhdellä sivulla. Nähdäkseen minkä tahansa linnun kuvauksen käyttäjän tarvitsee vain napsauttaa paneelin yläosassa olevaa välilehteä (jossa linnun nimi näkyy), ja paneeli avautuu välittömästi.

Oranssikruunuisen partuman kuva ja kuvaus on auki, kun muut sivulla olevat ovat kiinni. JQueryn kauneus on, että sivua ei tarvitse ladata uudelleen, jotta paneelit avautuvat tai sulkeutuvat. Napsauta kerran välilehteä ja paneeli avautuu välittömästi. Napsauta toista välilehteä, ja kyseinen paneeli avautuu, kun aiemmin avattu paneeli sulkeutuu.

Kokoontaitettavia paneeleja voidaan käyttää näyttämään tekstiä ja kuvia sekä multimediatiedostoja, kuten ääni-, video- ja Flash-tiedostoja.

Jos haluat nähdä harmonikkapaneelin (tai monia muita Dreamweaverin lisäominaisuuksia) sellaisena kuin se näkyy verkkoselaimessa, sinun on napsautettava Dreamweaver-työtilan vasemmassa yläkulmassa olevaa Live view -painiketta.

Kun olet luonut joukon harmonikkapaneeleja Dreamweaverin jQuery-käyttöliittymävalikon avulla, voit muuttaa useita paneeliasetuksia Ominaisuusasetusten avulla seuraavien ohjeiden mukaisesti.

Luo harmonikkapaneelisarja seuraavasti:

Aseta kohdistin sivulle, jolle haluat harmonikkapaneelien näkyvän.

Valitse Lisää → jQuery UI → Accordion tai napsauta Accordion-kohtaa jQuery UI Insert -paneelissa.

Sivulle tulee jQuery-käyttöliittymän kokoontaitettava harmonikkapaneeliryhmä, jossa on kolme paneelia.

Valitse sana Osa kunkin paneelin yläreunasta ja korvaa se tekstillä, jonka haluat näkyvän paneelin välilehtialueella.

Oletusarvoisesti Sarkain-alueen teksti on pelkkää tekstiä, mutta voit muuttaa sitä muuttamalla vastaavaa CSS-sääntöä tai muotoilemalla tekstiä käyttämällä HTML-tageja, kuten otsikkotageja.

Valitse sana Sisältö kunkin paneelin pääalueelta ja kirjoita teksti tai kuvat, jotka haluat näyttää.

Voit liittää tekstiä paneeliin aivan kuten liität tekstiä mihin tahansa muualle sivulla. Vastaavasti voit lisätä kuvia paneeleihin aivan kuten missä tahansa muualla sivulla: Aseta kohdistin paneeliin, valitse Lisää → Kuva → Kuva ja valitse näytettävä GIF-, JPEG- tai PNG-tiedosto. Voit myös valita Photoshop-tiedoston, jos haluat käyttää Dreamweaveria kuvien optimointiin.

Kun liität tekstiä paneeliin, valitse Muokkaa→Liitä määräten valitaksesi kuinka paljon muotoilua haluat säilyttää Dreamweaveriin liitettävässä tekstissä. Säilytettävän muotoilun määrän rajoittaminen voi vähentää mahdollisia tyyliristiriitoja.

Voit muuttaa paneelin asetuksia napsauttamalla sinistä jQuery Accordion -välilehteä paneelien yläosassa suunnittelualueella.

Kun napsautat sinistä välilehteä, paneelin asetukset tulevat näkyviin Ominaisuusasetuksiin. (Sinisen välilehden oikea napsauttaminen voi olla hankalaa, joten varmista, että napsautat sinistä aluetta.) Napsauta mitä tahansa muuta sivulla, niin asetukset palaavat oletusasetuksiinsa.

Lisää tai poista paneeleja käyttämällä Paneelit-kenttää Ominaisuusasetuksissa.

Lisää paneeli napsauttamalla plusmerkkiä (+) Paneelit-kentän oikealla puolella. Poistaaksesi paneelin harmonikkasarjasta, valitse ensin paneelin nimi Kiinteistötarkastajan Paneelit-pudotusvalikosta ja napsauta sitten miinusmerkkiä (@@min).

Voit lisätä toisen paneelin napsauttamalla plusmerkkiä uudelleen.

Muuta paneelien avaustapaa avattavan Tapahtuma-valikon avulla.

Tapahtuma-asetukset määrittävät, avautuvatko paneelit, kun käyttäjä napsauttaa paneelin välilehteä (Click) vai vie osoittimen paneelin välilehden päälle (Mouseover).

Aseta muut paneeliasetukset haluamallasi tavalla.

Kiinteistötarkastajan harmonikkavaihtoehdot ovat valinnaisia, ja ne sisältävät mahdollisuuden poistaa käytöstä kaikki tai kaikki paneelit (Poista käytöstä) ja animoida paneelien avaus- ja sulkeutumistapa (Animoi-pudotusvalikko).

Tallenna sivu valitsemalla Tiedosto→Tallenna; Kun Kopioi riippuvat tiedostot -valintaikkuna tulee näkyviin, napsauta OK luodaksesi kaikki liittyvät tiedostot.

Jotta Spry-ominaisuudet toimisivat, sinun on ladattava nämä tiedostot verkkopalvelimellesi, kun lataat verkkosivun.

Muokkaa vastaavaa CSS-sääntöä, jos haluat muuttaa paneelin ulkoasua, kuten fontin pintaa tai tekstin väriä.

Huomautus: Et voi muokata harmonikkapaneelin vastaavia tyylejä ennen kuin sivu on tallennettu ja Dreamweaver on luonut vastaavat CSS- ja JavaScript-tiedostot.

Jos haluat nähdä, miten paneelit näkyvät verkkoselaimessa, napsauta työtilan yläosassa olevaa maapallokuvaketta ja valitse selain, jota haluat käyttää sivun esikatseluun.

Kun esikatselet tietokonettasi sivua, jolla on JavaScript- tai muuta ohjelmointia vaativa interaktiivinen ominaisuus, jotkin verkkoselaimet, mukaan lukien Internet Explorer, näyttävät varoituksen, jonka mukaan sinun on sallittava ActiveX-komponenttien tarkastella sivua.

Tämä on suojausvaroitus, joka tulee näkyviin vain, kun sivu avataan samalla tietokoneella, johon sivu on tallennettu. Jos julkaiset sivun verkkopalvelimelle ja katsot sitä sitten Internet-yhteyden kautta, tämä virhe ei näy sinulle tai sivustosi vierailijoille.