Sådan opretter du sammenklappelige paneler med jQuery i Dreamweaver

JQuery UI harmonika-widget 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 giver dig mulighed for bedre at udnytte pladsen på en side ved at vise mere information på mindre plads i et browservindue.

Du kan se, hvordan de sammenklappelige harmonikapaneler indeholder navn, foto og habitatpræferencer for hver sangfugl på denne naturhjemmeside. Resultatet er, at du nemt kan se navnene på alle fuglene på én side. For at se beskrivelsen af ​​enhver fugl skal en bruger kun klikke på fanen øverst i panelet (hvor fuglens navn vises), og panelet åbnes med det samme.

Fotoet og beskrivelsen af ​​den orange-kronede sanger er åben, mens de andre på siden er lukkede. Det smukke ved jQuery er, at siden ikke skal genindlæses for at panelerne kan åbne eller lukke. Klik én gang på en fane, og et panel åbnes med det samme. Klik på en anden fane, og det panel åbnes, når det tidligere åbnede panel lukkes.

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

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

Når du har oprettet et sæt harmonikapaneler med jQuery UI-menuen i Dreamweaver, kan du ændre en række panelindstillinger ved at bruge egenskabsinspektøren, som vist i instruktionerne, der følger.

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

Placer markøren på en side, hvor harmonikapanelerne skal vises.

Vælg Indsæt → jQuery UI → Accordion, eller klik på Accordion-elementet i panelet jQuery UI Insert.

En sammenklappelig harmonikapanelgruppe i jQuery UI med tre paneler vises på siden.

Vælg ordet Sektion øverst i hvert panel, og erstat det med den tekst, du vil have vist i panelets faneområde.

Som standard er teksten i Tab-området almindelig tekst, men du kan ændre det ved at ændre den tilsvarende CSS-regel eller formatere teksten ved hjælp af HTML-tags, såsom overskriftstags.

Vælg ordet Indhold i hovedområdet på hvert panel, og indtast tekst eller billeder, du vil have vist.

Du kan indsætte tekst i et panel, ligesom du ville indsætte tekst et andet sted på siden. På samme måde indsætter du billeder i paneler, ligesom du ville andre steder på en side: Placer din markør 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 speciel for at vælge mængden af ​​formatering, du vil bevare i den tekst, du indsætter i Dreamweaver. Begrænsning af mængden af ​​bevaret formatering kan skære ned på potentielle stilkonflikter.

For at ændre panelindstillingerne skal du klikke på den blå jQuery Accordion-fane øverst på panelerne i designområdet.

Når du klikker på den blå fane, vises panelindstillingerne i ejendomsinspektøren. (Det kan være svært at klikke rigtigt på den blå fane, 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 feltet Paneler. For at fjerne et panel fra et harmonikasæt skal du først vælge panelnavnet på rullelisten Paneler i egenskabsinspektøren og derefter klikke på minustegnet (@@min).

Du kan tilføje endnu et panel ved at klikke på plustegnet igen.

Skift hvordan paneler åbnes ved at bruge rullemenuen Hændelse.

Hændelsesindstillingerne styrer, om panelerne åbnes, når en bruger klikker på en panelfane (Klik) eller ruller en markør hen over panelfanen (Mouseover).

Indstil andre panelindstillinger efter ønske.

Indstillingerne for harmonika i egenskabsinspektøren er valgfri og inkluderer muligheden for at deaktivere et hvilket som helst eller alle paneler (Deaktiver) og animere den måde, paneler åbner og lukker på (rullelisten Animer).

Vælg Filer → Gem for at gemme siden; Når dialogboksen Kopier afhængige filer vises, skal du klikke på OK for at generere alle de 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 skrifttype eller tekstfarve, skal du redigere den tilsvarende CSS-regel.

Bemærk: Du kan ikke redigere de tilsvarende stilarter for et harmonikapanel, før siden er blevet gemt, og Dreamweaver har genereret de tilsvarende CSS- og JavaScript-filer.

For at se, hvordan panelerne vil se ud i en webbrowser, skal du klikke på globusikonet øverst i arbejdsområdet og vælge den browser, du vil bruge til at få vist siden.

Når du bruger din computer til at få vist en side, der har en interaktiv funktion, der kræver JavaScript eller en anden programmering, vil nogle webbrowsere, inklusive Internet Explorer, vise en advarsel om, at du skal tillade ActiveX-objekter at se siden.

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