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:
.s7ecatalogviewer .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.
.s7ecatalogviewer .s7pageview {
background-color: transparent;
}
Sui sistemi desktop, il componente supporta il cursortype
selettore di attributi a cui è possibile applicare .s7pageview
e controlla il tipo di cursore in base allo stato del componente e all'azione dell'utente. I seguenti cursortype
sono supportati:
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:
.s7ecatalogviewer .s7pageview .s7pagedivider
Proprietà CSS |
Descrizione |
---|---|
width |
Larghezza del divisore di pagina. Imposta 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.
.s7ecatalogviewer .s7pageview .s7pagedivider {
width:40px;
background-image:url(images/sdk/divider.png);
}
Quando il frametransition
modificatore impostato su turn
o auto
(su sistemi desktop), l’aspetto del divisore di pagina è controllato con il pageturnstyle
modificatore e .s7pagedivider
La classe CSS viene ignorata.
È possibile configurare la visualizzazione dei cursori del mouse personalizzati sull'area del visualizzatore principale. Questa funzionalità è controllata con i selettori di attributi aggiuntivi applicati a .s7ecatalogviewer .s7pageview
Classe CSS:
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.
.s7ecatalogviewer .s7pageview[cursortype="default"] {
cursor:auto;
}
.s7ecatalogviewer .s7pageview[cursortype="zoomin"] {
cursor:url(images/zoomin_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview[cursortype="reset"] {
cursor:url(images/zoomout_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview [cursortype="slide"] {
cursor:url(images/slide_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview[cursortype="drag"] {
cursor:url(images/drag_cursor.cur), auto;
}