In letzter Zeit habe ich eine Reihe von Websites gesehen, die diese JavaScript-basierte, paginierte Dokumentschnittstelle verwenden. Benutzern wird ein mehrseitiger Dokumentensatz angezeigt, der auf der ersten Seite beginnt, und er kann dynamisch zwischen Seiten wechseln. Dies kann eine viel bessere Lösung sein, als direkt auf ein PDF-Dokument zu verlinken. Oder dies ist sogar eine Alternative, wenn Sie einen PDF-Download-Link und die eingebetteten Dokumentbilder für einen einfachen Zugriff haben.
In diesem Tutorial möchte ich Ihnen zeigen, wie wir ein kleines Skript erstellen können, das eine beliebige Anzahl von Dokumenten verarbeitet. Der JS-Code ist etwas kompliziert, da wir uns für eine große Anzahl von Seiten anpassen müssen. Es ist jedoch nicht sehr schwierig, das Design genau so anzupassen, wie Sie es brauchen würden! Sehen Sie sich unten meine Beispiel-Demo an, um eine Vorstellung davon zu bekommen, was wir erstellen werden.
Live Demo - Quellcode herunterladen
Fertig machen
Zuerst müssen die Dateien index.html und styles.css im selben Verzeichnis erstellt werden. Ich habe auch eine aktuelle Kopie von jQuery heruntergeladen, um sie zusammen mit meinem anderen JS-Dokument zu speichern. jQuery ist die einzige Abhängigkeit von dem, was wir bauen müssen, und die minimierte Bibliothek nimmt nicht viel Platz in Anspruch.
Wie Sie sehen, enthält der Header nichts Außergewöhnliches. Der Körperinhalt ist auch einfach zu verstehen und ich habe versucht, die Benutzeroberfläche so einfach wie möglich zu halten. Es gibt ein einzelnes Div, das die ID verwendet #Documentcontainer das hält das erste Seitenbild. Dieses img-Tag wird automatisch aktualisiert, sobald der Benutzer auf einen der Navigationslinks klickt oder auf das Bild selbst klickt, um eine Seite vorwärts zu gehen.
Ich benutze nur das? und ← Entitäten zum Anzeigen von Pfeillinks. Sie können dieses Design jedoch beliebig aktualisieren. Der wirklich wichtige Teil sind die IDs, die an jeden Link angehängt sind. Diese entsprechen jQuery-Ereignishandlern, die ausgelöst werden, nachdem der Benutzer auf einen der Pfeile geklickt hat, um sich im Dokumentsatz vorwärts oder rückwärts zu bewegen.
Seite konfigurieren
Ein interessantes Attribut, das Sie im img-Tag finden, wird aufgerufen Daten-Seite. Wir verwenden dieses Attribut, um festzustellen, welche Seite gerade angezeigt wird, ohne den aktuellen Dateinamen erraten zu müssen. jQuery aktualisiert diesen Wert, wenn zwischen alternativen Seiten gewechselt wird.
Bei den CSS-Styles müssen wir uns nur um den inneren Körperinhalt kümmern. Alle typischen Resets und zentrierten Wrapper-Div-Stile finden Sie im Stylesheet. Das ist alles ziemlich üblich und ich hoffe, dass Frontend-Entwickler diese Ideen bereits kennen.
Der Dokumentencontainer ist auf beiden Seiten etwas aufgefüllt, damit das Bild auf der Seite zentriert bleibt. Auch das img-Tag selbst hat die Eigenschaft Cursor: Zeiger; für wann immer der Benutzer schwebt, um ein Klickereignis zu fördern. Es gibt keinen Ankerlink, der das img umgibt, da wir nirgendwo eine Verknüpfung herstellen möchten. Das Bild sollte jedoch anklickbar sein, und dieses Handcursor-Maussymbol ist die perfekte Benutzererfahrung.
Mit allen anderen Einstellungen auf der Seite können wir jetzt in die jQuery eintauchen. Ich habe versucht, das Skript mit Variablen, die Sie für Ihre eigenen Dokumente aktualisieren können, sehr formbar zu halten. Da es jedoch so viele verschiedene Methoden gibt, um dies zu erreichen, kann ich nicht garantieren, dass mein Code die absolut perfekte Lösung ist.
jQuery-Paging-Variablen
Jede einzelne Dokumentseite ist tatsächlich ein JPG-Bild, das mit Adobe Photoshop aus diesem PDF-Dokument exportiert wird. Dieser Vorgang sollte mit allen gängigen PDF-Dateien möglich sein, wodurch die Veröffentlichung im Web mit einem JS Document Viewer noch einfacher wird. Wir sollten einen Blick auf meine benutzerdefinierte Datei werfen docview.js und zerlegen Sie jeden der Codeblöcke.
Diese 4 Variablen können angepasst werden, wenn Sie einen anderen Satz von Dokumenten verwenden. Ist zuerst setDirectory Dies sollte zu einem lokalen oder absoluten URL-Wert führen, wobei der Schrägstrich auf das Verzeichnis der Bilder verweist. Datentypen wäre die Erweiterung Ihrer Dokumentbilder. lastDocNum ist die Gesamtanzahl der Seiten in Ihrem Satz. Auf diese Weise weiß jQuery, wann das Ende Ihres Dokuments erreicht ist.
Die letzte Variable fileDigits ist wichtig zu erklären. In diesem Skript wird davon ausgegangen, dass Sie Dokumentensätze in der Reihenfolge 01.jpg, 001.jpg oder 0001.jpg beschriften. Verwenden Sie jedoch viele Nullen, um den Platz der Seiten zu füllen. Wenn Sie ein Dokument mit 2.500 Seiten haben, sollte die Reihenfolge numerisch sequenziell sein und die Variable fileDigits auf 4 gesetzt werden, da in jedem Bildnamen 4 numerische Ziffern enthalten sind.
Umgang mit dynamischen Bildern
Als ich durch Stack Overflow grub, fand ich diese erstaunliche Lösung zum Anhängen von Nullen an den Dateinamen.Wir müssen den Dateinamen in eine Ganzzahl konvertieren, um den Wert um 1 zu erhöhen. Dann konvertieren wir ihn zurück in einen String, fügen die richtige Anzahl von Nullen hinzu und geben ihm die Endung der Dateiendung.
Sie müssen wahrscheinlich nicht genau wissen, wie das funktioniert, aber es ist eine großartige Funktion. Der letzte große Codeblock verwaltet die jQuery-Ereignishandler, um auf das Bild oder einen der beiden Navigationslinks zu klicken. Wir richten das Hauptimg in eine JavaScript-Variable mit dem Namen docimage und dann die Attribute von dort aus manipulieren.
Die neu erstellten Variablen enthalten die nächste numerische Seitennummer sowie die neue Seitennummer und die neue Bildquelle. Wir prüfen zunächst, ob die ID der endgültigen Anzahl der Dokumente entspricht, und wenn dies der Fall ist, stoppen wir die Ausführung des Skripts. Dies bedeutet, dass wir die letzte Seite erreicht haben und der Benutzer auf die letzte Seite klickt, um fortzufahren, aber wir haben nichts anderes anzuzeigen! Andernfalls werden die Attribute img aktualisiert und das neue Bild wird sofort angezeigt.
Der letzte Event-Handler verwendet jQuery-Selektoren für beide Pfeillinks. Anhand des ID-Namens prüfen wir, ob die aktuelle Seiten-ID um eins subtrahiert oder hinzugefügt werden soll. Wir müssen auch eine ähnliche Prüfung durchführen, um zu sehen, ob sich der Benutzer auf der ersten Seite befindet und nicht mehr zurückkehren kann oder ob er sich auf der letzten Seite befindet und nicht mehr weitergehen kann. Ansonsten sind die Codes fast identisch und Sie sollten in der Lage sein, alles bis zum Ende durchzuziehen.
Live Demo - Quellcode herunterladen
Abschließende Gedanken
Ich hoffe, dieses Tutorial kann für einige Webentwickler nützlich sein. Diese Idee ist noch relativ neu und es besteht keine große Nachfrage nach dieser Funktionalität auf allen Websites. Mir gefällt jedoch die Idee, neue Bild-URLs dynamisch zu ziehen, damit die Seite nicht aktualisiert wird.
Dadurch erhält der Benutzer ein saubereres Erlebnis und die gesamte Website lädt weniger HTTP-Anforderungen pro Seite. Wenn Sie ähnliche Ideen oder Fragen zum Tutorial haben, teilen Sie uns dies bitte im Diskussionsbereich mit.