Arbeta med widgeten Spry-flikpanel

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:

Widgeten för flikpanel/indexpanel

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

  1. Välj Infoga > Spry > Spry-flikpanel
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

  1. Markera widgeten för flikpanel/indexpanel i dokumentfönstret.
  2. Klicka på plustecknet i panelen i egenskapskontrollen (Fönster > Egenskaper).
  3. (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

  1. Markera widgeten för flikpanel/indexpanel i dokumentfönstret.
  2. 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

  1. 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

  1. Markera widgeten för flikpanel/indexpanel i dokumentfönstret.
  2. Markera namnet på panelen som du vill flytta på menyn Paneler i egenskapskontrollen (Fönster > Egenskaper).
  3. 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.

  1. Markera widgeten för flikpanel/indexpanel i dokumentfönstret.
  2. 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.

  1. 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

  1. 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.

  1. 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.

  2. Lägg till en breddegenskap och ett värde för regeln, t.ex. width: 300px;.
Adobes logotyp

Logga in på ditt konto