DokumentationDynamic Media Viewer-Referenzhandbuch

Seitenansicht page-view

Last update: Tue Dec 31 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Entwickler
  • Benutzende

Die Hauptansicht besteht aus dem Katalogbild. Sie kann gewischt werden, um zu einer anderen Seite zu gelangen, oder gezoomt werden.

CSS-Eigenschaften des Haupt-Viewer-Bereichs

Das Erscheinungsbild des Anzeigebereichs wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogviewer .s7pageview
CSS-Eigenschaft
Beschreibung
-
Hintergrundfarbe der Hauptansicht im Hexadezimalformat.
Cursor-
Cursor, der über der Hauptansicht angezeigt wird.

Beispiel - um die Hauptansicht transparent zu gestalten.

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

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

Wert
Beschreibung
-
Wird angezeigt, wenn das Bild aufgrund einer geringen Bildauflösung, Komponenteneinstellungen oder beidem nicht zoombar ist.
Zoom-
Wird angezeigt, wenn das Bild vergrößert werden kann.
-
Wird angezeigt, wenn sich das Bild im maximalen Zoombereich befindet und auf den Ausgangszustand zurückgesetzt werden kann.
Drag
Wird angezeigt, wenn Benutzende das Bild schwenken, das vergrößert ist.
-
Wird angezeigt, wenn Benutzende durch horizontales Wischen oder Klicken ein Bild austauschen.

Der Seitenteiler, der die linken und rechten Seiten der Katalogausbreitung visuell trennt, wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogviewer .s7pageview .s7pagedivider

CSS-Eigenschaft
Beschreibung
Breite
Die Breite des Seitenteilers. Legen Sie auf 0 px fest, um die Trennlinie vollständig auszublenden.
Hintergrundbild-
Das Bild, das Sie als Seitenteiler verwenden möchten.

Beispiel: eine 40 Pixel breite Seitenteilung mit halbtransparentem Bild.

.s7ecatalogviewer .s7pageview .s7pagedivider {
 width:40px;
 background-image:url(images/sdk/divider.png);
}
NOTE
Wenn der Modifikator frametransition auf turn oder auto (auf Desktop-Systemen) festgelegt ist, wird das Erscheinungsbild des Seitenteils mit dem Modifikator pageturnstyle gesteuert und die .s7pagedivider CSS-Klasse wird ignoriert.

Es ist möglich, die Anzeige der benutzerdefinierten Mauszeiger über dem Haupt-Viewer-Bereich zu konfigurieren. Diese Funktion wird mit den zusätzlichen Attributauswahlen gesteuert, die auf .s7ecatalogviewer .s7pageview CSS-Klasse angewendet werden:

CSS-Eigenschaft
Beschreibung
-
Normalerweise wird für nicht zoombare Bilder ein Pfeil angezeigt.
Zoom-
Zeigt an, wann ein Bild vergrößert werden kann.
-
Zeigt an, wann ein Bild im maximalen Zoom ist und zurückgesetzt werden kann.
Drag
Zeigt an, wann der Benutzer einen Ziehvorgang für ein vergrößertes Bild durchführt
-
Zeigt an, wann der Benutzer den Bildaustausch mit der Foliengeste durchführt

Beispiel: Für jeden Komponententyp stehen unterschiedliche Mauszeiger zur Verfügung.

.s7ecatalogviewer .s7pageview[cursortype="default"] {
cursor:auto;
}
.s7ecatalogviewer .s7pageview[cursortype="zoomin"] {
cursor:url(images/zoomin_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview[cursortype="reset"] {
cursor:url(images/zoomout_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview [cursortype="slide"] {
cursor:url(images/slide_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview[cursortype="drag"] {
cursor:url(images/drag_cursor.cur), auto;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8