Hauptsteuerleiste

Die Hauptsteuerungsleiste 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 E-Katalog-Viewer verfügbar sind.

Auf Mobiltelefonen werden weiterhin Miniaturansichten, Inhaltsverzeichnisse, Download-, Druck-, Favoriten-, Social Sharing-, Vollbild- und Schließen-Schaltflächen gespeichert. 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 Hauptsteuerungsleiste auf Desktop-Systemen und Mobiltelefonen oben im Viewer-Bereich angezeigt und auf Tablets nach unten verschoben. Es nimmt immer die gesamte verfügbare Viewer-Breite in Anspruch. Sie können die Farbe, Höhe und vertikale Position im CSS relativ zum Viewer-Container ändern.

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

.s7ecatalogviewer .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 : Zur Einrichtung einer grauen Hauptkontrollleiste, die 36 Pixel hoch und oben im Viewer-Container positioniert ist.

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

Die Hauptsteuerungsleiste unterstützt eine optionale Bildlauffunktion. Es wird aktiviert, wenn die Viewer-Breite zu klein ist und nicht genügend Platz für alle Schaltflächen in der Steuerungsleiste vorhanden ist. In diesem Fall wird rechts in der Steuerungsleiste eine Pfeiltaste mit zwei Status angezeigt. Wenn Sie auf diese Schaltfläche klicken oder darauf tippen, werden je nach Status der Bildlaufschaltfläche alle Elemente der Steuerleiste nach links oder rechts durchlaufen. Der primäre Anwendungsfall 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 ist mithilfe der folgenden CSS-Klassenauswahl aktiviert und deaktiviert:

.s7ecatalogviewer .s7controlbar .s7innercontrolbarcontainer

CSS-Eigenschaft

Beschreibung

position

Bei Festlegung auf static ist die Bildlauffunktion deaktiviert.

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

Die Bildlauftaste wird einem speziellen Container hinzugefügt, der die Schaltfläche korrekt positioniert und es Ihnen ermöglicht, den Schaltflächenbereich anders zu gestalten als den übrigen Hintergrund der Steuerleiste, falls die Höhe der Bildlauftaste kleiner als die Höhe der Steuerleiste ist.

Das Erscheinungsbild dieses Containers für die Bildlaufschaltfläche wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7controlbar .s7scrollbuttoncontainer

CSS-Eigenschaft

Beschreibung

width

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

background-color

Hintergrundfarbe des Containers.

Sie können die Bildlauftaste per CSS verkleinern und per Skin bearbeiten.

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

.s7ecatalogviewer .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 Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe auch CSS-Sprites .

HINWEIS

Diese Schaltfläche unterstützt die Attributselektoren state und selected, mit denen verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können. Insbesondere entspricht state="selected" dem Anfangszustand der Bildlaufschaltfläche, wenn der Inhalt der Steuerleiste nach links durchlaufen werden kann; state="default" entspricht dem Status, in dem der Inhalt bis ganz nach links durchlaufen wird und die Bildlauftaste vorschlägt, ihn zum Ausgangszustand zurückzukehren.

Die QuickInfo für Schaltflächen kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel : Um die Bildlauffunktion in der Hauptsteuerleiste für Mobiltelefone zu aktivieren und eine Bildlauftaste mit 64 x 64 Pixel einzurichten, die ein anderes Bild für jeden der vier verschiedenen Schaltflächenzustände anzeigt, wenn diese ausgewählt oder nicht ausgewählt sind:

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

Auf dieser Seite

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now