Pageflip5 documentation

Hinzufügen von Inhalt zum Buch

Wie bereits besprochen, gibt es 2 Möglichkeiten zum Einrichten des Buchinhalts: in div # pageflip oder in einer externen Datei. Lassen Sie uns auf den Inhalt konzentrieren, hier ist unser vorheriger Beispielbuch Inhalt:

Cover ist ein spezieller Seitentyp, er kann größer sein als die inneren Seiten und beim Blättern verhalten wie ein harter Deckel.

Seite definiert eine einzelne Seite im Buch.

Es gibt eine dritte Art: die Outer Seite. Sie können optional vor oder hinter dem Buch sein:

Wenn Sie ein Buch wollen, das immer geöffnet ist (kann das vordere Cover nicht schließen) wählen Sie die AlwaysOpened Config Option (AlwaysOpened: true) und starten Sie die Seitezahlen beim ersten sichtbaren Cover:

Und dies ist, wie diese Seitenlayouts aussehen:

Seite-Optionen

Zusätzlich zu den Konfigurations-Optionen, gibt es einige Möglichkeiten, der Seite bestimmte Verhaltensweisen geben zu können. Hier ist eine Liste der verfügbaren Seiten Optionen:

data-html-file
Lädt einen HTML-Inhalt auf die Seite, ersetzt Original Seiteninhalt wenn vorhanden.
data-background-file
Lädt ein Hintergrundbild auf die Seite, während HTML-Inhalten auf ihr anzeigen werden
data-disable-embossing
Deaktivieren Schatten / Glanz-Effekt in der Mitte des Buches
data-transparent-page
Seite ist transparent (Die Seite hinter ihr, wird auch erzeugt)
data-page-number
Setzen Sie die Seitenzahl der Seite.
data-page-name
Setzen Sie den Namen der Seite. Es wird anstelle der Seitenzahl angezeigt werden.
data-page-label
Legen Sie die Bezeichnung der Seite fest. Es kann benutzt werden, um auf diese Seite (API: gotoPageLabel ("pagelabel" [,skip]);) zu verweisen..
data-data
Speichert individuelle Seiten Daten.
data-thumbnail-image
Miniaturansicht der Seite

Und ein Beispiel, wie Sie Seiten-Optionen aussehen:

Seiteninhalt

Der wichtigste Teil, nach der Überprüfung aller Optionen ist es, wie Sie Inhalte hinzufügen. Nach dem Einrichten Ihres Buches, und dem Seitenlayout, können Sie einfach ihren Inhalt hinzufügen / ändern.

Inline Inhalt

Wie in den vorherigen Codebeispielen gesehen, wird der Inhalt der Seite über divs hinzugefügt. Wie der Behälter des Inhalts mit CSS formatiert werden kann, besprechen wir später.

data-html-file

Wenn Sie möchten, können Sie den Inhalt der Seite aus einer externen Datei geladen werden, in diesem Fall wird der inline definierte Inhalt mit dem geladenen Inhalt ersetzt.

data-background-file

Die dritte Möglichkeit, Inhalte hinzuzufügen, ist einfach ein Hintergrundbild für die Seite zu definieren. Das geladene Hintergrundbild wird dem Container div, das den definierten Inhalt umschließt, hinzugefügt.

Dies ist nur eine weitere Option, wenn Sie wollen, können Sie ein div als Seiteninhalt setzten und fügen Sie Ihre eigenen Hintergrund hinzu, mit mehr Styling-Optionen. Diese Option ist nützlich, wenn Sie ein Buch auf der Grundlage von Bilddateien erstellen Um nicht alle img-Tags definieren zu müssen, fügen Sie einfach die URL ein.

data-disable-embossing

Standardmäßig erhalten alle weichen Seiten eine Schatteneffekt in der Mitte des Buches. Mit dieser Option aktiviert, deaktivieren Sie dieses Effekts auf der Seite.

data-transparent-page

Wenn Transparenz zuvor in der Configuration-Optionen aktiviert wurde, können Sie diese Seite transparent machen, indem Sie diese Option benutzen. Die Seite dahinter wird auch erzeugt.

data-page-number

Sie können die Seitennummer einer Seite ändern, um die Start Seitenzahl festzulegen. Der Rest der Seiten wird basierend auf diesem Wert nummeriert.

data-page-name

Durch das Hinzufügen eines Namens zu einer Seite, wird dieser stattdessen der Seitenzahl angezeigt. Er kann auch referenziert werden mittels API-Aufruf: gotoPageName ("pageName" [, skip]); Groß-und Kleinschreibung! Sie können auch im Pager Eingabefeld den Namen eingeben, um zu dieser Seite zu gehen.

data-page-label

Sie können ein Label für diese Seite hinzuzufügen, um später darauf verweisen mit API-Aufruf: gotoPageLabel ("PageLabel" [, skip]); Auf diese Weise können sie, wenn die Reihenfolge der Seiten geändert wird (hinzugefügt / entfernt einer Seiten), immer noch sicher auf diese Seite zugreifen. Groß-und Kleinschreibung!

data-data

Mit dieser benutzerdefinierten Variablen können Sie jede Information mit der Seite verknüpfen, können Sie abrufen oder setzen Sie den Wert zur Laufzeit mit API-Aufruf: data ([value]);

data-thumbnail-image

Wenn in Configuration-Optionen aktiviert, können Sie Miniaturansichten für jede Seite hinzuzufügen. Es ist optional, wird nur für die Seite mit Miniaturbils korrekt dargestellt. Auf diese Weise können Thumbnails eine Alternative für einen Index sein.