Hur man skapar hopfällbara paneler med jQuery in Dreamweaver - dummies

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

Du kan se hur dragspelets hopfällbara paneler 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åglar på en sida. För att se beskrivningen av någon fågel behöver en användare bara klicka på fliken längst upp på panelen (där fågelns namn visas), och panelen öppnas direkt.

Bilden och beskrivningen för den orangekronade kryssaren är öppen medan de andra på sidan är stängda. Skönheten i jQuery är att sidan inte behöver laddas om att panelen öppnas eller stängs. 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.

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

För att visa en dragspelspanel (eller många andra avancerade funktioner i Dreamweaver) som det kommer att visas i en webbläsare, måste du klicka på Live-visningsknappen längst upp till vänster i Dreamweaver-arbetsytan.

När du har skapat en rad dragspelspaneler med jQuery UI-menyn i Dreamweaver kan du ändra ett antal panelinställningar med hjälp av egenskapsinspektionen, som visas i instruktionerna som följer.

Följ dessa steg för att skapa en dragspelspanelsats:

Placera markören på en sida där du vill ha dragspelspanelerna att visas.
Välj Infoga → jQuery UI → Accordion, eller klicka på Accordion i jQuery UI Insert-panelen.

En jQuery UI-hopfällbar dragspelspanelgrupp med tre paneler visas på sidan.
Välj ordet Avsnitt högst upp på varje panel och ersätt det med texten du vill se i panelens flikområde.

Som standard är texten i fliken Området ren text, men du kan ändra det genom att ändra motsvarande CSS-regel eller formatera texten med hjälp av HTML-taggar, t.ex. rubriktaggar.
Välj ordet Innehåll i huvudområdet på varje panel och skriv in text eller bilder som du vill visa.

Du kan klistra in text i en panel precis som du skulle klistra in text någon annanstans på sidan. På samma sätt lägger du in bilder i paneler precis som du skulle 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 hur mycket formatering du vill behålla i texten du klistrar in i Dreamweaver. Att begränsa mängden formatering bevarad kan skära ner på potentiella stilkonflikter.
Om du vill ändra panelinställningarna klickar du på fliken blå jQuery Accordion längst upp på panelerna i designområdet.

När du klickar på den blå fliken visas panelinställningarna i egenskapsinspektionen. (Korrekt klicka på den blå fliken kan vara svårt, så se till att du klickar på det blå området.) Klicka någon annanstans på sidan och inspektören återgår till standardinställningarna.
Lägg till eller ta bort paneler med fältet Paneler i egenskapskontrollen.

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

Du kan lägga till en annan panel genom att klicka på plustecknet igen.
Ändra hur paneler öppnas med hjälp av rullgardinsmenyn Händelse.

Händelseinställningarna kontrollerar huruvida paneler öppnas när en användare klickar på en panelflik (Klicka) eller rullar en markör över panelfliken (Mouseover).
Ställ in andra panelalternativ, efter önskemål.

Harmoniseringsalternativen i egenskapsinspektionen är valfria och inkluderar möjligheten att inaktivera alla eller alla paneler (inaktivera) och animera hur paneler öppnas och stängs (animera listrutan).
Välj Arkiv → Spara för att spara sidan; När dialogrutan Copy Dependent Files visas, klicka på OK för att generera alla relaterade filer.

För att Spry-funktioner ska fungera måste du ladda upp dessa filer till din webbserver när du laddar upp webbsidan.
Ändra panelets utseende, till exempel teckensnittets ansikte eller textfärg, redigera motsvarande CSS-regel.

Obs! Du kan inte redigera motsvarande stilar för en dragspelspanel tills sidan har sparats och Dreamweaver har genererat motsvarande CSS- och JavaScript-filer.
Om du vill se hur panelen kommer att visas i en webbläsare klickar du på ikonen Globalt högst upp i arbetsytan och väljer vilken 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 anger att du måste tillåta ActiveX-kontroller att visa sidan.

Detta är en säkerhetsvarning som bara visas när sidan öppnas på samma dator där sidan sparas. Om du publicerar sidan till en webbserver och sedan visar den via en Internetanslutning visas inte detta fel för dig eller dina besökare på webbplatsen.