 12 - Navigation für durchnumerierte HTML-Seiten (max. 100 Seiten)
Navigationsschema für eine Reihe von HTML-Seiten mit numerisch fortlaufenden Dateinamenbezeichnungen. Geeignet für einen Text- oder Bildbericht, durch den sie duch vor- und zurückblättern navigieren möchten.
|
|
URL der nächsten / vorherigen Seite automatisch ermitteln
 12.11.2008 , Script erweitert, Unterdrückung vor / zurück auf der letzetn / ersten Seite
Das Script ermittetlt den Dateinamen für die vorhergehende und folgende Seite in einer regelmässig numerierten Serie von HTML-Dateien, die im gleichen Verzeichnis liegen. Sehr gut geeignet für Bildergalerien und Abhandlungen auf fortlaufenden Seiten. Das Prinzip ist ihnen im Web sicher schon einmal begegnet. Die Navigation bietet Verweise für
nächste Seite / vorherige Seite, vor / zurück, ... |
 
 
|
Diese Funktion könnte man in meinem Download-Beispiel  HP-Vorlage H05 verwenden.
Die Verweise für "voherige" und "nächste" werden mit einer JavaScript-Funktion belegt. Unabhängig davon, ob sie Text- oder Grafik-Links verwenden, wird im Attribut für die Referenz der Aufruf für die Zurück- oder Vorblättern-Funktion eingetragen.
<a href="javascript:previousFile()"> Button </a>
<a href="javascript:nextFile()"> Button </a>
Voraussetzungen
 der erste Teil des Dateinamens ist gleichlautend
die letzten beiden Zeichen des Dateinamens sind Zahlen von 00 - 99
die Seiten befinden sich im gleichen Ordner
Beispiele: name34.htm name35.htm name36.htm
Konditionen für die Dateinamen
Den Dateinamen für die HTML-Dokumente notieren sie beim Abspeichern, indem der erste aus einem String (Text) und letzte Teil aus zwei (fortlaufenden) Zahlen der Dateinummer kombiniert wird:
- seite01.htm
- seite02.htm
- seite03.htm
- ...
- seite99.htm
|
- irgendwas22.htm
- irgendwas23.htm
- irgendwas24.htm
- ...
- irgendwas99.htm
|
Dabei ist völlig gleichgültig was sie als ersten Teil (String) einsetzen oder welchen Suffix sie wählen (htm od. html). Das JavaScript 'kümmert sich eh nur um die beiden letzten Stellen vor dem Punkt. Der Punkt ist bekannterweise der Trenner zwischen Dateiname und dem Suffix (htm oder html).
dateiname34.htm filename34.html
Vorteil und Vorgehensweise
Die Navigation (z.B. den Block der Buttons) kann als Modul in jede Seite einkopiert werden. Dateinamen für die Links müssen nicht von Hand eingetragen werden. Im Head-Bereich der Seiten verweisen sie auf die externe JavaScript-Datei (siehe Beispiel / Download).
Bei der Herstellung der Seiten können sie wirtschaftlich vorgehen, wenn sie eine Musterdatei mit Script und Naviagtion herstellen. Kopien dieser Musterdatei speichern sie im gleichen Verzeichnis unter Dateinamen ab, deren führender Teil identisch ist und sich durch fortlaufende Nummern am Bnde unterscheiden. Beispiele:
show1-34.htm show1-35.htm show1-36.htm
seite012.htm seite013.htm seite014.htm
bericht00.htm bericht01.htm bericht02.htm
Als Navigation eignen sich solche Buttons (siehe Mini-Image-Box)
    
Kopieren sie also bei der Erstellung ihrer Seiten die Inhalte in ihre Musterdatei, die sie unter jeweils anderen Dateinamen abspeichern. Wenn sie dabei die Seiten z.B. mit 'seite01.htm', seite02.htm', seite03.htm, ... usw. bezeichnen, schaffen sie die Voraussetzung zur Verwendung dieses Script-Beispiels.
Eine der Funktionen legt den Link zur vorherigen Seite fest, die andere den zur nächsten.
previousFile() nextFile()
Der Aufruf der Funktionen stellt den Link zur vorherigen bzw. nächsten Seite her. Statt eines Dateinamens im Attribut 'href', wird der Funktionsaufruf eingetragen: javascript:previousFile() oder javascript:nextFile() .
<a href="javascript:previousFile()"> Verweisbereich </a>
In den Musterdateien meines Downloads können sie das in den Beispielseiten analysieren.
Erweiterung
12.11.2008 , Script erweitert, Unterdrückung vor / zurück auf der letzetn / ersten Seite
Auf der ersten Seite macht ein Zurück-Link keinen Sinn, auf der letzten ein Weiter-Link ebenso. Auf der ersten und letzen Seite sollten unsinnige Links deaktiviert sein oder das Script sollte ein Weiterblättern verhindern.
In meinem Update vom 12.11.2008 habe ich eine Prüfung vorgesehen, die das verhindern soll. Dazu müssen sie allerdings im Script die beiden Dateinamen der ersten und letzten HTML-Datei der Serie eintragen. Im Script wird beim Auslösen der Blättern-Funktion an Hand dieser Vorgaben überprüft, ob die erste bzw. die letzte Datei der Serie bereits erreicht ist.
// Namen der beiden HTML-Seiten (erste/ letzte) eintragen
var ErsteSeite = "seite000.htm";
var LetzteSeite = "seite028.htm";
Ein Blättern wird dann verhindert und eine Alert-Meldung angezeigt. Um diese Anzeige zu unterdrücken, kann die Codezeile für Alert-Meldungen gelöscht werden.
alert("Sie befinden sich auf der ersten Seite");
...
alert("Sie befinden sich auf der letzten Seite");
Alternativ können sie die Programmzeile in einen Kommentar umfunktionieren, in dem sie zwei Slashes voranstellen. So wird die Anweisung nicht mehr ausgeführt.
//alert("Sie befinden sich auf der ersten Seite");
...
//alert("Sie befinden sich auf der letzten Seite");
Funktion des Scripts
(Nur für den, den es interssiert)
Das Script ermittelt den Dateinamen der aktuell angezeigten HTML-Datei und setzt aus diesen Informationen die URL der nächsten und vorherigen Datei zusammen, die sich ja nur durch die Endnummer unterscheiden. Für die URL der nächsten Datei muss eine 1 addiert, für die URL der vorherigen Datei eine 1 subtrahiert werden.
Damit sie sich vorstellen können wie das in der Paxis aussieht, sehen sie zur Demo hier einmal die Werte für genau diese Seite. Die Ergebnisse der einzelnen Programmschritte kann man so leichter erkennen:
Das Script liest die URL dieses Dokuments:
URL der Datei:
Das Script ermittelt die Position des ersten Zeichen des Dateinamens ():
Position Start des Dateinamens:
Das Script ermittelt die Position des Punkts:
Position des Punkts:
Das Script ermittelt die Position des letzten Zeichens:
Position letztes Zeichens:
Das Script ermittelt den Suffix (Dateiendung) der Datei:
FileSuffix:
Das Script ermittelt die beiden Ziffern am Ende des Dateinamens:
Ziffern im Dateinamen:
Aus diesen Infos ermittelt das Script den gesamten Dateinamen:
Name der Datei:
Daraus werden die Namen der vorherigen und nächsten Datei ermittelt, die beim Anklicken der Buttons oder Links aufgerufen werden sollen.
Der Name der vorherigen Datei wird ermittelt:
Der Name der vorherigenen Datei wird in eine Variable geschrieben:
Der Aufruf der vorherigenen Datei kann nun ausgelöst werden mit:
location.href = previousFileName
Der Name der nächsten Datei wird ermittelt:
Der Name der nächsten Datei wird in eine Variable geschrieben:
Der Aufruf der nächsten Datei kann nun ausgelöst werden mit:
location.href = nextFileName
|
Home • CSS • Menüs • Menü 12
DOWNLOAD
BEISPIEL