Barra di controllo principale

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 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:

.s7ecatalogviewer .s7controlbar

Proprietà CSS

Descrizione

top

Posizione dalla parte superiore del visualizzatore.

bottom

Posizione dalla parte inferiore del visualizzatore.

height

Altezza della barra di controllo principale.

background-color

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.

.s7ecatalogviewer .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:

.s7ecatalogviewer .s7controlbar .s7innercontrolbarcontainer

Proprietà CSS

Descrizione

position

Se impostato su statico la funzione di scorrimento è disabilitata.

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

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:

.s7ecatalogviewer .s7controlbar .s7scrollbuttoncontainer

Proprietà CSS

Descrizione

width

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

background-color

Colore di sfondo contenitore.

È 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:

.s7ecatalogviewer .s7controlbar .s7scrollleftrightbutton

Proprietà CSS

Descrizione

width

Larghezza del 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

Questo pulsante supporta state e selected selettori di attributi, che possono essere utilizzati per applicare interfacce diverse a stati di pulsante diversi. In particolare: state="selected" corrisponde allo stato iniziale del pulsante di scorrimento quando è possibile scorrere il contenuto della barra di controllo verso sinistra. Attributo state="default" corrisponde allo stato in cui il contenuto viene scorruto fino alla parte sinistra e il pulsante di scorrimento suggerisce di riportarlo allo stato iniziale.

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

Esempio : per abilitare la funzione 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:

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

In questa pagina