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.
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.
Obs!
Du kan också infoga en widget för flikpanel/indexpanel genom att använda kategorin Spry på panelen Infoga.
-
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).
Du kan ange vilken panel i widgeten för flikpanel/indexpanel som ska öppnas som standard när sidan öppnas i en webbläsare.
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.
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;
-
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.)
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.
Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.