Välj Infoga > Spry > Spry-fällpanel.
Senast uppdaterad den
May 02, 2021 07:37:25 PM GMT
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ällpanel
Widgeten Fällpanel är en panel som kan spara innehåll på en liten yta. Användare döljer eller visar innehållet som sparats i fällpanelen genom att klicka på fliken i widgeten. I följande exempel visas widgeten Fällpanel, utökad och komprimerad:
A. Utökad B. Komprimerad
HTML-koden för widgeten Fällpanel omfattar en yttre div-tagg som innehåller innehålls-div-taggen och div-taggen för flikbehållaren. HTML-koden för widgeten Fällpanel omfattar även skript-taggar i dokumenthuvudet och efter fällpanelens HTML-kod.
En mer utförlig förklaring om hur widgeten Fällpanel fungerar samt en fullständig beskrivning av koden för widgeten Fällpanel finns på www.adobe.com/go/learn_dw_sprycollapsiblepanel_se.
Infoga och redigera widgeten Fällpanel
Infoga widgeten Fällpanel
Obs!
Du kan också infoga en fällpanelswidget genom att använda kategorin Spry på panelen Infoga.
Öppna eller stänga fällpanelen i designvyn
-
Gör något av följande:
Flytta muspekaren över fliken för panelen i designvyn och klicka på ögonikonen som visas till höger på fliken.
Välj en fällpanel i dokumentfönstret och välj sedan Öppen eller Stängd på snabbmenyn Visa i egenskapskontrollen (Fönster > Egenskaper).
Ange standardläget för widgeten Fällpanel
Du kan ange standardläget (öppen eller stängd) för widgeten Fällpanel när webbsidan läses in i en webbläsare.
-
Markera en widget för en fällpanel i dokumentfönstret.
-
I egenskapskontrollen (Fönster > Egenskaper) väljer du Öppen eller Stängd på snabbmenyn Standardläge.
Aktivera eller inaktivera animering för widgeten Fällpanel
När du aktiverar animering för en widget för en fällpanel öppnas och stängs panelen gradvis som standard när besökaren klickar på panelens flik. Om du inaktiverar animering öppnas och stängs fällpanelen snabbt.
-
Markera en widget för en fällpanel i dokumentfönstret.
-
Markera eller avmarkera Aktivera animering i egenskapskontrollen (Fönster > Egenskaper).
Anpassa widgeten Fällpanel
Trots att du kan göra enkla ändringar i en widget för en fällpanel i egenskapskontrollen stöder den inte anpassade formateringsåtgärder. Du kan ändra CSS-reglerna för widgeten fällpanel och skapa en fällpanel som är formaterad enligt dina önskemål.
Översiktlig referensinformation om hur du ändrar färgerna för fällpanelswidgeten finns i Snabbguide för anpassning av Spry-flikpaneler, dragspelspaneler och fällpaneler av David Powers.
En mer avancerad lista över formateringsåtgärder finns på www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_se.
Alla CSS-regler i följande avsnitt hänvisar till standardreglerna som finns i filen SpryCollapsiblePanel.css. Dreamweaver sparar filen SpryCollapsiblePanel.css i mappen SpryAssets på platsen när du skapar en widget för en Spry-fällpanel. Den här filen innehåller även kommenterad information om olika typer av format som gäller för widgeten.
Obs!
Du kan enkelt redigera regler för widgeten Fällpanel direkt i den tillhörande CSS-filen, men du kan även använda panelen CSS-format för att redigera CSS-formaten för fällpanelen. 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 Fällpanel
Du kan formatera texten i en widget för en fällpanel genom att ange egenskaper för hela behållaren för widgeten fällpanel eller genom att ange egenskaper för komponenterna i widgeten separat.
-
Om du vill ändra textformatet för en widget för en fällpanel 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:
Format som ska ändras
Relevant CSS-regel
Exempel på egenskaper och värden som ska läggas till eller ändras
Text i hela fällpanelen
.CollapsiblePanel font: Arial; font-size:medium;
Endast texten på flikar
.CollapsiblePanelTab font: bold 0.7em sans-serif; (Det här är standardvärdet.)
Endast texten i innehållspanelen
.CollapsiblePanelContent font: Arial; font-size:medium;
Ändra bakgrundsfärger i widgeten Fällpanel
-
Om du vill ändra bakgrundsfärgerna för olika delar i en widget för en fällpanel använder du följande tabell för att hitta rätt CSS-regel och lägger sedan till eller ändrar egenskaperna och värdena för för bakgrundsfärgen:
Färg som ska ändras
Relevant CSS-regel
Exempel på egenskap och värde som ska läggas till eller ändras
Bakgrundsfärg på flik i panelen
.CollapsiblePanelTab background-color: #DDD; (Det här är standardvärdet.)
Bakgrundsfärg på innehållspanelen
.CollapsiblePanelContent background-color: #DDD;
Bakgrundsfärg på fliken när panelen är öppen
.CollapsiblePanelOpen .CollapsiblePanelTab background-color: #EEE; (Det här är standardvärdet.)
Bakgrundsfärg på fliken i en öppen panel när muspekaren flyttas över den
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover background-color: #CCC; (Det här är standardvärdet.)
Begränsa bredden på en fällpanel
Som standard utökas widgeten fällpanel så att den fyller ut det tillgängliga utrymmet. Du kan dock begränsa bredden på en widget för en fällpanel genom att ange en breddegenskap för behållaren för fällpanelen.
-
Leta reda på CSS-regeln .CollapsiblePanel genom att öppna filen SpryCollapsible Panel.css. Den här regeln anger egenskaper för huvudbehållarelementet för widgeten Fällpanel.Obs!
Du kan även hitta regeln genom att markera widgeten Fällpanel och titta på CSS-formatpanelen (Fönster > CSS). 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;.
Logga in på ditt konto