Sommario

Ultimo aggiornamento: 2023-05-22
  • Argomenti:
  • Dynamic Media Classic
    Visualizza ulteriori informazioni su questo argomento
  • Viewers
    Visualizza ulteriori informazioni su questo argomento
  • SDK/API
    Visualizza ulteriori informazioni su questo argomento
  • eCatalog Search
    Visualizza ulteriori informazioni su questo argomento
  • Creato per:
  • Developer
    User

Il sommario è un pulsante nella barra di controllo principale. Quando è attivato, viene visualizzato un pannello a discesa con un elenco di indici ed etichette di pagina.

In base alla configurazione, l’elenco può contenere tutte le pagine presenti nel catalogo o solo quelle per cui sono definite etichette esplicite. Sui sistemi desktop, se l'elenco è più lungo della superficie disponibile sullo schermo, a destra viene visualizzata una barra di scorrimento.

La posizione e le dimensioni del pulsante del sommario nell’interfaccia utente del visualizzatore sono controllate dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7tableofcontents

Proprietà CSS del sommario

margin-top

Offset dalla parte superiore della barra di controllo.

margin-left

Distanza dal pulsante successivo a sinistra o dal lato sinistro della barra di controllo se questo pulsante è il primo di una riga.

width

Larghezza del pulsante del sommario.

height

Altezza del pulsante del sommario.

background-image

Immagine visualizzata per un determinato stato del pulsante.

background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Vedi anche Spunti CSS .

NOTA

Questo pulsante supporta state selettore di attributi, che può essere utilizzato per applicare interfacce diverse a stati di pulsante diversi.

La descrizione comando del pulsante può essere localizzata. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio: impostare un pulsante del sommario posizionato a 4 pixel dal basso e a 43 pixel dalla sinistra della barra di controllo principale. Le dimensioni sono di 28 x 28 pixel e viene visualizzata un'immagine diversa per ciascuno dei quattro stati dei pulsanti:

.s7ecatalogsearchviewer .s7tableofcontents {
margin-top: 4px;
margin-left: 10px; width: 28px;
 height: 28px;
}
.s7ecatalogsearchviewer .s7tableofcontents[state='up'] {
background-image:url(images/v2/TableOfContents_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='over'] {
background-image:url(images/v2/TableOfContents_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='down'] {
background-image:url(images/v2/TableOfContents_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='disabled'] {
background-image:url(images/v2/TableOfContents_dark_disabled.png);
}

L’aspetto del pannello a discesa è controllato dal seguente selettore di classe CSS:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel

Proprietà CSS del pannello a discesa

background-color

Colore di sfondo del pannello a discesa.

margine

Offset interno tra i bordi del pannello e il contenuto.

box-shadow

Ombra esterna attorno al pannello.

NOTA

Non è possibile controllare le dimensioni o la posizione del pannello a discesa dagli stili CSS; il componente ne gestisce il layout a livello di programmazione.

Esempio: imposta un pannello a discesa con uno sfondo nero semitrasparente, un margine di 5 pixel attorno al contenuto e un’ombra esterna:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel {
 background-color: rgba(0, 0, 0, 0.5);
 margin: 5px;
 box-shadow: 2px 2px 3px #c0c0c0;
}

L’aspetto dei singoli elementi è controllato dal seguente selettore di classe CSS:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item

Proprietà CSS dell'elemento

font-family

Nome font.

font-size

Dimensione font.

height

Altezza dell'elemento.

riempimento

Spaziatura interna.

NOTA

L'elemento dell'elenco a discesa supporta state selettore di attributi, che può essere utilizzato per applicare skin diversi agli stati al passaggio del mouse e agli elementi selezionati.

Esempio: impostare un elemento a discesa con un carattere Helvetica® di 14 pixel e un'altezza di 19 pixel. Quando un elemento è selezionato, presenta uno sfondo grigio scuro al passaggio del mouse e uno sfondo grigio chiaro:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item {
font-family: Helvetica,sans-serif;
font-size: 14px;
height: 19px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item[state="over"] {
background-color: rgb(102, 102, 102);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item[state="selected"] {
background-color: rgb(178, 178, 178);
}

Un elemento che mostra l’indice della pagina è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index

Proprietà CSS dell’indice della pagina

min-width

Larghezza minima degli elementi.

max-width

Larghezza massima elemento.

padding-right

Distanza tra l'indice e l'etichetta della pagina.

NOTA

È possibile nascondere completamente l’indice della pagina impostando display:none per s7index Classe CSS.

Esempio 1: impostare un indice di pagina con una larghezza minima di 40 pixel, una larghezza massima di 70 pixel e un margine di 5 pixel sul lato destro:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index {
max-width: 70px;
min-width: 40px;
padding-right: 5px;
}

Esempio 2 - nascondere l’indice della pagina:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index {
display: none;
}

L’etichetta della pagina è controllata con il seguente selettore di classe CSS:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7label

Proprietà CSS dell’etichetta pagina

min-width

Larghezza minima degli elementi.

max-width

Larghezza massima elemento.

Esempio: impostare un indice di pagina con una larghezza minima di 40 pixel e una larghezza massima di 240 pixel:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7label {
min-width: 40px;
max-width: 240px;
}

Se il numero di elementi che possono rientrare verticalmente nel pannello a discesa è superiore a quello del desktop, il componente esegue il rendering di una barra di scorrimento verticale sul lato destro del pannello. L’aspetto dell’area della barra di scorrimento è controllato dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar

Proprietà CSS della barra di scorrimento

width

Larghezza della barra di scorrimento.

top

Scostamento della barra di scorrimento verticale dalla parte superiore dell'area del pannello.

bottom

Scostamento della barra di scorrimento verticale dalla parte inferiore dell'area del pannello.

destra

La barra di scorrimento orizzontale si sposta dal bordo destro dell'area del pannello.

Esempio: imposta una barra di scorrimento larga 28 pixel e priva di margini per l’area superiore, destra o inferiore del pannello:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar {
 top:0px;
 bottom:0px;
 right:0px;
 width:28px;
}

La traccia della barra di scorrimento è l'area compresa tra i pulsanti di scorrimento superiore e inferiore. Il componente imposta automaticamente la posizione e l'altezza della traccia. Il brano è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

Proprietà CSS del brano di scorrimento

width

Larghezza della traccia.

background-color

Colore di sfondo del brano.

Esempio: impostare una traccia della barra di scorrimento larga 28 pixel con uno sfondo grigio semitrasparente:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolltrack {
 width:28px;
 background-color:rgba(102, 102, 102, 0.5);
}

Il pollice della barra di scorrimento si sposta verticalmente all'interno dell'area della traccia di scorrimento. La sua posizione verticale è controllata dalla logica del componente. Tuttavia, l’altezza del pollice non cambia in modo dinamico a seconda della quantità di contenuto. Puoi configurare l’altezza del pollice e altri aspetti con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

Proprietà CSS della barra di scorrimento

width

Larghezza del pollice.

height

Altezza del pollice.

riempimento superiore

Spaziatura verticale tra la parte superiore del brano.

padding-bottom

Spaziatura verticale tra la parte inferiore del brano.

background-image

Immagine visualizzata per un determinato stato del pollice.

background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Vedi anche Spunti CSS .

NOTA

Il miniatura supporta state selettore di attributi, che può essere utilizzato per applicare skin diversi al up, down, over, e disabled stati del pollice.

Esempio: impostare una barra di scorrimento di 28 x 45 pixel, con margini di 10 pixel in alto e in basso e un disegno diverso per ogni stato:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb {
 width:28px;
 background-repeat:no-repeat;
 background-position:center;
 height:45px;
 padding-top:10px;
 padding-bottom:10px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='up'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='down'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='over'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}

L’aspetto dei pulsanti di scorrimento superiore e inferiore è controllato dai seguenti selettori di classi CSS:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton

Non è possibile posizionare i pulsanti di scorrimento utilizzando CSS top, left, bottom, e right proprietà; al contrario, la logica di visualizzazione li posiziona automaticamente.

Proprietà CSS del pulsante di scorrimento verso l’alto e verso il basso

width

Larghezza pulsante.

height

Altezza pulsante.

background-image

Immagine visualizzata per un determinato stato del pulsante.

background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Vedi anche Spunti CSS .

NOTA

Il pulsante supporta state selettore di attributi, che può essere utilizzato per applicare skin diversi al up, down, over, e disabled stati dei pulsanti.

La descrizione comando del pulsante può essere localizzata. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio: impostare pulsanti di scorrimento di 28 x 32 pixel con grafica diversa per ogni stato:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}

In questa pagina