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.
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.
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.
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; |
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.
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.
Logga in på ditt konto