Ansicht der Seite

Die Hauptversion besteht aus dem Katalogbild. Es kann wischen, um zu einer anderen Seite zu gelangen, oder gezoomt.

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 Haupt-Ansicht im Hexadezimalformat.

cursor

Cursor, der über der Haupt-Ansicht angezeigt wird.

Beispiel - um die Ansicht transparent zu machen.

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

Auf Desktop-Systemen unterstützt die Komponente die Attributauswahl cursortype, die auf die Klasse .s7pageview angewendet werden kann, und steuert den Cursortyp basierend auf Komponentenstatus und Benutzeraktion. Die folgenden cursortype-Werte werden unterstützt:

Wert

Beschreibung

Standard

Wird angezeigt, wenn das Bild aufgrund einer geringen Bildauflösung, Komponenteneinstellungen oder beidem nicht gezoombar ist.

zoomin

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

zurücksetzen

Wird angezeigt, wenn das Bild den maximalen Zoomgrad erreicht hat und auf den Ausgangszustand zurückgesetzt werden kann.

ziehen

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

Folie

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

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

.s7ecatalogsearchviewer .s7pageview .s7pagedivider

CSS-Eigenschaft

Beschreibung

width

Die Breite des Seitenunterteilers. Auf 0 px setzen, um die Trennlinie vollständig auszublenden.

background-image

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

Beispiel: Es wird ein Seitenteiler mit einer Breite von 40 Pixeln und ein halbtransparentes Bild verwendet.

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

Wenn der Modifikator frametransition auf turn oder auto (auf Desktop-Systemen) eingestellt ist, wird das Erscheinungsbild des Seitenteilers mit dem Modifikator pageturnstyle gesteuert und die CSS-Klasse .s7pagedivider wird ignoriert.

Es ist möglich, die Anzeige der benutzerdefinierten Mauszeiger über dem Hauptviewer-Bereich zu konfigurieren. Dies wird mithilfe der zusätzlichen Attributselektoren gesteuert, die auf die CSS-Klasse .s7ecatalogsearchviewer .s7pageview angewendet werden:

CSS-Eigenschaft

Beschreibung

Standard

Normalerweise wird ein Pfeil für ein Bild angezeigt, das nicht vergrößert werden kann.

zoomin

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

zurücksetzen

Zeigt an, wann ein Bild maximal gezoomt wird und zurückgesetzt werden kann.

ziehen

Zeigt an, wenn der Benutzer beim Zoomen des Bildes den Vorgang "Ziehen"durchführt

Folie

Zeigt an, wann der Benutzer den Bildaustausch mithilfe der Foliengeste durchführt

Beispiel: Sie haben unterschiedliche Mauszeiger für jeden Typ des Komponentenstatus.

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

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
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