Hauptsteuerleiste

Die Hauptsteuerleiste ist der rechteckige Bereich auf Desktop-Systemen und Tablets, der alle Steuerelemente der Benutzeroberfläche (mit Ausnahme der Schaltflächen "Große Seite") enthält, die für den eCatalog Search-Viewer verfügbar sind.

Auf Mobiltelefonen werden weiterhin die Schaltflächen Miniaturansichten, Inhaltsverzeichnis, Download, Drucken, Favoriten, Social-Freigabe, Vollbild und Schließen angezeigt. Die Schaltflächen "Erste Seite"und "Letzte Seite"und "Seitenanzeige"werden jedoch aus der Hauptsteuerleiste entfernt und stattdessen der sekundären Steuerleiste hinzugefügt. Standardmäßig wird die Hauptsteuerleiste im Viewer-Bereich auf Desktop-Systemen und Mobiltelefonen oben angezeigt und auf Tablets an den unteren Rand des Viewer-Bereichs verschoben. Es benötigt immer die gesamte verfügbare Viewer-Breite. Es ist möglich, die Farbe, Höhe und vertikale Position im CSS relativ zum Viewer-Container zu ändern.

Das Erscheinungsbild der Hauptsteuerleiste wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogsearchviewer .s7controlbar

CSS-Eigenschaft

Beschreibung

Anfang

Position oben im Viewer.

unten

Position am unteren Rand des Viewers.

height

Die Höhe der Hauptsteuerleiste.

background-color

Die Hintergrundfarbe der Hauptsteuerleiste.

Beispiel : Zum Einrichten einer grauen Hauptkontrollleiste, die 36 Pixel groß ist und sich oben im Viewer-Container befindet.

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

Die Hauptsteuerleiste unterstützt eine optionale Bildlauffunktion. Sie wird aktiviert, wenn die Viewer-Breite zu klein ist und nicht genügend Platz für alle Schaltflächen in der Steuerleiste vorhanden ist. In diesem Fall wird rechts in der Steuerleiste eine Zwei-Status-Pfeilschaltfläche angezeigt. Durch Klicken oder Tippen auf diese Schaltfläche werden je nach Status der Bildlaufschaltfläche alle Elemente der Kontrollleiste nach links oder rechts gescrollt. Das primäre Anwendungsbeispiel für diese Funktion sind Mobilgeräte mit kleinen Bildschirmen im Hochformat.

Die Bildlauffunktion ist für die Hauptsteuerleiste aktiviert und für die sekundäre Steuerleiste deaktiviert. Die Funktion wird mit der folgenden CSS-Klassenauswahl aktiviert und deaktiviert:

.s7ecatalogsearchviewer .s7controlbar .s7innercontrolbarcontainer

CSS-Eigenschaft

Beschreibung

position

Wenn auf static festgelegt, ist die Bildlauffunktion deaktiviert.

Legen Sie diese Eigenschaft auf absolute fest, um die Bildlauffunktion zu aktivieren.

Die Bildlaufschaltfläche wird zu einem speziellen Container-Element hinzugefügt, das die Schaltfläche richtig positioniert und es Ihnen ermöglicht, den Bereich um die Schaltfläche anders zu gestalten als den Rest des Hintergrunds der Steuerleiste, falls die Höhe der Bildlaufschaltfläche kleiner als die Höhe der Steuerleiste ist.

Das Erscheinungsbild dieses Scroll-Schaltflächen-Containers wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogsearchviewer .s7controlbar .s7scrollbuttoncontainer

CSS-Eigenschaft

Beschreibung

width

Normalerweise sollte gleich oder größer als die Breite der Bildlaufschaltfläche selbst sein.

background-color

Container-Hintergrundfarbe.

Sie können die Bildlaufschaltfläche über CSS anpassen und anordnen.

Das Erscheinungsbild dieser Schaltfläche wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogsearchviewer .s7controlbar .s7scrollleftrightbutton

CSS-Eigenschaft

Beschreibung

width

Breite der Schaltfläche.

height

Höhe der Schaltfläche.

background-image

Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird.

background-position

Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden.

Siehe auch CSS-Sprites .

HINWEIS

Diese Schaltfläche unterstützt die Attributselektoren state und selected, die verwendet werden können, um verschiedene Skins auf unterschiedliche Schaltflächenzustände anzuwenden. Insbesondere state="selected" entspricht dem anfänglichen Status der Bildlaufschaltfläche, wenn der Inhalt der Steuerleiste nach links gescrollt werden kann; state="default" entspricht dem Status, in dem der Inhalt vollständig nach links gescrollt wird und die Bildlaufschaltfläche andeutet, dass sie zum ursprünglichen Zustand zurückkehren soll.

Die QuickInfo der Schaltfläche kann lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen.

Beispiel : Um die Bildlauffunktion in der Hauptsteuerleiste für Mobiltelefone zu aktivieren, richten Sie eine Bildlaufschaltfläche von 64 x 64 Pixel ein, die für jeden der vier Schaltflächenstatus ein anderes Bild anzeigt, wenn sie ausgewählt sind oder nicht ausgewählt sind:

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

Auf dieser Seite