Hoofdbesturingsbalk main-control-bar
De hoofdbesturingsbalk is het rechthoekige gebied op desktopsystemen en tablets dat alle besturingselementen voor de gebruikersinterface bevat (behalve knoppen voor grote pagina) die beschikbaar zijn voor de eCatalog-viewer.
Op mobiele telefoons blijven de knoppen Miniaturen, Inhoudsopgave, Downloaden, Afdrukken, Favorieten, Delen via sociale media, Volledig scherm en Sluiten behouden. De knoppen Eerste pagina en Laatste pagina en Pagina-indicator worden echter verwijderd van de hoofdbesturingsbalk en in plaats daarvan toegevoegd aan de secundaire besturingsbalk. Standaard wordt de hoofdbesturingsbalk boven in het viewergebied weergegeven op desktopsystemen en mobiele telefoons en op tablets naar de onderkant van het viewergebied verplaatst. De viewerbreedte neemt altijd de volledige beschikbare viewerbreedte in beslag. Het is mogelijk de kleur, hoogte en verticale positie in de CSS te wijzigen ten opzichte van de viewercontainer.
De vormgeving van de hoofdbesturingsbalk wordt bepaald door de volgende CSS-klassenkiezer:
.s7ecatalogviewer .s7controlbar
Voorbeeld - om een grijze hoofdbesturingsbalk in te stellen die 36 pixels hoog is en boven aan de viewercontainer wordt geplaatst.
.s7ecatalogviewer .s7controlbar {
top: 0px;
height: 36px;
background-color: rgba(0, 0, 0, 0.5);
}
De hoofdbesturingsbalk ondersteunt een optionele schuiffunctie. Deze wordt geactiveerd als de viewerbreedte te klein is en er onvoldoende ruimte is voor alle knoppen die zijn ingesteld op de besturingsbalk. In dit geval wordt een pijlknop met twee statussen weergegeven aan de rechterkant van de besturingsbalk. Wanneer u op deze knop klikt of erop tikt, worden alle besturingsbalkelementen naar links of naar rechts geschoven, afhankelijk van de status van de schuifknop. Het belangrijkste gebruiksgeval voor deze functie is mobiele apparaten met kleine schermen met een staande oriëntatie.
De scrolleigenschap wordt toegelaten voor de belangrijkste controlebar, en is gehandicapt voor de secundaire controlebar. De functie wordt in- en uitgeschakeld met de volgende CSS-klassenkiezer:
.s7ecatalogviewer .s7controlbar .s7innercontrolbarcontainer
Wanneer ingesteld op static de schuiffunctie is uitgeschakeld.
Deze eigenschap instellen op absoluut om de schuiffunctie in te schakelen.
De rolknoop wordt toegevoegd aan een speciaal containerelement dat de knoop behoorlijk plaatst. Hiermee kunt u het gebied rondom de knop anders opmaken dan de rest van de besturingsbalk als de hoogte van de schuifknop kleiner is dan de hoogte van de besturingsbalk.
De vormgeving van deze schuifknopcontainer wordt bepaald door de volgende CSS-klassenkiezer:
.s7ecatalogviewer .s7controlbar .s7scrollbuttoncontainer
U kunt de schuifknop zelf groter of kleiner maken met behulp van CSS.
De vormgeving van deze knop wordt bepaald door de volgende CSS-klassenkiezer:
.s7ecatalogviewer .s7controlbar .s7scrollleftrightbutton
Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.
Zie ook CSS-sprites.
state en selected kenmerkkiezers, die kunnen worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden. Met name: state="selected" komt overeen met de oorspronkelijke toestand van de schuifknop wanneer u naar links door de inhoud van de schuifbalk kunt schuiven. Het kenmerk state="default" komt overeen met de status wanneer de inhoud helemaal naar links wordt geschoven en de schuifknop stelt voor de inhoud naar de begintoestand te retourneren.De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .
Voorbeeld - De schuiffunctie in de hoofdbesturingsbalk voor mobiele telefoons inschakelen. Stel een schuifknop in van 64 x 64 pixels waarmee een andere afbeelding wordt weergegeven voor elk van de vier verschillende knopstatussen, al dan niet geselecteerd:
.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);
}