Seitenansicht

Letzte Aktualisierung: 2021-12-10
  • Erstellt für:
  • Developer
    User

Die Hauptansicht besteht aus dem Katalogbild. Es kann wischt werden, um zu einer anderen Seite zu gelangen oder zu zoomen.

CSS-Eigenschaften des Haupt-Viewer-Bereichs

Das Erscheinungsbild des Anzeigebereichs wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogsearchviewer .s7pageview

CSS-Eigenschaft

Beschreibung

background-color

Hintergrundfarbe der Hauptansicht im hexadezimalen Format.

Cursor

Cursor, der über der Hauptansicht angezeigt wird.

Beispiel - um die Hauptansicht transparent zu machen.

.s7ecatalogsearchviewer .s7pageview {
 background-color: transparent;
}

Auf Desktop-Systemen unterstützt die Komponente die cursortype -Attributauswahl, auf die angewendet werden kann .s7pageview -Klasse und steuert den Typ des Cursors basierend auf dem Komponentenstatus und der Benutzeraktion. Folgendes cursortype -Werte werden unterstützt:

Wert

Beschreibung

Standard

Wird angezeigt, wenn das Bild aufgrund einer geringen Bildauflösung, Komponenteneinstellungen oder beidem nicht vergrößert werden kann.

Zoomin

Wird angezeigt, wenn das Bild vergrößert werden kann.

zurücksetzen

Wird angezeigt, wenn sich das Bild auf dem maximalen Zoomfaktor befindet und auf den anfänglichen Status zurückgesetzt werden kann.

ziehen

Wird angezeigt, wenn der Benutzer das Bild schaltet, das gezoomt ist.

Folie

Wird angezeigt, wenn der Benutzer einen Bildtausch durch horizontales Wischen oder Klick durchführt.

Der Seitenaufteiler, der die linke und rechte Seite des Katalogaufschlags visuell trennt, wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogsearchviewer .s7pageview .s7pagedivider

CSS-Eigenschaft

Beschreibung

width

Die Breite des Seiten-Dividers. Legen Sie fest auf 0 px , um die Trennlinie vollständig zu verbergen.

background-image

Das Bild, das Sie als Seitenaufteilung verwenden möchten.

Beispiel: Um einen Seitenaufleger mit einer Breite von 40 Pixel mit einem halbtransparenten Bild zu haben.

.s7ecatalogsearchviewer .s7pageview .s7pagedivider {
 width:40px;
 background-image:url(images/sdk/divider.png);
}
HINWEIS

Wenn die frametransition modifier ist auf turn oder auto (auf Desktop-Systemen) wird das Erscheinungsbild des Seiten-Dividers mit dem pageturnstyle -Modifikator und die .s7pagedivider CSS-Klasse wird ignoriert.

Es ist möglich, die Anzeige der benutzerdefinierten Mauszeiger über dem Hauptanzeige-Bereich zu konfigurieren. Diese Fähigkeit wird durch die zusätzlichen Attributselektoren gesteuert, die auf .s7ecatalogsearchviewer .s7pageview CSS-Klasse:

CSS-Eigenschaft

Beschreibung

Standard

Normalerweise wird ein Pfeil für nicht vergrößerbare Bilder angezeigt.

Zoomin

Zeigt an, wann ein Bild vergrößert werden kann.

zurücksetzen

Zeigt an, wann sich ein Bild im maximalen Zoom befindet und zurückgesetzt werden kann.

ziehen

Zeigt an, wann der Benutzer beim Zoomen des Bildes den Ziehvorgang durchführt

Folie

Zeigt an, wann der Benutzer einen Bildtausch mithilfe einer Foliengeste durchführt

Beispiel: Für jeden Komponententyp gibt es unterschiedliche Mauszeiger.

.s7ecatalogsearchviewer .s7pageview[cursortype="default"] {
cursor:auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="zoomin"] {
cursor:url(images/zoomin_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="reset"] {
cursor:url(images/zoomout_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview [cursortype="slide"] {
cursor:url(images/slide_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="drag"] {
cursor:url(images/drag_cursor.cur), auto;
}
Vorherige Seite
Next page

Auf dieser Seite