qpPageFlip (JS) - PageFlip mit JavaScript und jQuery von Quaese (Markus Höllein)

Seite 1

Vorwort

Hier folgen die Inhalte aus obigen PageFlip-Element nochmals, so dass sie am Stück und ohne JavaScript gelesen und studiert werden können.

Seite 2

Allgemeines

qpPageFlip ist die Umsetzung einer Buchstruktur mit Blätterfunktion auf Basis von JavaScript und der JS-Bibliothek jQuery.

PageFlip-Zone Zum Blättern stehen Klickbereiche an den äußeren Rändern der Seiten zur Verfügung, die erscheinen, wenn sie mit dem Mauszeiger überstrichen werden. Zudem können Seiten gezielt über die darüber befindliche Navigation erreicht werden.

Seite 3

Usage

qpPageFlip verwendet das jQuery-Framework. Aus diesem Grund muss neben dem PageFlip-Script die jQuery-Bibliothek eingebunden werden.

Sollen zusätzliche Animationsmöglichkeiten zur Verfügung stehen, muss ausserdem das easing-Script eingebunden werden.

<script src="js/jquery-1.5.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.qp_pageflip.js" type="text/javascript"></script>

Initialiert wird das Objekt indem es im Kontext eines Elements aufgerufen wird, in das es eingefügt werden soll.

<script type="text/javascript">
  $('selector').qpPageFlip(options);
</script>

Seite 4

Werden durch den Selektor mehr als ein Element gefiltert, wird lediglich das erste mit der Funktionalität versehen.

Über den Parameter options kann das Objekt konfiguriert werden. Es können Eigenschaften wie Breite und Höhe angepasst, Button-Styles verändert oder Animationsvarianten eingestellt werden. Weiterhin wird darüber ein Array übergeben, das die Inhaltsseiten enthält, die angezeigt werden sollen.

Welche Optionen im Einzelnen verfügbar sind, kann aber der nächsten Seite unter dem Kapitel "Konfiguration" nachgelesen werden.

Seite 5

Konfiguration

Hier ist eine Liste der Konfigurations-Optionen.

w: (integer) Breite des gesamten Anzeigebereichs
(default: 600)
h: (integer) Höhe des Anzeigebereichs
(default: 400)
zIndex: (integer) Schichtposition der Seiten mit dem aktuell angezeigten Inhalt; entspricht der CSS-Eigenschaft 'z-index'
(default: 1000)
bgColor: (string) Hintergrundfarbe der Seiten - wird als String mit gültigem CSS-Farbwert angegeben (z.B. '#fff' oder 'rgb(255,255,255)')
(default: '#fff')

Seite 6

borderColor: (string) Farbe Seitenrahmen - wird als String mit gültigem CSS-Farbwert angegeben (siehe zIndex)
(default: '#aaa')
borderWidth: (string) Stärke der Seitenrahmen - wird als String mit gültigem CSS-Wert angegeben (z.B. '1px')
(default: '1px'))
easing: (string) Art der Animationsbewegung (linear, swing und weitere, falls jquery.easing eingebunden)
(default: swing)
style: (string) Aussehen und Position der Vorwärt-/Rückwärtsbuttons (mögliche Varianten: style_01, style_02, style_03)
(default: style_02)

Seite 7

img_path

(string) Pfad zu den Bildern (relativ vom einbindenden Dokument)
(default: 'bilder/')

duration

(integer) Dauer der Umblätter-Animation (in Millisekunden)
(default: 800)

pages

(array) Array mit den Buchseiten als HTML-Fragmente

Jede Komponente des Arrays entspricht einer Seite. Die Inhalte können mit HTML ausgezeichnet werden.

(default: [])

Seite 8

Beispiel: pages

Das Seiten-Array pages könnte für ein 4-seitiges Buch wie folgt aufgebaut sein:

pages: ['<div class="pageHolder><h1>Header 1</h1><p>Inhalt 1</p></div>',
        '<div class="pageHolder><h1>Header 2</h1><p>Inhalt 2\
         mehrzeiliger Inhalt</p></div>\',
        '<div class="pageHolder><h1>Header 3</h1><p>Inhalt 3</p></div>',
        '<div class="pageHolder><h1>Header 4</h1><p>Inhalt 4</p></div>'
       ]

Mehrzeilige Inhalte können realisiert werden, indem die Strings am Ende einer Zeile mit einem Backslash (\) abgeschlossen werden. So wird der Interpreter darauf hingewiesen, dass die Zeichenkette in der nächsten Zeile fortgeführt wird.
(siehe obiger Quellcode, zweite Komponente)

Seite 9

API

Wird beim Initialisieren die zurückgegebene Referenz einer Variablen zugewiesen, stehen einige Methoden und Eigenschaften zur Verfügung.

oAPI = $('selector').qpPageFlip(options);

oAPI enthält die zurückgegebene Referenz und ermöglicht die Verwendung der API.

Zugriff auf die Methoden und Eigenschaften der API erfolgt über die Punktnotation.

oAPI.Methode();
oAPI.Eigenschaft;

Seite 10

Eigenschaften und Methoden

Hier ist eine Liste der Eigenschaften und Methoden, die die API bereit hält.

info

(Eigenschaft) - Objekt mit Informationen zum PageFlip-Objekt
• info.len: Anzahl Seiten
• info.w: Breite
• info.h: Höhe

prevPage()

(Methode) - Funktion zum Zurückblättern

nextPage()

(Methode) - Funktion zum Vorwärtsblättern

gotoPage(n)

(Methode) - Funktion zum Anzeigen einer Seite, die im Parameter n übergeben wurde.

Hierbei gilt es zu beachten, dass auf der linken Seite immer ungerade Seitennummern angezeigt werden.

Seite 11

Tipps und Tricks

PageFlip auf bestimmter Seite aufrufen

Nach dem Initialisieren die dritte Seite aufschlagen.

$('selector').qpPageFlip(options).gotoPage(3);

Seitennavigation

Es soll eine Seitennavigation vor dem PageFlip-Element mit der ID buch_id angezeigt werden.

$('<div id="qp_nav_id" style="padding: 9px 0; text-align: center; width: '+oAPI.info.w+'px;"></div>').insertBefore('#buch_id');
for(var i=0; i<oAPI.info.len; i+=2){
  $('<a href="#">Seite '+(i+1)+'/'+(i+2)+'</a><span>&nbsp;</span>').attr('rel', (i+1)).click(function(evt){
    evt.preventDefault();
    oAPI.gotoPage($(this).attr('rel'));
  }).appendTo($('#qp_nav_id'));
}

Seite 12

Download

Viel Spass, Quaese!