Die visuelle Anpassung und die meisten Verhaltensanpassungen für den Zoom-Viewer erfolgen durch Erstellen eines benutzerdefinierten CSS.
Der vorgeschlagene Workflow besteht darin, die Standard-CSS-Datei für den entsprechenden Viewer zu übernehmen, sie an einen anderen Speicherort zu kopieren, sie anzupassen und den Speicherort der angepassten Datei im style=
Befehl.
Standard-CSS-Dateien finden Sie unter folgendem Speicherort:
<s7_viewers_root>/html5/ZoomViewer_light.css
Der Viewer wird mit zwei nativen CSS-Dateien für helle und dunkle Farbschemata geliefert. Die "helle"Version wird standardmäßig verwendet, Sie können jedoch mithilfe des folgenden Standard-CSS zur "dunklen"Version wechseln:
<s7_viewers_root>/html5/ZoomViewer_dark.css
Benutzerdefinierte CSS-Dateien müssen dieselben Klassendeklarationen wie die Standarddeklaration enthalten. Wenn eine Klassendeklaration weggelassen wird, funktioniert der Viewer nicht ordnungsgemäß, da er keine integrierten Standardstile für Elemente der Benutzeroberfläche bereitstellt.
Alternativ können Sie benutzerdefinierte CSS-Regeln bereitstellen, indem Sie eingebettete Stile direkt auf der Webseite oder in einer verknüpften externen CSS-Regel verwenden.
Beachten Sie beim Erstellen von benutzerdefiniertem CSS, dass der Viewer .s7zoomviewer
-Klasse zu ihrem Container-DOM-Element hinzu. Wenn Sie eine externe CSS-Datei verwenden, die mit style=
Befehl, verwenden .s7zoomviewer
-Klasse als übergeordnete Klasse im untergeordneten Selektor für Ihre CSS-Regeln. Wenn Sie eingebettete Stile auf der Web-Seite verwenden, qualifizieren Sie diesen Selektor wie folgt mit einer ID des Container-DOM-Elements:
#<containerId>.s7zoomviewer
Es ist möglich, verschiedene Geräte anzusprechen und die Größe in CSS einzubetten, damit Ihre Inhalte je nach Gerät eines Benutzers oder Webseitenlayout unterschiedlich angezeigt werden. Dieses Targeting umfasst verschiedene Layouts, die Elementgrößen der Benutzeroberfläche und die Auflösung von Grafiken, ist jedoch nicht darauf beschränkt.
Der Viewer unterstützt zwei Mechanismen zum Erstellen von responsivem CSS: CSS-Markierungen und Standard-CSS-Medienabfragen. Sie können diese Mechanismen unabhängig oder gemeinsam verwenden.
CSS-Markierungen
Um das Erstellen von responsiv entworfenen CSS zu unterstützen, unterstützt der Viewer CSS-Markierungen. Diese Markierungen sind spezielle CSS-Klassen. Diese Klassen werden dem Viewer-Container-Element der obersten Ebene dynamisch basierend auf der Laufzeit-Viewer-Größe und dem Eingabetyp zugewiesen, der auf dem aktuellen Gerät verwendet wird.
Die erste Gruppe von CSS-Markern umfasst .s7size_large
, .s7size_medium
und .s7size_small
Klassen. Sie werden basierend auf dem Laufzeitbereich des Viewer-Containers angewendet. Wenn der Viewer-Bereich größer oder gleich der Größe eines gemeinsamen Desktop-Monitors ist, dann .s7size_large
verwendet wird; wenn der Bereich in der Nähe eines gemeinsamen Tablet-Geräts liegt, dann .s7size_medium
zugewiesen wurde. In Bereichen, die Mobiltelefonbildschirmen ähneln, wird .s7size_small
festgelegt ist. Der Hauptzweck dieser CSS-Markierungen besteht darin, verschiedene Benutzeroberflächen-Layouts für verschiedene Bildschirme und Viewer-Größen zu erstellen.
Die zweite Gruppe von CSS-Markern enthält .s7mouseinput
und .s7touchinput
. Die Markierung .s7touchinput
festgelegt ist, wenn das aktuelle Gerät über Touch-Eingabefunktionen verfügt; andernfalls .s7mouseinput
verwendet. Diese Markierungen dienen hauptsächlich dazu, Benutzeroberflächen-Eingabeelemente mit unterschiedlichen Bildschirmgrößen für verschiedene Eingabetypen zu erstellen, da Touch-Eingaben normalerweise größere Elemente erfordern. Falls das Gerät sowohl über eine Maus- als auch eine Touch-Funktion verfügt, .s7touchinput
festgelegt ist und der Viewer eine Touch-optimierte Benutzeroberfläche rendert.
Im folgenden Beispiel-CSS wird die Größe der Zoom-Schaltfläche auf 28 x 28 Pixel bei Systemen mit Mauseingabe und auf Touch-Geräten auf 56 x 56 Pixel eingestellt. Darüber hinaus wird die Schaltfläche vollständig ausgeblendet, wenn die Viewer-Größe zu klein wird:
.s7zoomviewer.s7mouseinput .s7zoominbutton {
width:28px;
height:28px;
}
.s7zoomviewer.s7touchinput .s7zoominbutton {
width:56px;
height:56px;
}
.s7zoomviewer.s7size_small .s7zoominbutton {
visibility:hidden;
}
Um Geräte mit unterschiedlicher Pixeldichte als Ziel festzulegen, müssen Sie CSS-Medienabfragen verwenden. Der folgende Medienabfrageblock würde CSS-spezifische Daten für Bildschirme mit hoher Dichte enthalten:
@media screen and (-webkit-min-device-pixel-ratio: 1.5)
{
}
Die Verwendung von CSS-Markierungen ist die flexibelste Methode zum Erstellen von responsiv gestaltetem CSS, da Sie damit nicht nur die Bildschirmgröße des Geräts, sondern auch die tatsächliche Viewer-Größe bestimmen können, was für responsive Designlayouts nützlich ist.
Sie können die standardmäßige Viewer-CSS-Datei als Beispiel für einen CSS-Marker-Ansatz verwenden.
CSS-Medienabfragen
Sie können die Geräteerkennung auch mit reinen CSS-Medienabfragen durchführen. Alles, was in einem bestimmten Medienabfrageblock eingeschlossen ist, wird nur angewendet, wenn er auf einem entsprechenden Gerät ausgeführt wird.
Wenn Sie auf Mobile Viewer angewendet werden, verwenden Sie vier CSS-Medienabfragen, die in Ihrem CSS definiert sind, in der unten aufgeführten Reihenfolge:
Enthält nur Regeln, die für alle Touch-Geräte spezifisch sind.
@media only screen and (max-device-width:13.5in) and (max-device-
height:13.5in) and (max-device-width:799px),
only screen and (max-device-width:13.5in) and (max-device-height:13.5in)
and (max-device-height:799px)
{
}
Enthält nur Regeln für Tablets mit hochauflösenden Bildschirmen.
@media only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-width:799px) and (-webkit-min-device-pixel-ratio:1.5),
only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-height:799px) and (-webkit-min-device-pixel-ratio:1.5)
{
}
Enthält nur für alle Mobiltelefone spezifische Regeln.
@media only screen and (max-device-width:9in) and (max-device-height:9in)
{
}
Enthält nur Regeln für Mobiltelefone mit hochauflösenden Bildschirmen.
@media only screen and (max-device-width:9in) and (max-device-height:9in) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (device-width:720px) and (device-height:1280px) and (-webkit-device-pixel-ratio: 2),
only screen and (device-width:1280px) and (device-height:720px) and (-webkit-device-pixel-ratio: 2)
{
}
Mithilfe eines Medienabfrageansatzes sollten Sie CSS mit Geräteerkennung wie folgt organisieren:
Es ist nicht erforderlich, die gesamte Viewer-CSS in jeder Medienabfrage zu duplizieren. Innerhalb einer Medienabfrage werden nur Eigenschaften neu definiert, die für bestimmte Geräte spezifisch sind.
Viele Elemente der Viewer-Benutzeroberfläche werden mit Bitmap-Grafiken formatiert und weisen mehr als einen bestimmten visuellen Status auf. Ein gutes Beispiel ist eine Schaltfläche mit normalerweise mindestens drei verschiedenen Status: "up", "over"und "down". Jeder Status erfordert eine eigene Bitmap-Grafik, die zugewiesen wird.
Bei einem klassischen Stil würde CSS für jeden Status des Benutzeroberflächenelements einen separaten Verweis auf die einzelne Bilddatei auf dem Server haben. Im Folgenden finden Sie ein Beispiel-CSS für die Formatierung der Zoom-in-Schaltfläche:
.s7zoomviewer.s7mouseinput .s7zoominbutton[state='up'] {
background-image:url(images/v2/ZoomInButton_dark_up.png);
}
.s7zoomviewer.s7mouseinput .s7zoominbutton[state='over'] {
background-image:url(images/v2/ZoomInButton_dark_over.png);
}
.s7zoomviewer.s7mouseinput .s7zoominbutton[state='down'] {
background-image:url(images/v2/ZoomInButton_dark_down.png);
}
.s7zoomviewer.s7mouseinput .s7zoominbutton[state='disabled'] {
background-image:url(images/v2/ZoomInButton_dark_disabled.png);
}
Der Nachteil dieses Ansatzes besteht darin, dass der Endbenutzer flackernde oder verzögerte Antworten auf die Benutzeroberfläche erfährt, wenn das Element zum ersten Mal mit interagiert wird. Diese Aktion tritt auf, da die Bildgrafik für den neuen Elementstatus noch nicht heruntergeladen wurde. Dieser Ansatz kann sich aufgrund der gestiegenen Anzahl an HTTP-Aufrufen an den Server auch geringfügig negativ auf die Leistung auswirken.
CSS-Sprites ist ein anderer Ansatz, bei dem Bildgrafiken für alle Elementzustände in einer PNG-Datei namens "Sprite"kombiniert werden. Ein solches "Sprite"hat alle visuellen Status für das jeweilige Element, das nacheinander positioniert wird. Beim Formatieren eines Benutzeroberflächenelements mit Sprites wird für alle verschiedenen Status in CSS auf dasselbe Sprite-Bild verwiesen. Außerdem wird die background-position
-Eigenschaft wird für jeden Status verwendet, um anzugeben, welcher Teil des "Sprite"-Bildes verwendet wird. Sie können ein "Sprite"-Bild auf jede geeignete Weise strukturieren. Normalerweise wird sie von Viewern vertikal gestapelt. Nachfolgend finden Sie ein "sprite"-basiertes Beispiel für die Formatierung der gleichen Zoom-in-Schaltfläche von oben:
.s7zoomviewer .s7zoominbutton[state] {
background-image: url(images/v2/ZoomInButton_dark_sprite.png);
}
.s7zoomviewer.s7mouseinput .s7zoominbutton[state='up'] {
background-position: -84px -560px;
}
.s7zoomviewer.s7mouseinput .s7zoominbutton[state='over'] {
background-position: -56px -560px;
}
.s7zoomviewer.s7mouseinput .s7zoominbutton[state='down'] {
background-position: -28px -560px;
}
.s7zoomviewer.s7mouseinput .s7zoominbutton[state='disabled'] {
background-position: -0px -560px;
}
!IMPORTANT
-Regel wird nicht unterstützt, um Viewer-Elemente zu formatieren. Insbesondere !IMPORTANT
-Regel sollte nicht verwendet werden, um Standard- oder Laufzeitstile zu überschreiben, die vom Viewer- oder Viewer-SDK bereitgestellt werden. Der Grund dafür ist, dass dies das Verhalten von richtigen Komponenten beeinflussen kann. Stattdessen sollten Sie CSS-Selektoren mit der richtigen Spezifität verwenden, um CSS-Eigenschaften festzulegen, die in diesem Referenzhandbuch dokumentiert sind.background-image
-Eigenschaft.width
und height
-Eigenschaften eines Benutzeroberflächenelements definieren die logische Größe. Die Größe der Bitmap, die an background-image
hat keine Auswirkungen auf die logische Größe.-webkit-background-size:contain
-Eigenschaft, um den Hintergrund auf die Elementgröße der logischen Benutzeroberfläche herunterzuskalieren.display:none
zu seiner CSS-Klasse hinzu.rgba(R,G,B,A)
. Andernfalls können Sie das Format #RRGGBB
.Im Folgenden finden Sie die Referenzdokumentation zu Elementen der Benutzeroberfläche, die für den Video-Viewer gilt: