pagescriptor.js

pagescriptor.js ist eine Javascript-Bibliothek für dynamische Effekte, wie Ein-Ausblenden oder Austauschen/Verschieben von Inhalten.
pagescriptor.js benötigt "prototype.js" V1.63 and "scriptaculous" V1.8.3 und höher

Download der Demosite "pagescriptor_v172.zip"

Alle Einstellungen von pagescriptor.js werden durch CSS-Klassen gesteuert

Zurzeit unterstützt pagescriptor.js 6 Verhalten:

• "Toggle": Inhalte ein-/ausblenden
• "Multi": mehrere Inhalte in der selben Box (Viewport) ein-/ausblenden
• "Slider": Inhalte als Diashow
• "Async": Inhalte mit "Ajax" nachladen
• "Persist": Ändert Klassennamen von HTML-Elementen auf Click
• "Cascade": mehrere Klassen dynamisch auf einer Reihe Elemente verteilen
• "Shoppingcart": Implementiert clientseitig persistente (Cookie) Warenkörbe

Toggle-Effekt: Inhalte ein-/ausblenden

Alle Effekte von Toggle werden durch CSS-Klassen gesteuert. Alle Toggle Klassennamen beginnen mit "ps-".

Ein Container-Box (blau) mit der Klasse "ps-toggle" (blau) enthält zwei weitere Boxen. Die "Header"-Box (rot) blendet bei Mausclick die "Content"-Box (grün) ein/aus.
Die Container-Box wird nach dem Laden der Seite auf "position:relative;", die "Content"-Box auf "display:none;" gesetzt.

Das Boxen-Modell:

Die Struktur:

• div.ps-toggle (Container, blau)
  • div(Header; rot)
  • div(Content; grün)

Das folgende Beispiel benutzt folgendes HTML-Gerüst:

<div class="ps-toggle">
		<div>
			Header
		</div>
		<div>
			<a href="#" class="ps-close">Content ausblenden</a> 
		</div>      
	</div>
	

Mit einem Hyperlinks der Klasse "ps-close" in der Content-Box kann diese wieder geschlossen werden.

Wenn die Box div.ps-toggle erfasst wurde, wird die Klasse div.ps-toggle.ps_active hinzugefügt

Die folgenden Klassen in der Containerbox bestimmen den Effekt beim Ein-/Ausblenden der Contentbox. Ist keine der folgenden Klassen angegeben, wird die Box nur eingeblendet.

• 'ps_once':

  Die Contentbox öffnet sich nur einmal (!) und schließt sich nicht bei weiteren Clicks.

  Nur mit einem 'ps-close'-Link kann der Content wieder ausgeblendet: Content ausblenden!

• 'ps_down':

  Die Contentbox öffnet sich nach unten

• 'ps_zoom':

  Die Contentbox vergrößert sich in alle Richtungen

• 'ps_center':

  Die Contentbox wird im Browserfenster zentriert. Diese Klasse kann auch mit den Vorstehenden kombiniert werden. Die Contentbox wird auf position:absolute; gesetzt.

• 'ps_blend':

  Die Contentbox wird eingeblendet.Vorrausgesetzt: style="opacity:0;"

Hier ein Beispiel für die Effekt-Klasse ps_blend und ps_center:

<div class="ps-toggle ps_center ps_blend">
    <div>Die Spitze der Bastei (bitte anklicken!)</div>
    <div style="position:absolute;z-index:1000;border: 4px solid #ccc;opacity:0;">
        <a href="#" class="ps-close"><img src="images/p20100917_183554_003.jpg" alt="" /></a>
    </div><!-- content -->		
</div><!-- ps-toggle -->

Gruppieren = Accordion-Effekt

Es ist möglich mehrere Toggle-Boxen so zu gruppieren, dass immer nur ein Content der Gruppe sichtbar ist, d.h. wird eine Box der Gruppe geöffnet, so wird eine noch offene Box der selben Gruppe geschlossen. "ps-toggle"-Boxen werden gruppiert, wenn sie die gleiche Gruppen-Klasse haben.
Eine Gruppen-Klasse beginnt mit "ps_group-" ergänzt um den Gruppennamen. Den Gruppennamen können Sie selbst wählen, etwa: "ps_group-erste" oder "ps_group-galerie2". Alle Toggle-Boxen mit selbem Gruppennamen, egal wo auf der Seite sie plaziert sind, werden zu zu einer Gruppe zusammengefaßt.

Das nachstehende Beispiel benutzt den Gruppennamen "ps_group-erste" und erzeugt den "Accordion"-Effekt:

Multi-Effekt: mehrere Inhalte in der selben Box (Viewport) ein-/ausblenden

Alle Effekte von Multi werden durch CSS-Klassen gesteuert
Ein DIV-Box mit ID-Namen und der Klasse "ps-multi" enthält eine oder mehrere Content-Boxen mit ID-Namen.

• div.ps-multi (rot)
  • div#slider1 (mit Content1; schwarz)
  • div#slider2 (mit Content2; schwarz)
  • div#slider3 (mit Content3; schwarz)

Wenn die Box div.ps-multi erfasst wurde, wird die Klasse div.ps-multi.ps_active hinzugefügt

Nach dem Laden der Seite wird die Content-Box mit der Klasse "ps_default" oder keine angezeigt.
Mit Hyperlinks der Klasse "ps-multi", mit dem ID-Namen einer Content-Box im HREF-Attribut und dem ID-Namen der Viewportbox im REL-Attribut, die sich an beliebiger Stelle innerhalb des BODY-Tags befinden dürfen, wird die entsprechende Content-Box im Viewport eingeblendet:

<a class="ps-multi" href="#content1" rel="viewport">Beschreibung</a>

<div id="viewport" class="ps-multi">
	<div id="content1">
		content1 
		<a class="ps-multi" href="#content2" rel="viewport">Weiter zu Content2 ></a>
	</div>
	<div id="content2" class="ps_default">
		Content2 (default)
	</div>
	<div id="content3">
		Content3
	</div>
</div><!-- ps-multi -->

Slider-Effekt: Inhalte ein-/ausblenden

Alle Effekte von pagescriptor werden durch CSS-Klassen gesteuert

Ein DIV-Box mit der Klasse "ps-slider" (blau) enthält mehrere Boxen mit der folgenden Struktur für einen minimalen Slider:

• div.ps-slider (rot)
  • div (Viewport-box, blau)
    • div (Wrapper-box, grün)
      • div#slider1 (mit Content1; schwarz)
      • div#slider2 (mit Content2; schwarz)
      • div#slider3 (mit Content3; schwarz)

Der Quellcode und die Demo für den minimalen Slider:

<div class="ps-slider" style="width:400px;"><!-- ps-slider -->
	<div style="width:400px;height:100px;"><!-- viewport -->
		<div><!-- wrapper -->
			<div id="slide01" title="Erster Inhalt"  style="background-color: gray;">
				Content1						
			</div><!-- content1 -->
			<div id="slide02" title="Zweiter Inhalt" style="background-color: blue;">
				Content2						
			</div><!-- content2 -->
			<div id="slide03" title="Dritter Inhalt" style="background-color: green;">
				Content3						
			</div><!-- content3 -->
		</div><!-- wrapper -->
	</div><!-- viewport -->
	<div class="ps-navi"></div>
</div><!-- ps-slider -->

In einer Box <div class="ps-navi"></div> wird eine Navigation automatisch erzeugt. Dafür müssen die Slider eindeutige ID-Namen UND für die Benennnung der automatisch erzeugten Menuepunkte aussagefähiges TITLE-Attribut haben.

Die von pagescriptor.js erzeugte Navigation sieht im Quellcode so aus:

<div class="ps-navi">
	<ul>
		<li><a href="#slide01" class="ps-goto ps_active">Erster Inhalt</a></li>
		<li><a href="#slide02" class="ps-goto">Zweiter Inhalt</a></li>
		<li><a href="#slide03" class="ps-goto">Dritter Inhalt</a></li>
	</ul>
</div><!-- ende auto navi -->

Der Link zum aktuell angezeigten Inhalt wird durch die Klasse ps_active markiert und kann durch entsprechende CSS-Anweisungen hervorgeboben werden:

div.ps-slider a.ps-goto { font-weight: normal; }
div.ps-slider a.ps-goto.ps_active { font-weight: bold; }

---

Ein Slider lässt sich auch genauer steuern:
Wenn der Viewport durch die Klasse ps-viewport gekennzeichnet wird, lassen sich im div.ps-slider weitere Boxen vor dem Viewport unterbringen.
Die Struktur des erweiterten Sliders:

• div.ps-slider (rot)
  • div.ps-viewport (Viewport-box, blau)
    • div (Wrapper-box, grün)
      • div#slider1 (mit Content1; schwarz)
      • div#slider2 (mit Content2; blau)
      • div#slider3 (mit Content3; grün)

Nach dem Laden der Seite wird die erste Contentbox angezeigt oder die Contentbox mit der Klasse "ps_default".
Hier nun der Quellcode und die Demo:

<div class="ps-slider">
    <div><!-- eigene Navigation -->
        <a href="#slide11" class="ps-goto">Content 1</a> || 
        <a href="#slide12" class="ps-goto">Content 2</a> || 
        <a href="#slide13" class="ps-goto">Content 3</a>
    </div>
    <div class="ps-viewport" style="width:400px;height:100px;">
        <div>
            <div id="slide11">content1</div>
            <div id="slide12" class="ps_default">content2</div>
            <div id="slide13">content2</div>
        </div>
    </div>
</div>

Die Steuerung kann durch (zusätzliche) Hyperlinks mit den Klassen ps-previous und ps-next gesteuert werden. Solange die Links weiterführen erhalten sie zusätzlich die Klasse ps_active. Damit können nichtfunktionale Links beispielsweise ausgeblendet werden:

a.ps-previous, a.ps-next{ display:none;}
a.ps-previous.ps_active, a.ps-next.ps_active{ display:inline;}

Hier nun der Quellcode und die Demo:

<div class="ps-slider">
    <div><!-- eigene Navigation -->
        <a href="#" class="ps-previous">Zurück</a> || 
        <a href="#" class="ps-next">Vor</a>  
    </div>
    <div class="ps-viewport" style="width:400px;height:100px;">
        <div>
            <div id="slider21">content1</div>
            <div id="slider22">content2</div>
            <div id="slider23">content2</div>
        </div>
    </div>
</div>

Das Verhalten der Vor-/Zurück-Button kann mit der zusätzlichen Klasse ps_around für den Viewport erweitert werden. Dann wird die Navigation kreisförmig fortgesetzt, d.h. dem letzten Slider folgt der erste und dem ersten Slider folgt der letzte:

Die zusätzliche Klasse div.ps-slider.ps_auto-20-2 erzeugt einen automatischen Wechsel der Contentboxen ("Diashow"). Die erste Zahl ("20") hinter der dem Klassennamen "ps_auto-" bezeichnet die Ruhezeit nach der letzten Aktion des User, die zweite Zahl ("4") bezeichnet das Interval für den Contentwechsel. Beide Werte müssen größer als "0" sein!
Das kleinste Zeitinterval beträgt zur Zeit 0,5 sec oder 500 ms.
div.ps-slider.ps_auto-20-2 bedeutet, dass der Slider automatisch nach 10 sec ohne Bedienung die Contents im 2 sec Takt austauscht:

async: Inhalte mit "Ajax" nachladen

Async sucht nach Hyperlinks mit dem Attribut "data-async" und setzt zusätzlich die Klasse "as_active". Click auf den Link wird der Inhalt der URL im Attribut "data-async" eingelesen und in den Container mit dem ID-Namen, der im Attribut "href" definiert ist, eingesetzt.

In das geladene HTML eingebettetes Javascript wird nach dem Laden ausgeführt.

<a class="as_once" href="index.html" data-async="async/text0.html#asyncbox">Content1</a>

Folgende Optionen können durch Klassen gesteuert werden:

• as_once, führt den Async nur einmal aus
• Einfügen innerhalb der Box:
  • keine der folgenden Klassen: Ersetzt den Inhalt der Box (#asyncbox)
  • as_top: In die Box (#asyncbox) am Anfang einfügen
  • as_bottom: In die Box (#asyncbox) vor dem Ende einfügen
• Einfügen ausserhalb der Box (#asyncbox):
  • as_before: Vor der Box (#asyncbox) einfügen
  • as_after: Hinter der Box (#asyncbox) einfügen

Warenkorb: Einen clientseitig persistenten Warenkorb mitführen

Eine Warenkorb ist ein HTML-Block-Element, das mit einem ID-Attribut und der Klasse "sc-cart" gekennzeichnet ist. Eine Webseite kann eine oder mehrere unterschiedliche Warenkorb-Boxen.

<div id="shopcart" class="sc-cart">
</div>

Wenn die Box von pagescriptor.js erfasst wurde, wird die Klasse sc_active hinzugefügt:

<div id="shopcart" class="sc-cart sc_active">
</div>

Artikel-Eigenschaften

pagescriptor.js erwartet für jeden Artikel mindestens diese beiden Eigenschaften:
"pid" = Eindeutige Kennung des Artikel
"preis" = Der Preis für den einzelnen Artikel.

Diese vordefinierten Eigenschaften können durch weitere Artikel-Eigenschaften ergänzt weden, die selbstgewählte Namen tragen und unter diesen im Template als Platzhalter verwendet werden: z.B. 'name' und als Platzhalter '%%name%%'

"Hinzufügen"-Hyperlink

Der "Hinzufügen"-Hyperlink enthält die Klasse "sc-cart-add" und das REL-Attribute mit dem ID-Namen des Warenkorbs, dem das Produkt hinzu2gefügt werden soll.
Ein Hinzufügen-Link muss, um einen neuen vollständigen Datensatz anlegen zu können, die Produkteigenschaften enthalten. Die Produkteigenschaften sind in Form einer Query eingesetzt. Deshalb müssen sie auch URL-codiert (Wikipedia: URL-Encoding; Online URL Decoder/Encoder) werden.

<a class="sc-cart-add" href="?pid=14674&name=Grosse%20Tasche,%2040%20x%2030%20cm&color=rot&preis=19.99" rel="shopcart"> Kaufen</a>

Innerhalb des Warenkorb kann eine vereinfachte Form des Hinzufügen-Links benutzt werden. Wenn ein Artikel schon im Warenkorb liegt, reicht es nur die Artikel-ID zu übertragen:

<a class="sc-cart-add" href="?pid=14674" rel="shopcart">hinzufügen</a>

"Entfernen"-Hyperlink

Ähnlich sieht der Entfernen-Link aus, der an jeder Stelle der Seite benutzt werden kann:

<a class="sc-cart-remove" href="?pid=14674" rel="shopcart">löschen</a>

Warenkorb-Template

Das Programm liest nach dem Laden der Seiten die ersten 5 Zeilen aus der Warenkorb-Box als Template ein.

1. Zeile:	Kopf, wird einmal ausgeben.
2. Zeile:	Schleife, wird mit den Artikeldaten gefüllt, so oft, wie Artikel vorhanden sind.
3. Zeile:	Fuss, wird einmal hinter der Schleife ausgegeben.
4. Zeile:	Auswertung: wird mit den Summen - Gesamtbetrag, Anzahl Artikel...- gefüllt und einmal ausgegeben.
5. Zeile:	Wenn der Warenkorb leer ist, wird nur (!) diese Zeile ausgegeben.

Im Template können folgende Platzhalter benutzt werden:
In der 2. Zeile: "%%pid%%","%%preis%%" und die selbstgewählten Produkteigenschaften (z.B. aus dem Beispiel oben"%%color%%" ).
Zusätzlich kann noch der Platzhalter %%num%% für die Anzahl dieses Artikels verwendet werden.
4. Zeile: Die Platzhalter in der Auswertung werden von pagescriptor.js automatisch berechnet:
"%%teile%%" Summe aller Teile, "%%anzahl%%" Summe unterschiedlicher Artikel und "%%sum%%" mit dem Gesamtbetrag.

Der Quellcode für das Template des Beispiel-Warenkorb unten:

<h4>Warenkorb</h4><ul>
    <li><a class="sc-cart-add" href="?pid=%%pid%%" rel="shopcart">+</a> / <a href="?pid=%%pid%%" class="sc-cart-remove" rel="shopcart">-</a>    %%name%% (Artikelnummer: %%pid%%)  %%num%% Stück x %%preis%% €</li>
</ul>
<p class="cs-sum">%%teile%% Teile, %%anzahl%% verschiedene Artikel, Summe: %%sum%% €</p>
<p>Der Warenkorb ist leer!</p>

Der Quellcode für das Template der Beispiel-Merkliste unten:

<h4>Merkliste</h4><ul>
    <li>%%name%% (Artikelnummer: %%pid%%) %%preis%% €</li>
</ul>

<p>Die Merkliste ist leer!</p>

persist: Events verändern Klassennamen

Persist sucht nach HTML-Elementen mit der Klasse "cs-persist" und ersetzt diese durch die Klasse "cs-persist-off". Clicks auf das Element wechseln diese gegen die Klasse "cs-persist-on" und wieder zurück. Außer dem Klassennamen und dem Click-Eventhandler werden die Elemente nicht verändert.

Zustand im Quellcode:

<div class="cs-persist">Content</div>

Nach dem Laden der Seite:

<div class="cs-persist-off">Content</div>

Nach dem ersten Click:

<div class="cs-persist-on">Content</div>

Boxen mit der "cs-persist" können durch einen Klassennamen, der mit "cs-group-" beginnen muss, zu einer oder mehreren Gruppen zusammengefaßt werden, d.h. wird eine Box der Gruppe geöffnet, so wird eine noch offene Box der selben Gruppe geschlossen. Die Klasse "cs-group-name" ordnet eine Box der Gruppe in diesem Beispiel "name" zu. Den Namen können Sie selbst wählen, etwa: "cs-group-erste" oder "cs-group-galerie2".

Das nachstehende Beispiel benutzt den Gruppennamen "ps-group-test" und erzeugt den "Accordion"-Effekt:

Class-Cascade: mehrere Klassen dynamisch auf einer Reihe Elemente verteilen

Class-Cascade sucht nach HTML-Elementen - DIV oder UL - mit dem Attribut data-cascade. Kindelemente erhalten benutzerdefinierte Klassen zugewiesen. Der Wert des Attribut data-cascade wird als Folge von Optionen - getrennt durch Kommata - ausgewertet. Die erste Option definiert eine Folge von Klassennamen, verbunden mit Bindestrichen, z.B.:"data-cascade="default-links-mitte-rechts". Ist der Anzahl der definierten Klassennamen gerade, dann wird der erste Klassennamen als Default-Klasse verwendet, für die ansonsten cascade verwendet wird.

Weitere Optionen modifizieren das Verhalten von Class-Cascade, z.B.:"data-cascade="default-links-mitte-rechts,linear,hover".
Die Option linear verhindert, dass die Klassennamen ringfförmig verschoben werden. Die mittlere Klasse kann sich nur zwischen dem ersten Element und dem letzten Element bewegen."Überstehende" Klassen werden nicht zugewiesen.
Die Option bounds verschiebt die Klassennamen nur zwischen den linken und rechten Grenzen. Das bedeutet auch, dass immer alle Klassen zugewiesen sind
Die Option click ist default und bedeutet, dass jedes sichtbare Element nach dem Mausclick zum zentralen Element wird.
Die Option next bedeutet, dass mit dem Mausclick auf das zentrale Element das nächste Element zum zentrale Element wird. Diese Option ist dann wichtig, wenn außer dem zentralen Element kein weiteres Element sichtbar ist.
Die Option next bedeutet, dass Klassen, die den Elementen statisch zugewiesen sind, erhalten bleiben.