Barra di controllo principale

La barra di controllo principale è l’area rettangolare dei sistemi desktop e dei tablet che contengono tutti i controlli dell’interfaccia utente (ad eccezione dei pulsanti Pagina grande) disponibili per il visualizzatore di ricerca eCatalog.

Sui telefoni cellulari, mantiene ancora i pulsanti Miniature, Sommario, Scarica, Stampa, Preferiti, Condivisione social, Schermo intero e Chiudi. Tuttavia, i pulsanti Prima pagina e Ultima pagina e l’indicatore pagina vengono rimossi dalla barra di controllo principale e aggiunti alla barra di controllo secondaria. Per impostazione predefinita, la barra di controllo principale viene visualizzata nella parte superiore dell’area del visualizzatore su sistemi desktop e telefoni cellulari e spostata nella parte inferiore dell’area del visualizzatore su tablet. Richiede sempre l’intera larghezza del visualizzatore disponibile. È possibile modificarne il colore, l’altezza e la posizione verticale nel CSS, rispetto al contenitore del visualizzatore.

L’aspetto della barra di controllo principale viene controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7controlbar

Proprietà CSS

Descrizione

top

Posizione dalla parte superiore del visualizzatore.

bottom

Posizione dal fondo del visualizzatore.

height

Altezza della barra di controllo principale.

colore di sfondo

Colore di sfondo della barra di controllo principale.

Esempio : per impostare una barra di controllo principale grigia alta 36 pixel e posizionata nella parte superiore del contenitore del visualizzatore.

.s7ecatalogsearchviewer .s7controlbar { 
 top: 0px; 
 height: 36px; 
 background-color: rgba(0, 0, 0, 0.5); 
}

La barra di controllo principale supporta una funzione di scorrimento facoltativa. Viene attivato se la larghezza del visualizzatore è troppo piccola e lo spazio disponibile non è sufficiente per adattarsi a tutti i pulsanti preimpostati nella barra di controllo. In questo caso, nella parte destra della barra di controllo viene visualizzato un pulsante a freccia a due stati. Tocca o fai clic su questo pulsante per scorrere tutti gli elementi della barra di controllo verso sinistra o verso destra, a seconda dello stato del pulsante di scorrimento. Questa funzione è utile soprattutto per i dispositivi mobili con piccoli schermi in orientamento verticale.

La funzione di scorrimento è abilitata per la barra di controllo principale ed è disabilitata per la barra di controllo secondaria. La funzione viene attivata e disattivata utilizzando il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7controlbar .s7innercontrolbarcontainer

Proprietà CSS

Descrizione

position

Quando è impostata su statica la funzione di scorrimento è disabilitata.

Imposta questa proprietà su assoluto per abilitare la funzione di scorrimento.

Il pulsante di scorrimento viene aggiunto a un elemento contenitore speciale che posiziona correttamente il pulsante e consente di impostare un diverso stile per l’area intorno al pulsante rispetto al resto dello sfondo della barra di controllo nel caso in cui l’altezza del pulsante di scorrimento sia inferiore all’altezza della barra di controllo.

L’aspetto di questo contenitore di pulsanti di scorrimento è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7controlbar .s7scrollbuttoncontainer

Proprietà CSS

Descrizione

width

Normalmente deve essere uguale o maggiore della larghezza del pulsante di scorrimento stesso.

colore di sfondo

Colore di sfondo del contenitore.

Puoi ridimensionare e applicare lo skin al pulsante di scorrimento stesso tramite CSS.

L’aspetto di questo pulsante è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7controlbar .s7scrollleftrightbutton

Proprietà CSS

Descrizione

larghezza

Larghezza del pulsante.

altezza

Altezza del pulsante.

immagine di sfondo

Immagine visualizzata per un determinato stato del pulsante.

posizione di sfondo

Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS.

Vedi anche Sprite CSS .

NOTA

Questo pulsante supporta i selettori di attributi state e selected , che possono essere utilizzati per applicare interfacce diverse a diversi stati dei pulsanti. In particolare, state="selected" corrisponde allo stato iniziale del pulsante di scorrimento quando è possibile scorrere il contenuto della barra di controllo a sinistra; state="default" corrisponde allo stato in cui il contenuto viene scortato completamente a sinistra e il pulsante di scorrimento suggerisce di riportarlo allo stato iniziale.

La descrizione comando del pulsante può essere localizzata. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

Esempio : per abilitare la funzione di scorrimento nella barra di controllo principale per i telefoni cellulari, e impostare un pulsante di scorrimento di 64 x 64 pixel che mostra un’immagine diversa per ciascuno dei 4 stati di pulsante diversi se selezionato o meno:

.s7ecatalogsearchviewer.s7size_small .s7controlbar .s7innercontrolbarcontainer { 
 position: absolute; 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollbuttoncontainer { 
 width:64px; 
 background-color: rgb(0, 0, 0); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton { 
 width:64px; 
 height:64px; 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='up'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_up_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='over'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_over_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='down'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_down_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='disabled'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_disabled_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='up'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_up_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='over'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_over_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='down'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_down_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='disabled'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_disabled_touch.png); 
}

In questa pagina