DocumentatieNaslaggids voor dynamische mediasviewers

Knop Favoriet toevoegen add-favorite-button

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

Gemaakt voor:

  • Ontwikkelaar
  • Gebruiker

De positie van de Add knoop van de Favorieten wordt volledig beheerd door het menu van Favorieten.

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

.s7ecatalogsearchviewer .s7addfavoritebutton

CSS eigenschappen van Add Favoriete knoop

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.

width
Breedte van de knop.
height
Hoogte van de knop.
NOTE
Deze knop ondersteunt zowel de state - als selected -kenmerkkiezers, die kunnen worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden. Met name selected='true' komt overeen met de status wanneer een gebruiker een nieuw pictogram Favoriet kan toevoegen door te selecteren of te tikken. Terwijl selected='false' overeenkomt met de normale bewerkingsmodus wanneer een gebruiker pagina's kan inzoomen, pannen en omwisselen.

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

Voorbeeld - Een knop Favorieten toevoegen van 28 x 28 pixels instellen en een andere afbeelding weergeven voor elk van de vier verschillende knopstatussen, indien geselecteerd of niet geselecteerd.

.s7ecatalogsearchviewer .s7addfavoritebutton {
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7addfavoritebutton[selected='false'][state='up'] {
background-image:url(images/v2/AddFavoriteButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7addfavoritebutton[selected='false'][state='over'] {
background-image:url(images/v2/AddFavoriteButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7addfavoritebutton[selected='false'][state='down'] {
background-image:url(images/v2/AddFavoriteButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7addfavoritebutton[selected='false'][state='disabled'] {
background-image:url(images/v2/AddFavoriteButton_dark_disabled.png);
}
.s7ecatalogsearchviewer .s7addfavoritebutton[selected='true'][state='up'] {
background-image:url(images/v2/AddFavoriteButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7addfavoritebutton[selected='true'][state='over'] {
background-image:url(images/v2/AddFavoriteButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7addfavoritebutton[selected='true'][state='down'] {
background-image:url(images/v2/AddFavoriteButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7addfavoritebutton[selected='true'][state='disabled'] {
background-image:url(images/v2/AddFavoriteButton_dark_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8