Innehållsförteckning table-of-contents
Innehållsförteckningen är en knapp i huvudkontrollfältet. När den är aktiverad visas en nedrullningsbar panel med en lista över sidindex och etiketter.
Baserat på konfigurationen kan listan innehålla alla sidor som finns i katalogen eller endast de sidor som har explicit definierade etiketter. Om listan är längre än de tillgängliga skärmutrymmena visas en rullningslist till höger i datorsystem.
Placeringen och storleken på innehållsförteckningsknappen i visningsprogrammets användargränssnitt styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7tableofcontents
CSS-egenskaper för innehållsförteckningen
state som kan användas för att tillämpa olika skal på olika knapplägen.Knappens funktionsbeskrivning kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.
Exempel - Ställ in en innehållsförteckningsknapp som är placerad 4 pixlar från nederkanten och 43 pixlar från vänster om huvudkontrollfältet. Storleken är 28 x 28 pixlar och olika bilder visas för vart och ett av de fyra olika knapplägena:
.s7ecatalogsearchviewer .s7tableofcontents {
margin-top: 4px;
margin-left: 10px; width: 28px;
height: 28px;
}
.s7ecatalogsearchviewer .s7tableofcontents[state='up'] {
background-image:url(images/v2/TableOfContents_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='over'] {
background-image:url(images/v2/TableOfContents_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='down'] {
background-image:url(images/v2/TableOfContents_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='disabled'] {
background-image:url(images/v2/TableOfContents_dark_disabled.png);
}
Utseendet på den nedrullningsbara panelen styrs av följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7tableofcontents .s7panel
CSS-egenskaper för den nedrullningsbara panelen
Exempel - ställ in en nedrullningsbar panel som har en halvgenomskinlig svart bakgrund, en marginal på 5 pixlar runt innehållet och en skugga:
.s7ecatalogsearchviewer .s7tableofcontents .s7panel {
background-color: rgba(0, 0, 0, 0.5);
margin: 5px;
box-shadow: 2px 2px 3px #c0c0c0;
}
Det enskilda objektets utseende och känsla styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item
CSS-egenskaper för objektet
state, som kan användas för att tillämpa olika skal för hovring och valda objektlägen.Exempel - skapa ett nedrullningsbart objekt med ett Helvetica®-teckensnitt med 14 pixlar och 19 pixlar högt. Ett objekt har en mörkgrå bakgrund på hovring och en ljusgrå bakgrund när det är markerat:
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item {
font-family: Helvetica,sans-serif;
font-size: 14px;
height: 19px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item[state="over"] {
background-color: rgb(102, 102, 102);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item[state="selected"] {
background-color: rgb(178, 178, 178);
}
Ett element som visar sidindexet styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index
CSS-egenskaper för sidindexet
display:none för CSS-klassen s7index.Exempel 1 - ställ in ett sidindex med en minsta bredd på 40 pixlar, en maximal bredd på 70 pixlar och en marginal på 5 pixlar till höger:
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index {
max-width: 70px;
min-width: 40px;
padding-right: 5px;
}
Exempel 2 - dölj sidindex:
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index {
display: none;
}
Sideetiketten styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7label
CSS-egenskaper för sidetiketten
Exempel - ställ in ett sidindex med en minsta bredd på 40 pixlar och en maximal bredd på 240 pixlar:
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7label {
min-width: 40px;
max-width: 240px;
}
Om det finns fler objekt än vad som får plats lodrätt i den nedrullningsbara panelen - och systemet är ett skrivbord - återges en lodrät rullningslist till höger på panelen. Utseendet på rullningslistområdet styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar
CSS-egenskaper för rullningslisten
Exempel - ställ in en rullningslist som är 28 pixlar bred och som inte har någon marginal för panelens övre, högra eller nedre del:
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar {
top:0px;
bottom:0px;
right:0px;
width:28px;
}
Rullningslistens spår är området mellan den övre och den nedre rullningsknappen. Komponenten ställer automatiskt in spårets position och höjd. Spåret styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolltrack
CSS-egenskaper för rullningsspåret
Exempel - ställ in ett rullningslistspår som är 28 pixlar brett och har en halvgenomskinlig grå bakgrund:
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolltrack {
width:28px;
background-color:rgba(102, 102, 102, 0.5);
}
Rullningslistens reglage rör sig lodrätt inom rullningsspårets område. Dess lodräta position styrs av komponentlogiken. Höjden på tummen ändras dock inte dynamiskt beroende på mängden innehåll. Du kan konfigurera tumhöjden och andra aspekter med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb
CSS-egenskaper för rullningslistens reglage
state, som kan användas för att tillämpa olika skal på tumlägena up, down, over och disabled.Exempel - Ställ in en rullningslist som är 28 x 45 pixlar, har 10 pixelmarginaler högst upp och längst ned och har olika teckningar för varje läge:
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb {
width:28px;
background-repeat:no-repeat;
background-position:center;
height:45px;
padding-top:10px;
padding-bottom:10px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='up'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='down'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='over'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
Utseendet på de övre och nedre rullningsknapparna styrs av följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton
Det går inte att placera rullningsknapparna med CSS-egenskaperna top, left, bottom och right. I stället placeras de automatiskt av visningsprogramlogiken.
CSS-egenskaper för knappen för rullning uppåt och nedåt
state som kan användas för att tillämpa olika skal på knapplägena up, down, over och disabled.Knappens funktionsbeskrivning kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.
Exempel - ställ in rullningsknappar som är 28 x 32 pixlar och har olika teckningar för varje läge:
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton {
width:28px;
height:32px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='over'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='down'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton {
width:28px;
height:32px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='up'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='over'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='down'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}