Hvordan du lager sammenleggbare paneler med jQuery in Dreamweaver - dummies

Den jQuery UI-trekkspill widgeten i Dreamweaver gjør det enkelt å legge sammen sammenleggbare paneler som besøkende kan åpne og lukke uten å oppdatere nettsiden. Denne jQuery-funksjonen gjør at du får bedre utnyttelse av plassen på en side ved å vise mer informasjon på mindre plass i et nettleservindu.

Du kan se hvordan trekkspillets sammenleggbare paneler inneholder navn, bilde og habitatinnstillinger for hver sangfugl på denne natursiden. Resultatet er at du enkelt kan se navnene på alle fuglene på en side. For å se beskrivelsen av noen fugler, trenger en bruker bare å klikke på fanen øverst på panelet (der fuglens navn vises), og panelet åpnes umiddelbart.

Bildet og beskrivelsen for den oransje-kronede kruseren er åpen mens de andre på siden er stengt. Skjønnheten i jQuery er at siden ikke må lastes om for panelene å åpne eller lukke. Klikk en 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.

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

Når du har opprettet et sett med trekkspillpaneler med jQuery UI-menyen i Dreamweaver, kan du endre et antall panelinnstillinger ved hjelp av egenskapsinspektøren, som vist i instruksjonene som følger.

Følg disse trinnene for å lage et trekkspillsett:

Plasser markøren på en side der du vil at trekkspillpanelene skal vises.
Velg Sett inn → jQuery UI → Accordion, eller klikk på Accordion-elementet i panelet for jQuery UI Insert.

En jQuery UI-sammenleggbar trekkspillpanelgruppe med tre paneler vises på siden.
Velg ordet Seksjon øverst på hvert panel, og erstatt det med teksten du vil vises i panelets Tab-område.

Som standard er teksten i Tab-området ren tekst, men du kan endre det ved å endre den tilsvarende CSS-regelen eller formatere teksten ved hjelp av HTML-koder, for eksempel overskriftskodene.
Velg ordet Innhold i hovedområdet av 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 noe annet sted på siden. På samme måte legger du inn bilder i paneler akkurat som du vil noe annet sted 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 spesial for å velge mengden formatering du vil beholde i teksten du limer inn i Dreamweaver. Å begrense mengden formatering bevart kan redusere potensielle stilkonflikter.
Hvis du vil endre panelinnstillingene, klikker du på den blå jQuery Accordion-fanen øverst på panelene i designområdet.

Når du klikker på den blå kategorien, vises panelinnstillingene i Egenskapsinspektøren. (Korrekt å klikke på den blå kategorien kan være vanskelig, så sørg for at du klikker på det blå området.) Klikk et annet sted på siden, og inspektøren returnerer til standardinnstillingene.
Legg til eller fjern paneler ved hjelp av panelet Felt i egenskapsinspektøren.

For å legge til et panel klikker du på plustegnet (+) til høyre for panelet. For å fjerne et panel fra et trekkspill sett, velg først panelnavnet i rullegardinlisten Paneler i Egenskapsinspektøren og klikk deretter minustegnet (@@ min).

Du kan legge til et annet panel ved å klikke på plustegnet igjen.
Endre hvordan paneler åpnes ved å bruke rullegardinmenyen Hendelse.

Hendelsesinnstillingene kontrollerer om panelene åpnes når en bruker klikker på en panelfan (Klikk) eller ruller en markør over panelfanen (Mouseover).
Angi andre panelalternativer, etter ønske.

Trekkalternativene i eiendomsinspektøren er valgfrie, og inkluderer muligheten til å deaktivere noen eller alle paneler (deaktiver) og animere hvordan paneler åpnes og lukkes (animasjonsliste).
Velg Arkiv → Lagre for å lagre siden; Når dialogboksen Kopier avhengighetsfiler vises, klikker du OK for å generere alle relaterte filer.

For at Spry-funksjonene skal fungere, må du laste opp disse filene til webserveren din når du laster opp nettsiden.
For å endre panelets utseende, for eksempel skriftfarge eller tekstfarge, rediger du tilsvarende CSS-regel.

Merk: Du kan ikke redigere de tilsvarende stilene for et trekkspillpanel til siden er lagret, og Dreamweaver har generert tilsvarende CSS- og JavaScript-filer.
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 noen nettlesere, inkludert Internet Explorer, vise en advarsel om at du må tillate ActiveX-kontroller å vise siden.

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