Visualizzazione pagina page-view
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
Esempio: per rendere trasparente la visualizzazione principale.
.s7ecatalogsearchviewer .s7pageview {
background-color: transparent;
}
Sui sistemi desktop, il componente supporta cursortype
selettore di attributi che può essere applicato a .s7pageview
e controlla il tipo di cursore in base allo stato del componente e all'azione dell'utente. I seguenti elementi cursortype
sono supportati i seguenti valori:
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
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);
}
frametransition
il modificatore è impostato su turn
o auto
(sui sistemi desktop), l'aspetto del divisore di pagina è controllato dal pageturnstyle
e .s7pagedivider
Classe CSS ignorata.È possibile configurare la visualizzazione dei cursori personalizzati del mouse sull'area del visualizzatore principale. Questa funzionalità è controllata con selettori di attributi aggiuntivi applicati a .s7ecatalogsearchviewer .s7pageview
Classe CSS:
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;
}