Vista a pagina

La vista principale è costituita dall’immagine del catalogo. È possibile scorrere per passare a un’altra pagina o ingrandirla.

Proprietà CSS dell’area visualizzatore principale

L’aspetto dell’area di visualizzazione è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7pageview

Proprietà CSS

Descrizione

colore di sfondo

Colore di sfondo della vista principale in formato esadecimale.

cursore

Cursore visualizzato sulla 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

default

Visualizzato quando l'immagine non è zoomabile a causa di una piccola risoluzione dell'immagine, impostazioni del componente o entrambe.

zoomina

Visualizzato quando l'immagine può essere ingrandita.

reset

Visualizzata quando l'immagine è al livello di zoom massimo e può essere ripristinata allo stato iniziale.

trascinare

Visualizzato quando l’utente fa scorrere l’immagine con lo stato di zoom.

diapositiva

Visualizzato quando l’utente esegue uno scambio di immagini facendo scorrere o scorrere in orizzontale.

Il divisore di pagina che separa visivamente le pagine sinistra e destra dello spread di catalogo è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7pageview .s7pagedivider

Proprietà CSS

Descrizione

width

Larghezza del divisore di pagina. Impostare su 0 px per nascondere completamente il divisore.

immagine di sfondo

Immagine da usare come divisore di pagina.

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

.s7ecatalogsearchviewer .s7pageview .s7pagedivider { 
 width:40px; 
 background-image:url(images/sdk/divider.png); 
}
NOTA

Quando il modificatore frametransition è impostato su turn o auto (sui sistemi desktop), l’aspetto del divisore di pagina viene controllato con il modificatore pageturnstyle e la classe CSS .s7pagedivider viene ignorata.

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

Proprietà CSS

Descrizione

default

Normalmente viene visualizzata una freccia per un'immagine non zoomabile.

zoomina

Mostra quando è possibile ingrandire un’immagine.

reset

Mostra quando un'immagine è con lo zoom massimo 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 di diapositiva

Esempio : disporre di 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; 
}

In questa pagina