Hur man skapar hopfällbara paneler med jQuery i Dreamweaver

Dragspelswidgeten jQuery UI i Dreamweaver gör det enkelt att lägga till hopfällbara paneler som webbplatsbesökare kan öppna och stänga utan att uppdatera webbsidan. Denna jQuery-funktion gör att du kan utnyttja utrymmet på en sida bättre genom att visa mer information på mindre utrymme i ett webbläsarfönster.

Du kan se hur de hopfällbara dragspelspanelerna innehåller namn, foto och habitatpreferenser för varje sångfågel på denna naturwebbplats. Resultatet är att du enkelt kan se namnen på alla fåglarna på en sida. För att se beskrivningen av en fågel behöver en användare bara klicka på fliken högst upp på panelen (där fågelns namn visas), och panelen öppnas omedelbart.

Fotot och beskrivningen för den orangekrönta sångaren är öppen medan de andra på sidan är stängda. Det fina med jQuery är att sidan inte behöver laddas om för att panelerna ska öppnas eller stängas. Klicka en gång på en flik och en panel öppnas direkt. Klicka på en annan flik och den panelen öppnas när den tidigare öppnade panelen stängs.

Hopfällbara paneler kan användas för att visa text och bilder samt multimediafiler som ljud-, video- och Flash-filer.

För att se en dragspelspanel (eller många andra avancerade funktioner i Dreamweaver) som den kommer att visas i en webbläsare, måste du klicka på knappen Live view längst upp till vänster i Dreamweavers arbetsyta.

När du har skapat en uppsättning dragspelspaneler med jQuery UI-menyn i Dreamweaver kan du ändra ett antal panelinställningar genom att använda egenskapsinspektören, som visas i instruktionerna som följer.

Följ dessa steg för att skapa ett dragspelspanel:

Placera markören på en sida där du vill att dragspelspanelerna ska visas.

Välj Infoga → jQuery UI → Dragspel, eller klicka på objektet Dragspel i panelen Infoga i jQuery UI.

En hopfällbar dragspelspanelgrupp i jQuery UI med tre paneler visas på sidan.

Välj ordet Sektion överst på varje panel och ersätt det med texten du vill ska visas i panelens flikområde.

Som standard är texten i flikområdet vanlig text, men du kan ändra det genom att ändra motsvarande CSS-regel eller formatera texten med HTML-taggar, till exempel rubriktaggar.

Välj ordet Innehåll i huvudområdet på varje panel och skriv in text eller bilder du vill visa.

Du kan klistra in text i en panel precis som du klistrar in text någon annanstans på sidan. På samma sätt infogar du bilder i paneler precis som du skulle göra någon annanstans på en sida: Placera markören i panelen, välj Infoga → Bild → Bild och välj den GIF-, JPEG- eller PNG-fil du vill visa. Du kan också välja en Photoshop-fil om du vill använda Dreamweaver för att optimera bilder.

När du klistrar in text i en panel väljer du Redigera → Klistra in special för att välja mängden formatering du vill bevara i texten du klistrar in i Dreamweaver. Att begränsa mängden formatering som bevaras kan minska potentiella stilkonflikter.

För att ändra panelinställningarna, klicka på den blå jQuery Accordion-fliken överst på panelerna i designområdet.

När du klickar på den blå fliken visas panelinställningarna i egenskapsinspektören. (Det kan vara svårt att klicka på den blå fliken korrekt, så se till att klicka på det blå området.) Klicka någon annanstans på sidan så återgår inspektören till sina standardinställningar.

Lägg till eller ta bort paneler med fältet Paneler i egenskapsinspektören.

För att lägga till en panel, klicka på plustecknet (+) till höger om fältet Paneler. För att ta bort en panel från en dragspelsuppsättning, välj först panelnamnet i rullgardinsmenyn Paneler i egenskapsinspektören och klicka sedan på minustecknet (@@min).

Du kan lägga till ytterligare en panel genom att klicka på plustecknet igen.

Ändra hur paneler öppnas genom att använda rullgardinsmenyn Händelse.

Händelseinställningarna styr om panelerna öppnas när en användare klickar på en panelflik (Klick) eller för markören över panelfliken (Mouseover).

Ställ in andra panelalternativ efter önskemål.

Dragspelsalternativen i egenskapsinspektören är valfria och inkluderar möjligheten att inaktivera någon eller alla paneler (Inaktivera) och animera hur paneler öppnas och stängs (rullgardinsmenyn Animera).

Välj Arkiv → Spara för att spara sidan; när dialogrutan Kopiera beroende filer visas klickar du på OK för att generera alla relaterade filer.

För att Spry-funktionerna ska fungera måste du ladda upp dessa filer till din webbserver när du laddar upp webbsidan.

Om du vill ändra panelens utseende, till exempel teckensnitt eller textfärg, redigerar du motsvarande CSS-regel.

Obs! Du kan inte redigera motsvarande stilar för en dragspelspanel förrän sidan har sparats och Dreamweaver har genererat motsvarande CSS- och JavaScript-filer.

För att se hur panelerna kommer att se ut i en webbläsare, klicka på globikonen högst upp på arbetsytan och välj den webbläsare du vill använda för att förhandsgranska sidan.

När du använder din dator för att förhandsgranska en sida som har en interaktiv funktion som kräver JavaScript eller annan programmering, kommer vissa webbläsare, inklusive Internet Explorer, att visa en varning som säger att du måste tillåta ActiveX-kontroller att visa sidan.

Detta är en säkerhetsvarning som endast visas när sidan öppnas på samma dator där sidan sparas. Om du publicerar sidan på en webbserver och sedan visar den via en internetanslutning, kommer det här felet inte att visas för dig eller dina webbplatsbesökare.