Välj Infoga > Spry > Spry-flikpanel
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 flikpanel/indexpanel
Widgeten för flikpanel/indexpanel är en uppsättning paneler som kan spara innehåll på en liten yta. Besökare på platsen döljer eller visar innehållet som sparats i flikpanelen/indexpanelen genom att klicka på fliken som de vill komma åt. Panelerna i widgeten öppnas efter hur besökaren klickar på olika flikar. I widgeten för flikpanel/indexpanel är endast en innehållspanel öppen vid en viss tid. I följande exempel visas en widget för flikpanel/indexpanel med den tredje panelen öppen:
A. Flik B. Innehåll C. Widgeten för flikpanel/indexpanel D. Flikpanel/indexpanel
HTML-koden för widgeten för flikpanel/indexpanel omfattar en yttre div-tagg som innehåller alla panelerna en lista för flikarna, en div som innehåller innehållspanelerna och en div för varje innehållspanel. HTML-koden för widgeten för flikpanel/indexpanel omfattar även skript-taggar i dokumenthuvudet och efter HTML-koden för widgeten för den streckade panelen.
En mer utförlig förklaring om hur widgeten för flikpanel/indexpanel fungerar samt en fullständig beskrivning av koden för widgeten finns på www.adobe.com/go/learn_dw_sprytabbedpanels_se.
Infoga och redigera widgeten för flikpanel/indexpanel
Infoga widgeten för flikpanel/indexpanel
Obs!
Du kan också infoga en widget för flikpanel/indexpanel genom att använda kategorin Spry på panelen Infoga.
Lägga till en panel i widgeten för flikpanel/indexpanel
-
Markera widgeten för flikpanel/indexpanel i dokumentfönstret.
-
Klicka på plustecknet i panelen i egenskapskontrollen (Fönster > Egenskaper).
-
(Valfritt) Ändra flikens namn genom att markera flikens text i designvyn och ändra den.
Ta bort en panel från widgeten för flikpanel/indexpanel
-
Markera widgeten för flikpanel/indexpanel 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 som du vill öppna i designvyn och klicka på ögonikonen som visas till höger på fliken.
Välj widgeten för flikpanel/indexpanel 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 widgeten för flikpanel/indexpanel i dokumentfönstret.
-
Markera namnet på panelen som du vill flytta på menyn Paneler i egenskapskontrollen (Fönster > Egenskaper).
-
Klicka på uppåt- eller nedåtpilarna för att flytta panelen uppåt eller nedåt.
Ange den panel som öppnas som standard
Du kan ange vilken panel i widgeten för flikpanel/indexpanel som ska öppnas som standard när sidan öppnas i en webbläsare.
-
Markera widgeten för flikpanel/indexpanel i dokumentfönstret.
-
I egenskapskontrollen (Fönster > Egenskaper) väljer du den panel som du vill öppna som standard på snabbmenyn Standard.
Anpassa widgeten för flikpanel/indexpanel
Trots att du kan göra enkla ändringar i widgeten för flikpanel/indexpanel i egenskapskontrollen stöder den inte anpassade formateringsåtgärder. Du kan ändra CSS-reglerna för widgeten för flikpanel/indexpanel och skapa en widget som är formaterad enligt dina önskemål.
Översiktlig referensinformation om hur du ändrar färgerna för widgeten för flikpanel/indexpanel 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_sprytabbedpanels_custom_se.
Alla CSS-regler i följande avsnitt hänvisar till standardreglerna som finns i filen SpryTabbedPanels.css. Dreamweaver sparar filen SpryTabbedPanels.css i mappen SpryAssets på platsen när du skapar en widget för Spry-flikpaneler. Den här filen innehåller även kommenterad information om olika typer av format som gäller för widgeten.
Obs!
Trots att du enkelt kan redigera regler för widgeten för flikpanel/indexpanel direkt i den tillhörande CSS-filen kan du även använda panelen CSS-format för att redigera CSS-formaten för widgeten. 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ör flikpanel/indexpanel
Du kan formatera texten i en widget för Indexpaneler genom att ange egenskaper för hela behållaren för widgeten för flikpanel/indexpanel eller genom att ange egenskaper för komponenterna i widgeten separat.
-
Om du vill ändra textformatet för en widget för flikpanel/indexpanel 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
Text i hela widgeten
.TabbedPanels font: Arial; font-size:medium;
Endast texten på flikar i panelen
.TabbedPanelsTabGroup eller .TabbedPanelsTab font: Arial; font-size:medium;
Endast texten i innehållspaneler
.TabbedPanelsContentGroup eller .TabbedPanelsContent font: Arial; font-size:medium;
Ändra bakgrundsfärger i widgeten för flikpanel/indexpanel
-
Om du vill ändra bakgrundsfärgerna för olika delar i en widget för flikpanel/indexpanel 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 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å flikar i panelen
.TabbedPanelsTabGroup eller .TabbedPanelsTab background-color: #DDD; (Det här är standardvärdet.)
Bakgrundsfärg på innehållspaneler
.Tabbed PanelsContentGroup eller .TabbedPanelsContent background-color: #EEE; (Det här är standardvärdet.)
Bakgrundsfärg på markerad flik
.TabbedPanelsTabSelected background-color: #EEE; (Det här är standardvärdet.)
Bakgrundsfärg på flikar i en panel när muspekaren flyttas över dem
.TabbedPanelsTabHover background-color: #CCC; (Det här är standardvärdet.)
Begränsa bredden på flikpanel/indexpanel
Som standard utökas widgeten för flikpanel/indexpanel så att den fyller ut det tillgängliga utrymmet. Du kan dock begränsa bredden på widgeten för flikpanel/indexpanel genom att ange en breddegenskap för dragspelsbehållaren.
-
Leta reda på CSS-regeln .TabbedPanels genom att öppna filen SpryTabbedPanels.css. Den här regeln anger egenskaper för huvudbehållarelementet för widgeten för flikpanel/indexpanel.Obs!
Du kan även hitta regeln genom att markera widgeten för flikpanel/indexpanel och titta på CSS-formatpanelen (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;.
