Huvudkontrollfält main-control-bar

Huvudkontrollfältet är det rektangulära området på stationära datorer och surfplattor som innehåller alla gränssnittskontroller (utom knapparna Stora sidor) som är tillgängliga för visningsprogrammet för eCatalog.

På mobiltelefoner behåller den fortfarande knapparna Miniatyrbilder, Innehållsförteckning, Hämta, Skriv ut, Favoriter, Dela socialt, Helskärm och Stäng. Knapparna Första sidan och Sista sidan samt Sidindikatorn tas bort från huvudkontrollfältet och läggs till i det sekundära kontrollfältet i stället. Som standard visas huvudkontrollfältet längst upp i visningsområdet på datorer och mobiltelefoner, och flyttas längst ned i visningsområdet på surfplattor. Hela den tillgängliga visningsprogrambredden används alltid. Det går att ändra färgen, höjden och den lodräta positionen i CSS i förhållande till visningsbehållaren.

Utseendet på huvudkontrollfältet styrs av följande CSS-klassväljare:

.s7ecatalogviewer .s7controlbar

Exempel - för att ställa in ett grått huvudkontrollfält som är 36 pixlar högt och placerat högst upp i visningsbehållaren.

.s7ecatalogviewer .s7controlbar {
 top: 0px;
 height: 36px;
 background-color: rgba(0, 0, 0, 0.5);
}

Huvudkontrollfältet har stöd för en valfri rullningsfunktion. Den aktiveras om visningsprogrammets bredd är för liten och det inte finns tillräckligt med utrymme för att alla knappförinställningar i kontrollfältet ska få plats. I det här fallet visas en dubbellägesknapp till höger om kontrollfältet. Om du klickar eller trycker på den här knappen rullas alla element i kontrollfältet åt vänster eller höger, beroende på rullningsknappens läge. Det primära användningsområdet för den här funktionen är mobila enheter med små skärmar i stående orientering.

Rullningsfunktionen är aktiverad för huvudkontrollfältet och inaktiverad för det sekundära kontrollfältet. Funktionen aktiveras och inaktiveras med följande CSS-klassväljare:

.s7ecatalogviewer .s7controlbar .s7innercontrolbarcontainer

Rullningsknappen läggs till i ett särskilt behållarelement som placerar knappen korrekt. Du kan formatera området runt knappen på ett annat sätt än resten av kontrollfältets bakgrund om rullningsknappens höjd är mindre än kontrollfältets höjd.

Utseendet på den här rullningsknappbehållaren styrs av följande CSS-klassväljare:

.s7ecatalogviewer .s7controlbar .s7scrollbuttoncontainer

Du kan ändra storlek och skal på själva rullningsknappen med hjälp av CSS.

Utseendet på den här knappen styrs av följande CSS-klassväljare:

.s7ecatalogviewer .s7controlbar .s7scrollleftrightbutton

Knappens funktionsbeskrivning kan lokaliseras. Se Lokalisering av användargränssnittselement för mer information.

Exempel - Aktivera rullningsfunktionen i huvudkontrollfältet för mobiltelefoner. Ställ in en rullningsknapp på 64 x 64 pixlar som visar en annan bild för vart och ett av de fyra olika knapplägena när de är markerade eller inte är markerade:

.s7ecatalogviewer.s7size_small .s7controlbar .s7innercontrolbarcontainer {
 position: absolute;
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollbuttoncontainer {
 width:64px;
 background-color: rgb(0, 0, 0);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton {
 width:64px;
 height:64px;
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='up'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_up_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='over'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_over_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='down'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_down_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='disabled'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_disabled_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='up'] {
 background-image:url(images/v2/ControlBarRightButton_dark_up_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='over'] {
 background-image:url(images/v2/ControlBarRightButton_dark_over_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='down'] {
 background-image:url(images/v2/ControlBarRightButton_dark_down_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='disabled'] {
 background-image:url(images/v2/ControlBarRightButton_dark_disabled_touch.png);
}