Hvordan lage sammenleggbare paneler med jQuery i Dreamweaver

JQuery UI-trekkspillmodulen i Dreamweaver gjør det enkelt å legge til sammenleggbare paneler som besøkende kan åpne og lukke uten å oppdatere nettsiden. Denne jQuery-funksjonen lar deg utnytte plassen på en side bedre ved å vise mer informasjon på mindre plass i et nettleservindu.

Du kan se hvordan de sammenleggbare trekkspillpanelene inneholder navn, bilde og habitatpreferanser til hver sangfugl på dette naturnettstedet. Resultatet er at du enkelt kan se navnene på alle fuglene på én side. For å se beskrivelsen av en fugl, trenger en bruker bare å klikke på fanen øverst i panelet (der fuglens navn vises), og panelet åpnes umiddelbart.

Bildet og beskrivelsen for oransjekransangeren er åpen mens de andre på siden er lukket. Det fine med jQuery er at siden ikke trenger å lastes inn på nytt for at panelene skal åpne eller lukke. Klikk én gang på en fane og et panel åpnes umiddelbart. Klikk på en annen fane, og det panelet åpnes når det tidligere åpnede panelet lukkes.

Sammenleggbare paneler kan brukes til å vise tekst og bilder samt multimediefiler som lyd-, video- og Flash-filer.

For å se et trekkspillpanel (eller mange andre avanserte funksjoner i Dreamweaver) slik det vil vises i en nettleser, må du klikke på Live view-knappen øverst til venstre i Dreamweaver-arbeidsområdet.

Etter at du har opprettet et sett med trekkspillpaneler med jQuery UI-menyen i Dreamweaver, kan du endre en rekke panelinnstillinger ved å bruke egenskapsinspektøren, som vist i instruksjonene som følger.

Følg disse trinnene for å lage et trekkspillpanelsett:

Plasser markøren på en side der du vil at trekkspillpanelene skal vises.

Velg Sett inn → jQuery UI → Trekkspill, eller klikk på trekkspillelementet i panelet for jQuery UI Insert.

En jQuery UI sammenleggbar trekkspillpanelgruppe med tre paneler vises på siden.

Velg ordet Seksjon øverst i hvert panel, og erstatt det med teksten du vil skal vises i panelets faneområde.

Som standard er teksten i Tab-området ren tekst, men du kan endre det ved å endre den korresponderende CSS-regelen eller formatere teksten ved hjelp av HTML-tagger, for eksempel overskriftstaggene.

Velg ordet innhold i hovedområdet på hvert panel, og skriv inn tekst eller bilder du vil vise.

Du kan lime inn tekst i et panel akkurat som du vil lime inn tekst andre steder på siden. På samme måte setter du inn bilder i paneler akkurat som du ville andre steder på en side: Plasser markøren i panelet, velg Sett inn → Bilde → Bilde, og velg GIF-, JPEG- eller PNG-filen du vil vise. Du kan også velge en Photoshop-fil hvis du vil bruke Dreamweaver til å optimalisere bilder.

Når du limer inn tekst i et panel, velger du Rediger → Lim inn spesielt for å velge hvor mye formatering du vil beholde i teksten du limer inn i Dreamweaver. Å begrense mengden formatering som bevares kan redusere potensielle stilkonflikter.

For å endre panelinnstillingene, klikk på den blå jQuery Accordion-fanen øverst på panelene i designområdet.

Når du klikker på den blå fanen, vises panelinnstillingene i egenskapsinspektøren. (Det kan være vanskelig å klikke på den blå fanen riktig, så sørg for at du klikker på det blå området.) Klikk et annet sted på siden, og inspektøren går tilbake til standardinnstillingene.

Legg til eller fjern paneler ved hjelp av Paneler-feltet i egenskapsinspektøren.

For å legge til et panel, klikk på plusstegnet (+) til høyre for Paneler-feltet. For å fjerne et panel fra et trekkspillsett, velg først panelnavnet i rullegardinlisten Paneler i egenskapsinspektøren og klikk deretter på minustegnet (@@min).

Du kan legge til et annet panel ved å klikke på plusstegnet igjen.

Endre hvordan paneler åpnes ved å bruke rullegardinmenyen Hendelse.

Hendelsesinnstillingene kontrollerer om panelene åpnes når en bruker klikker på en panelfane (klikk) eller ruller en markør over panelfanen (Mouseover).

Still inn andre panelalternativer etter ønske.

Trekkspillalternativene i egenskapsinspektøren er valgfrie, og inkluderer muligheten til å deaktivere noen eller alle paneler (Deaktiver) og animere måten paneler åpnes og lukkes på (rullegardinlisten Animer).

Velg Fil → Lagre for å lagre siden; når dialogboksen Kopier avhengige filer vises, klikker du OK for å generere alle de relaterte filene.

For at Spry-funksjonene skal fungere, må du laste opp disse filene til webserveren når du laster opp nettsiden.

For å endre utseendet på panelet, for eksempel fonten eller tekstfargen, rediger den tilsvarende CSS-regelen.

Merk: Du kan ikke redigere de tilsvarende stilene for et trekkspillpanel før siden er lagret og Dreamweaver har generert de tilsvarende CSS- og JavaScript-filene.

For å se hvordan panelene vil vises i en nettleser, klikk på globusikonet øverst i arbeidsområdet og velg nettleseren du vil bruke til å forhåndsvise siden.

Når du bruker datamaskinen til å forhåndsvise en side som har en interaktiv funksjon som krever JavaScript eller annen programmering, vil enkelte nettlesere, inkludert Internet Explorer, vise en advarsel som sier at du må tillate ActiveX-kontroller å se siden.

Dette er en sikkerhetsadvarsel som vises kun når siden åpnes på samme datamaskin som siden er lagret. Hvis du publiserer siden til en webserver og deretter viser den over en Internett-tilkobling, vil denne feilen ikke vises for deg eller de besøkende på nettstedet.