Barra di controllo principale main-control-bar

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

Sui telefoni cellulari conserva ancora i pulsanti Anteprime, Sommario, Download, Stampa, Preferiti, Condivisione social, Schermo intero e Chiudi. Tuttavia, i pulsanti Prima pagina e Ultima pagina e 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 sui sistemi desktop e sui telefoni cellulari e spostata nella parte inferiore dell'area del visualizzatore sui 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 è controllato dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7controlbar

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 opzionale. Viene attivato se la larghezza del visualizzatore è troppo piccola e non c’è abbastanza spazio per contenere tutti i pulsanti predefiniti nella barra di controllo. In questo caso, nella parte destra della barra di controllo viene visualizzato un pulsante con la freccia a due stati. Toccando o facendo clic su questo pulsante, tutti gli elementi della barra di controllo vengono spostati verso sinistra o verso destra, a seconda dello stato del pulsante di scorrimento. Il caso d’uso principale per questa funzione sono i dispositivi mobili con schermi di piccole dimensioni in orientamento verticale.

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

.s7ecatalogsearchviewer .s7controlbar .s7innercontrolbarcontainer

Il pulsante di scorrimento viene aggiunto a un elemento contenitore speciale che lo posiziona correttamente. Consente di applicare uno stile diverso all'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 dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7controlbar .s7scrollbuttoncontainer

È possibile ridimensionare ed eseguire lo skin del pulsante di scorrimento stesso tramite CSS.

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

.s7ecatalogsearchviewer .s7controlbar .s7scrollleftrightbutton

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

Esempio - Per abilitare la funzionalità di scorrimento nella barra di controllo principale per i telefoni cellulari. Impostate un pulsante di scorrimento di 64 x 64 pixel in modo da visualizzare un'immagine diversa per ciascuno dei 4 stati del pulsante, se selezionato o non selezionato:

.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);
}