Välj Infoga > Spry > Spry-dragspelspanel.
Senast uppdaterad den
2 maj 2021
Obs!
Spry-widgetar ersätts med jQuery-widgetar i Dreamweaver CC och senare. Du kommer även fortsättningsvis att kunna ändra befintliga Spry-widgetar på din sida, men du kan inte lägga till nya.
Om widgeten för dragspelspanel
En widget för dragspelspanel är en uppsättning fällpaneler som kan spara en stor mängd innehåll på en kompakt yta. Besökare på platsen döljer eller visar innehållet som sparats i dragspelspanelen genom att klicka på fliken i panelen. Panelerna i dragspelet utökas eller dras ihop efter hur besökaren klickar på olika flikar. I en dragspelspanel är endast en innehållspanel öppen och synlig vid en viss tid. I följande exempel visas en dragspelswidget med den första panelen utökad:
A. Fliken Dragspelspanel B. Innehåll på dragspelspanelen C. Dragspelspanelen (öppna)
Vanlig HTML för dragspelswidgeten omfattar en yttre div-tagg som innehåller alla panelerna, en div-tagg för varje panel samt en rubrik-div och innehålls-div inom taggen för varje panel. En dragspelswidget kan innehålla hur många enskilda paneler som helst. HTML för dragspelswidgeten omfattar även skript-taggar i dokumenhuvudet och efter dragspelets HTML-kod.
En mer utförlig förklaring om hur dragspelswidgeten fungerar samt en fullständig beskrivning av koden för dragspelswidgeten finns på www.adobe.com/go/learn_dw_spryaccordion_se.
En självstudiekurs om hur du arbetar med dragspelswidgeten finns på www.adobe.com/go/vid0167_se.
Infoga och redigera widgeten för dragspelspanel
Infoga widgeten för dragspelspanel
Obs!
Du kan också infoga en dragspelswidget genom att använda kategorin Spry på panelen Infoga.
Lägga till en panel i widgeten Dragspelspanel
-
Markera en dragspelswidget i dokumentfönstret.
-
Klicka på plustecknet (+) i panelen i egenskapskontrollen (Fönster > Egenskaper).
-
(Valfritt) Ändra namnet på panelen genom att markera panelens text i designvyn och ändra texten.
Ta bort en panel från widgeten Dragspelspanel
-
Markera en dragspelswidget i dokumentfönstret.
-
På menyn Paneler i egenskapskontrollen (Fönster > Egenskaper) markerar du namnet på panelen som du vill ta bort och klickar på minustecknet (-).
Öppna en panel för redigering
-
Gör något av följande:
Flytta muspekaren över fliken för panelen för att öppna den i designvyn och klicka på ögonikonen som visas till höger på fliken.
Välj en dragspelswidget i dokumentfönstret och klicka sedan på namnet på panelen för att redigera den på panelmenyn i egenskapskontrollen (Fönster > Egenskaper).
Ändra ordningen på paneler
-
Markera en dragspelswidget i dokumentfönstret.
-
Markera namnet på dragspelspanelen som du vill flytta i egenskapskontrollen (Fönster > Egenskaper).
-
Klicka på uppåt- eller nedåtpilarna för att flytta panelen uppåt eller nedåt.
Anpassa widgeten Dragspelspanel
Trots att du kan göra enkla ändringar i en dragspelswidget i egenskapskontrollen stöder den inte anpassade formateringsåtgärder. Du kan ändra CSS-reglerna för dragspelswidgeten och skapa ett dragspel som är formaterat enligt dina önskemål.
Översiktlig referensinformation om hur du ändrar färgerna för dragspelswidgeten finns i Snabbguide för anpassning av Spry-flikpaneler, dragspel och fällpaneler av David Powers.
En mer avancerad lista över formateringsåtgärder finns på www.adobe.com/go/learn_dw_spryaccordion_custom_se.
Alla CSS-regler i följande avsnitt hänvisar till standardreglerna som finns i filen SpryAccordion.css. Dreamweaver sparar filen SpryAccordion.css i mappen SpryAssets på platsen när du skapar en Spry-dragspelswidget. Titta i denna fil eftersom den innehåller kommenterad information om olika typer av format som gäller för widgeten.
Obs!
Trots att du enkelt kan redigera regler för dragspelswidgeten direkt i CSS-filen kan du även använda panelen CSS-format för att redigera CSS-formaten för dragspelet. Panelen CSS-format är till nytta för att hitta CSS-klasserna som tilldelats olika delar av widgeten, i synnerhet om du använder läget Aktuell i panelen.
Formatera text i widgeten Dragspelspanel
Du kan formatera texten i en dragspelswidget genom att ange egenskaper för hela behållaren för dragspelswidgeten eller genom att ange egenskaper för komponenterna i widgeten separat.
-
Om du vill ändra textformatet för en dragspelswidget använder du följande tabell för att hitta rätt CSS-regel och lägger sedan till egna egenskaper och värden för textformat.
Text som ska ändras
Relevant CSS-regel
Exempel på egenskaper och värden som ska läggas till
Texten i hela dragspelet (inkluderar både flik- och innehållspanelen)
.Accordion eller .AccordionPanel font: Arial; font-size:medium;
Endast texten på flikar i dragspelspanelen
.AccordionPanelTab font: Arial; font-size:medium;
Endast texten i innehållspaneler i dragspelet
.AccordionPanelContent font: Arial; font-size:medium;
Ändra bakgrundsfärger i widgeten Dragspelspanel
-
Om du vill ändra bakgrundsfärgerna för olika delar i en dragspelswidget använder du följande tabell för att hitta rätt CSS-regel och lägger sedan till egna egenskaper och värden för bakgrundsfärg.
Del av widgeten som ska ändras
Relevant CSS-regel
Exempel på egenskap och värde som ska läggas till eller ändras
Bakgrundsfärg på flikar i dragspelspanelen
.AccordionPanelTab background-color: #CCCCCC; (Det här är standardvärdet.)
Bakgrundsfärg på innehållspaneler i dragspelet
.AccordionPanelContent background-color: #CCCCCC;
Bakgrundsfärg på den öppna dragspelspanelen
.AccordionPanelOpen .AccordionPanelTab background-color: #EEEEEE; (Det här är standardvärdet.)
Bakgrundsfärg på flikar i panelen när markören förs över dem
.AccordionPanelTabHover color: #555555; (Det här är standardvärdet.)
Bakgrundsfärg på flikar i den öppna panelen när markören förs över dem
.AccordionPanelOpen .AccordionPanelTabHover color: #555555; (Det här är standardvärdet.)
Begränsa bredden på en dragspelspanel
Som standard utökas dragspelswidgeten så att den fyller ut det tillgängliga utrymmet. Du kan dock begränsa bredden på en dragspelswidget genom att ange en breddegenskap för dragspelsbehållaren.
-
Leta reda på .Accordion CSS-regeln genom att öppna regeln filen SpryAccordion.css. Det här är regeln som anger egenskaper för huvudbehållarelementet i dragspelswidgeten.Obs!
Du kan även hitta regeln genom att markera dragspelswidgeten och titta i panelen CSS-format (Fönster > CSS-format). Se till att panelen är inställd på läget Aktuell.
-
Lägg till en breddegenskap och ett värde för regeln, t.ex. width: 300px;.
