Hauptsteuerleiste main-control-bar
Die Hauptsteuerleiste ist der rechteckige Bereich auf Desktop-Systemen und Tablets, der alle Steuerelemente der Benutzeroberfläche (mit Ausnahme von Schaltflächen für große Seiten) enthält, die für den E-Katalog-Such-Viewer verfügbar sind.
Auf Mobiltelefonen werden weiterhin die Schaltflächen Miniaturansichten, Inhaltsverzeichnis, Herunterladen, Drucken, Favoriten, Social Share, Vollbild und Schließen gespeichert. Die Schaltflächen „Erste Seite“ und „Letzte Seite“ sowie die Seitenanzeige werden jedoch aus der Hauptsteuerleiste entfernt und stattdessen zur sekundären Steuerleiste hinzugefügt. Standardmäßig wird die Hauptsteuerleiste oben im Viewer-Bereich auf Desktop-Systemen und Mobiltelefonen angezeigt und auf Tablets an das Ende des Viewer-Bereichs verschoben. Dazu wird immer die gesamte verfügbare Viewer-Breite benötigt. 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 dem folgenden CSS-Klassenselektor gesteuert:
.s7ecatalogsearchviewer .s7controlbar
Beispiel - Zum Einrichten einer grauen Hauptsteuerleiste, die 36 Pixel hoch 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. Er wird aktiviert, wenn die Viewer-Breite zu klein ist und nicht genügend Platz für alle in der Steuerleiste voreingestellten Schaltflächen vorhanden ist. In diesem Fall wird rechts in der Steuerleiste eine Pfeilschaltfläche mit zwei Status angezeigt. Durch Klicken oder Tippen auf diese Schaltfläche werden alle Elemente der Steuerleiste je nach Zustand der Bildlaufschaltfläche nach links oder rechts verschoben. Der Hauptanwendungsfall für diese Funktion sind mobile Gerä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 mithilfe des folgenden CSS-Klassenselektors ein- und ausgeschaltet:
.s7ecatalogsearchviewer .s7controlbar .s7innercontrolbarcontainer
Bei statischen ist die Bildlauffunktion deaktiviert.
Legen Sie diese Eigenschaft auf absolute fest, um die Bildlauffunktion zu aktivieren.
Die Scroll-Schaltfläche wird einem speziellen Container-Element hinzugefügt, das die Schaltfläche ordnungsgemäß positioniert. Auf diese Weise können Sie den Bereich um die Schaltfläche anders 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-Button-Containers wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7ecatalogsearchviewer .s7controlbar .s7scrollbuttoncontainer
Sie können die Bildlaufschaltfläche selbst mithilfe von CSS in der Größe anpassen und mit der Haut versehen.
Das Erscheinungsbild dieser Schaltfläche wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7ecatalogsearchviewer .s7controlbar .s7scrollleftrightbutton
Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden.
Siehe auch CSS Sprites-.
state und selected, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können. Insbesondere entspricht state="selected" dem anfänglichen Scroll-Button-Zustand, wenn es möglich ist, den Inhalt der Steuerleiste nach links zu scrollen. Die state="default" entspricht dem Status, in dem der Inhalt ganz nach links gescrollt wird. Die Bildlaufschaltfläche schlägt vor, den ursprünglichen Status wiederherzustellen.Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.
Beispiel - Zum Aktivieren der Bildlauffunktion in der Hauptsteuerleiste für Mobiltelefone. Richten Sie außerdem eine Bildlaufschaltfläche mit 64 x 64 Pixeln ein, die für jeden der vier verschiedenen Schaltflächenstatus ein anderes Bild anzeigt, wenn ausgewählt oder nicht ausgewählt:
.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);
}