Sådan oprettes sammenklappelige paneler med jQuery i Dreamweaver - dummies

JQuery UI accordion-widgeten i Dreamweaver gør det nemt at tilføje sammenklappelige paneler, som besøgende kan åbne og lukke uden at opdatere websiden. Denne jQuery-funktion gør det muligt at udnytte pladsen på en side bedre ved at vise mere information på mindre plads i et browservindue.

Du kan se, hvordan de accordeon sammenfoldelige paneler indeholder navn, foto og habitat præferencer for hver sangfugl på denne natur hjemmeside. Resultatet er, at du nemt kan se navnene på alle fuglene på en side. For at se beskrivelsen af en hvilken som helst fugl, skal en bruger kun klikke på fanen øverst på panelet (hvor fuglens navn vises), og panelet åbnes øjeblikkeligt.

Fotografiet og beskrivelsen til den orangekronede krybbe er åben, mens de andre på siden er lukkede. Skønheden i jQuery er, at siden ikke skal genindlæses for panelerne at åbne eller lukke. Klik en gang på en fane, og et panel åbnes øjeblikkeligt. Klik på en anden fane, og dette panel åbnes, når det tidligere åbnede panel lukkes.

Sammenklappelige paneler kan bruges til at vise tekst og billeder samt multimediefiler som lyd-, video- og Flash-filer.

For at se et accordeonpanel (eller mange andre avancerede funktioner i Dreamweaver), som det vises i en webbrowser, skal du klikke på knappen Live visning øverst til venstre i Dreamweaver-arbejdsområdet.

Når du har oprettet et sæt accordeonpaneler med menuen jQuery UI i Dreamweaver, kan du ændre et antal panelindstillinger ved hjælp af Property inspektøren, som vist i instruktionerne, der følger.

Følg disse trin for at oprette et akkordpanelsæt:

Placer markøren på en side, hvor du vil have accordeonpanelerne til at vises.
Vælg Indsæt → jQuery UI → Accordion, eller klik på Accordion i panelet jQuery UI Insert.

Der vises en jQuery UI sammenfoldelig accordeonpanelgruppe med tre paneler på siden.
Vælg ordet Sektion øverst på hvert panel, og erstat det med den tekst, du vil vises i panelets faneblad.

Som standard er teksten i fanebladet almindelig tekst, men du kan ændre det ved at ændre den tilsvarende CSS-regel eller formatere teksten ved hjælp af HTML-tags, f.eks. Overskriftstaggerne.
Vælg ordet Indhold i hovedområdet på hvert panel og indtast tekst eller billeder, du vil vise.

Du kan indsætte tekst i et panel ligesom du vil indsætte tekst andetsteds på siden. På samme måde indsætter du billeder i paneler ligesom du ville andre steder på en side: Placer markøren i panelet, vælg Indsæt → Billede → Billede, og vælg den GIF, JPEG eller PNG-fil, du vil vise.Du kan også vælge en Photoshop-fil, hvis du vil bruge Dreamweaver til at optimere billeder.

Når du indsætter tekst i et panel, skal du vælge Rediger → Indsæt specielt for at vælge størrelsen af den formatering, du vil bevare i den tekst, du indsætter i Dreamweaver. At begrænse mængden af formateret bevaret kan reducere potentielle stilkonflikter.
For at ændre panelindstillingerne skal du klikke på fanen blå jQuery Accordion øverst på panelerne i designområdet.

Når du klikker på den blå fane, vises panelindstillingerne i ejendomsinspektøren. (Korrekt klik på den blå fane kan være vanskelig, så sørg for at klikke på det blå område.) Klik et andet sted på siden, og inspektøren vender tilbage til standardindstillingerne.
Tilføj eller fjern paneler ved hjælp af feltet Paneler i egenskabsinspektøren.

For at tilføje et panel skal du klikke på plustegnet (+) til højre for panelet. For at fjerne et panel fra et akkordsæt, skal du først vælge panelnavnet på rullemenuen Paneler i egenskabsinspektøren og derefter klikke på minustegnet (@@ min).

Du kan tilføje et andet panel ved at klikke på plustegnet igen.
Skift hvordan paneler åbnes ved hjælp af rullemenuen Begivenhed.

Hændelsesindstillingerne styrer om panelerne åbnes, når en bruger klikker på en panelfan (Klik) eller ruller en markør over panelfanen (Mouseover).
Indstil andre panelvalg efter ønske.

Trækningsoptionerne i ejendomsinspektøren er valgfrie og omfatter evnen til at deaktivere alle eller alle paneler (deaktiver) og animere vejen for paneler åbne og lukke (animere rullemenuen).
Vælg Filer → Gem for at gemme siden; Når dialogboksen Copy Dependent Files vises, skal du klikke på OK for at generere alle relaterede filer.

For at Spry-funktionerne skal fungere, skal du uploade disse filer til din webserver, når du uploader websiden.
For at ændre panelets udseende, såsom skrifttypeoverfladen eller tekstfarven, skal du redigere den tilsvarende CSS-regel.

Bemærk: Du kan ikke redigere de tilsvarende stilarter til et accordeonpanel, indtil siden er gemt, og Dreamweaver har genereret de tilsvarende CSS- og JavaScript-filer.
For at se, hvordan panelerne vises i en webbrowser, skal du klikke på ikonet globalt øverst i arbejdsområdet og vælge den browser, du vil bruge til at forhåndsvise siden.

Når du bruger din computer til at forhåndsvise en side, der har en interaktiv funktion, der kræver JavaScript eller en anden programmering, viser nogle webbrowsere, herunder Internet Explorer, en advarsel om, at du skal tillade ActiveX-kontroller at se siden.

Dette er en sikkerhedsadvarsel, der kun vises, når siden åbnes på den samme computer, hvor siden gemmes. Hvis du offentliggør siden til en webserver og derefter ser den over en internetforbindelse, vises denne fejl ikke for dig eller dine besøgende på webstedet.