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 Search-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:
.s7ecatalogsearchviewer .s7controlbar
Voorbeeld - aan opstelling een grijze belangrijkste controlebar die 36 pixel hoog is en bij de bovenkant van de kijkerscontainer wordt geplaatst.
.s7ecatalogsearchviewer .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:
.s7ecatalogsearchviewer .s7controlbar .s7innercontrolbarcontainer
Wanneer de waarde is ingesteld op static , is de schuiffunctie uitgeschakeld.
Stel deze eigenschap in 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:
.s7ecatalogsearchviewer .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:
.s7ecatalogsearchviewer .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 de inhoud van de besturingsbalk naar links kunt schuiven. De state="default" komt overeen met de status wanneer de inhoud helemaal naar links wordt geschoven en de schuifknop stelt voor de status te herstellen.De knopinfo kan worden gelokaliseerd. Zie Localisatie van gebruikersinterfaceelementen voor meer informatie.
Voorbeeld - om de roleigenschap in de belangrijkste controlebar voor mobiele telefoons toe te laten. 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:
.s7ecatalogsearchviewer.s7size_small .s7controlbar .s7innercontrolbarcontainer {
position: absolute;
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollbuttoncontainer {
width:64px;
background-color: rgb(0, 0, 0);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton {
width:64px;
height:64px;
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='up'] {
background-image:url(images/v2/ControlBarLeftButton_dark_up_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='over'] {
background-image:url(images/v2/ControlBarLeftButton_dark_over_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='down'] {
background-image:url(images/v2/ControlBarLeftButton_dark_down_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='disabled'] {
background-image:url(images/v2/ControlBarLeftButton_dark_disabled_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='up'] {
background-image:url(images/v2/ControlBarRightButton_dark_up_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='over'] {
background-image:url(images/v2/ControlBarRightButton_dark_over_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='down'] {
background-image:url(images/v2/ControlBarRightButton_dark_down_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='disabled'] {
background-image:url(images/v2/ControlBarRightButton_dark_disabled_touch.png);
}