DocumentazioneGuida di riferimento per i visualizzatori Dynamic Media

Visualizzazione pagina page-view

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Argomenti:

Creato per:

  • Sviluppatore
  • Utente

La visualizzazione principale è costituita dall'immagine del catalogo. Può essere scorrevole per passare a un’altra pagina o ingrandito.

Proprietà CSS dell'area visualizzatore principale

L’aspetto dell’area di visualizzazione è controllato dal seguente selettore di classi CSS:

.s7ecatalogsearchviewer .s7pageview
Proprietà CSS
Descrizione
colore di sfondo
Colore di sfondo della visualizzazione principale in formato esadecimale.
cursore
Cursore visualizzato sopra la vista principale.

Esempio: per rendere trasparente la visualizzazione principale.

.s7ecatalogsearchviewer .s7pageview {
 background-color: transparent;
}

Nei sistemi desktop il componente supporta il selettore di attributi cursortype che può essere applicato alla classe .s7pageview e controlla il tipo di cursore in base allo stato del componente e all'azione dell'utente. Sono supportati i seguenti valori cursortype:

Valore
Descrizione
predefinito
Visualizzato quando l'immagine non è ingrandita a causa di una risoluzione di immagine ridotta, impostazioni dei componenti o entrambi.
Zoom
Viene visualizzato quando è possibile ingrandire l'immagine.
ha reimpostato
Viene visualizzata quando l'immagine è al massimo livello di zoom e può essere ripristinata allo stato iniziale.
trascinare
Viene visualizzato quando l’utente effettua una panoramica dell’immagine ingrandita.
diapositiva
Viene visualizzato quando l’utente esegue uno scambio di immagini facendo un gesto rapido o un gesto rapido orizzontale.

Il divisore di pagina che separa visivamente le pagine a sinistra e a destra della pagina visualizzata nel catalogo è controllato dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7pageview .s7pagedivider

Proprietà CSS
Descrizione
larghezza
Larghezza del divisore di pagina. Impostare su 0 px per nascondere completamente il divisore.
immagine di sfondo
Immagine da utilizzare come divisore di pagina.

Esempio: per avere un divisore di pagina di 40 pixel con immagine semitrasparente.

.s7ecatalogsearchviewer .s7pageview .s7pagedivider {
 width:40px;
 background-image:url(images/sdk/divider.png);
}
NOTE
Quando il modificatore frametransition è impostato su turn o auto (su sistemi desktop), l'aspetto del divisore di pagina è controllato con il modificatore pageturnstyle e la classe CSS .s7pagedivider viene ignorata.

È possibile configurare la visualizzazione dei cursori personalizzati del mouse sull'area del visualizzatore principale. Questa capacità è controllata con selettori di attributi aggiuntivi applicati alla classe CSS .s7ecatalogsearchviewer .s7pageview:

Proprietà CSS
Descrizione
predefinito
Normalmente viene visualizzata una freccia per un'immagine non ingrandibile.
Zoom
Mostra quando è possibile ingrandire un'immagine.
ha reimpostato
Mostra quando un'immagine è al massimo zoom e può essere reimpostata.
trascinare
Mostra quando l’utente esegue un’operazione di trascinamento su un’immagine ingrandita
diapositiva
Mostra quando l'utente esegue lo scambio di immagini utilizzando il movimento diapositiva

Esempio: utilizzare cursori del mouse diversi per ogni tipo di stato del componente.

.s7ecatalogsearchviewer .s7pageview[cursortype="default"] {
cursor:auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="zoomin"] {
cursor:url(images/zoomin_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="reset"] {
cursor:url(images/zoomout_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview [cursortype="slide"] {
cursor:url(images/slide_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="drag"] {
cursor:url(images/drag_cursor.cur), auto;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8