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:
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.