DocumentatieNaslaggids voor dynamische mediasviewers

Grote knop Volgende pagina large-next-page-button

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Onderwerpen:

Gemaakt voor:

  • Ontwikkelaar
  • Gebruiker

Als u op deze knop klikt of erop tikt, gaat de gebruiker naar de volgende pagina in de catalogus. Deze knop wordt weergegeven in de hoofdbesturingsbalk. Deze knop wordt niet weergegeven op mobiele telefoons om de schermruimte op te slaan. U kunt deze knop vergroten, verkleinen, verkleinen en plaatsen met CSS.

CSS eigenschappen van het belangrijkste viewergebied

De vormgeving van de knop wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogviewer .s7ecatrightbutton .s7panrightbutton

CSS-eigenschap
Beschrijving
top
Positie vanaf de bovenrand van de hoofdbesturingsbalk, inclusief opvulling.
right
Positie vanaf de rechterrand van de hoofdbesturingsbalk, inclusief opvulling.
left
Positie vanaf de linkerrand van de hoofdbesturingsbalk, inclusief opvulling.
bottom
Positie vanaf de onderrand van de hoofdbesturingsbalk, inclusief opvulling.
width
Breedte van de knop.
height
Hoogte van de knop.
background-image
De afbeelding die voor een bepaalde knopstatus wordt weergegeven.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie ook CSS Sprites.

NOTE
Deze knop ondersteunt de kenmerkenkiezer van state , die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.

De knopinfo kan worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​ voor meer informatie.

Voorbeeld - voor het instellen van een grote knop op de volgende pagina van 56 x 56 pixels, verticaal gecentreerd en verankerd aan de rechterviewerrand, en voor het weergeven van een andere afbeelding voor elk van de vier verschillende knopstatussen.

.s7ecatalogviewer .s7ecatrightbutton .s7panrightbutton {
bottom:50%;
margin-bottom:-28px;
right:0px;
width:56px;
height:56px;
}
.s7ecatalogviewer .s7ecatrightbutton .s7panrightbutton [state='up'] {
background-image:url(images/v2/RightButton_dark_up.png);
}
.s7ecatalogviewer .s7ecatrightbutton .s7panrightbutton [state='over'] {
background-image:url(images/v2/RightButton_dark_over.png);
}
.s7ecatalogviewer .s7ecatrightbutton .s7panrightbutton [state='down'] {
background-image:url(images/v2/RightButton_dark_down.png);
}
.s7ecatalogviewer .s7ecatrightbutton .s7panrightbutton [state='disabled'] {
background-image:url(images/v2/RightButton_dark_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8