Und nicht vergessen...
Internetsites, die auf unseren Templates basieren, sind
- spätestens 7 Tage nachdem sie online zu erreichen sind -
bei uns anzumelden !
Aber recht habt ihr ja.
Und wie das geht...moo.fx - Akkordeon-Effekt
Wie man dieses Feature in phpWCMS zum Laufen bringt...
Hier geht es weniger um die Frage, wie sinnvoll dieses nette Feature für die Anwendung ist. Eher darum, wie es mit wenig Aufwand möglich ist ( auch für einen absoluten Laien ), den zur Zeit so beliebten Akkordeon-Effekt in phpWCMS einzubinden.
1. moo.fx Akkordeon-Funktion :: Oder: "Wie bekomme ich die Oma auf's Fahrrad?"
 |  |  |
| Klar kann man auch Bilder verwenden ! | | ...kombiniert mit der Lightbox JS v2.0 - Funktion ! |
| ||
" Hey Alter, GEIL! Das will ich auch haben... "
User, beim Besuch dieser Seite ! (Originalton) [ Die User-URL ist dem Administrator bekannt ]
Na, bei einer sooo freundlichen Bitte, können wir ja garnicht anders und wollen uns mal
"ans Werk" machen um den Lösungsweg zu beschreiben.
Das sollte übrigens auch ein NewBee "locker" schaffen, wenn er alles 1:1 nachmacht!
Zeitaufwand: ca. 15-30 Minuten! OK, wer noch nicht so fit ist, benötigt ggf. etwas mehr.
Aber die Arbeit ist ja nur 1 mal erforderlich.... und "nett" sieht's ja schon aus, oder?
2. Das benötigte Handwerkszeug
Der phpWCMS User, der bereits soweit fortgeschritten ist und sich diesen Schritt zutraut, der hat das notwendige Fahrrad bereits "am Laufen" (um bei unserem Wortspiel zu bleiben).
Leider ist diese Funktion in phpWCMS nicht integriert und muß "nachinstalliert" werde.
Für diesen Zweck benöigen wir das script-Paket moo.fx (wegen der geringen Größe wohl besser als Päckchen zu bezeichnen).
Wer sich genau informieren möchte... hier geht's auf die Site von moo.fx.
Da aber dort immer mal modifiziert und optimiert wird, schlage ich vor, die ersten Versuche mit der hier bereitgestellten Zusammenstellung zu versuchen. Wir benötigen also:
1. Eine funktionierende phpWCMS Installation
2. 30 Minuten Zeit
3. Das "script-Päckchen" aus dem nachfolgenden Punkt 3. dieses Tutorials
3. Hier mein "moo.fx-Päckchen"... zum Downloaden und Nachmachen!
Übrigens:
Basierend auf diesem Spickzettel ist auch die Tutorial-Seite selber entstanden!
pepes_moo.fx4phpWCMS_2007-04-02.zip
In dieser ZIP-Datei sind alle erforderlichen Scripts enthalten,
die zum Umsetzen der hier gezeigten moo.fx - Lösung benötigt werden!
Dateityp: .zip - Dateigröße: 359,9 KB - Erstellungsdatum: 02.04.2007 - Downloads: 1167
A. Vorbereitende Arbeiten
Downlod des "moo.fx-Päckens" ( In Sektion 3. hier oben... ! )
Zunächst ist die heruntergeladene ZIP-Dateie mit einem geeigneten Programm auf dem eigenen PC zu entpacken. Es ist sinnvoll sich den Inhalt zunächst anzusehen!
Das vorhandenen Ordnersystem entspricht der, in phpWCMS-Script verwendeten Anordnung. Es ist also möglich, die Dateien quasi "am Stück" in die eigene Anwendung zu kopieren/hoch zu laden. Der Ordner "phpWCMS-ROOT" entspricht dabei dem eigenen Hauptverzeichnis.
Einbinden der moo.fx-Dateien in phpWCMS...
Damit phpWCMS auf die moo.fx Dateien zugreifen kann, sind diese zunächst in den Dateisatz von phpWCMS einzufügen.
Um die Dateien zur eventuellen Bearbeitung schneller wiederfinden zu können, verwenden wir einen eigenen Unterordner: .../scripts/moo_fx/
Je nach verwendetem FTP-Programm ist dieser Ordner zunächst selber anzulegen oder das Programm erledigt das beim Upload der Dateien selbständig.
Egal, wie nun die Dateien in den Ordner hochgeladen werden, sollte man abschließend kontrollieren, daß sie "auch wirklich angekommen" sind!
Im Ordner .../scripts/moo_fx/ müssen jetzt mindestens vorhanden sein:
- prototype.lite.js
- moo.fx.js
- moo.fx.pack.js
Im Ordner .../template/inc_css/ (bzw. in dem Ordner, in dem die frontend.css liegt):
- moo_fx.css
Erweiterung der verwendeten Vorlage um die notwendigen Datei-Aufrufe...
Jetzt loggen wir uns (als Administrator) ins Backend der phpWCMS-Anwendung ein.
Es gilt, diejenigen Seiten mit der Akkordeon-Funktion auszustatten, die eben diesen Effekt aufweisen sollen. Dazu müssen wir die verwendete Vorlage modifizieren (EDIT).
Bereich "CSS DATEI:"
Hier ist darauf zu achten, daß die nun vorhandene Datei moo_fx.css auch "markiert" ist!
 |
| ADMIN-Bereich zur Aktivierung der benötigten CSS-Dateien und Script-Eingabefeld "HTML< head >" |
|
Bereich "HTML < head >:"
Hierhin ist der nachfolgend aufgeführte Code zu kopieren.
Darin werden zunächst die benötigten Dateien aufgerufen, anschließend die notwendigen Variablen zugeordnet und die gewünschten Einstellungen vorgenommen.
So bedeutet z.B. duration: 300 eine Zeitdauer von 300 Millisekunden für den Schließvorgang der Funktion.
Damit sich beim Seitenaufruf bereits einen Bereich öffnet, ist der Wert des Bereichs X anzugeben unter myDivs[X]. Dabei bedeutet 0 = 1. Bereich!
Wird die Eintragung von X leer gelassen ( myDivs[ ] ), ist der Akkordeon-Effekt außer Funktion!
Code zur Eingabe in den Bereich "HTML < head >:" der verwendeten Vorlage:
<!-- moo.fx - accordion-Dateien -->
<script src="scripts/moo_fx/prototype.lite.js" type="text/javascript">
</script>
<script src="scripts/moo_fx/moo.fx.js" type="text/javascript">
</script>
<script src="scripts/moo_fx/moo.fx.pack.js" type="text/javascript">
</script>
<!-- moo.fx - accordion-Einstellungen -->
<script type="text/javascript">
<!--
window.onload = function() {
// Definition von 2 Arrays, die LINKs und DIVs enthalten
var myLinks = document.getElementsByClassName('toggler');
var myDivs = document.getElementsByClassName('accordion');
// Jetzt wird der Effekt erzeugt
var myAccordion = new fx.Accordion(myLinks, myDivs,
{opacity: false, duration: 300});
// Auswahl der geoeffneten Startsektion | 0 = 1. Sektion
myAccordion.showThisHideOpen(myDivs[0]);
}
//-->
</script>
<script src="scripts/moo_fx/prototype.lite.js" type="text/javascript">
</script>
<script src="scripts/moo_fx/moo.fx.js" type="text/javascript">
</script>
<script src="scripts/moo_fx/moo.fx.pack.js" type="text/javascript">
</script>
<!-- moo.fx - accordion-Einstellungen -->
<script type="text/javascript">
<!--
window.onload = function() {
// Definition von 2 Arrays, die LINKs und DIVs enthalten
var myLinks = document.getElementsByClassName('toggler');
var myDivs = document.getElementsByClassName('accordion');
// Jetzt wird der Effekt erzeugt
var myAccordion = new fx.Accordion(myLinks, myDivs,
{opacity: false, duration: 300});
// Auswahl der geoeffneten Startsektion | 0 = 1. Sektion
myAccordion.showThisHideOpen(myDivs[0]);
}
//-->
</script>
B. Grundsätzlicher Aufbau eines Artikels mit moo.fx-Akkordeon Funktion
Die Vorbereitungen sind erledigt, jetzt wollen wir einen Artikel aufbauen...
Die zuvor gemachten Arbeiten sind Gott sei Dank nur einmalig zu erledigen. Damit neue Seiten (Artikel) auch die erwartete Funktion zeigen, unbedingt kontrollieren, daß für die entsprechende Kategorie die "passende" Vorlage ausgewählt wird!
 | |
| Artikelinformation einer Musterseite mit moo.fx Akkordeon-Effekt |
|
Das erkennbare "Strickmuster":
Betrachtet man sich den Bildschirm-Dump einer Musterseite, so läßt sich das Grundprinzip sehr leicht enträtseln. Zusätzlich zu den bekannten ContentParts (CPs) werden HTML-Elemente benötigt, die für die geplante Einteilung der Inhalte in die einzelnen Sektoren der Akkordeon-Funktion sorgen.
Es sind 3 verschiedenen HTML-Element Typen vorhanden:
Typ 1
Startet unsere Akkordeon-Funktion durch öffnen eines speziellen Bereichs (DIV). Nur 1mal vorhanden!
Nimmt gleichzeitig den Titel des ersten Feldes auf.
Typ 2
Befindet sich zwischen den einzelnen Bereichen und stellt den "Titel" des Feldes dar.
Typ 2 wird zwangsläufig mehrfach vorhanden sein und sich nur im jeweiligen Titeltext unterscheiden.
Typ 3
Beendet das ganze Spiel und schließt die geöffneten DIVs ab! Nur 1mal vorhanden!
C. Inhalt der benötigten Steuerelemente
HTML-Steuerelement TYP 1:
<!-- -->
<!-- ================================================== -->
<div id="accordion-box"><!-- START accordion-box -->
<h3 class="toggler"><a href="#">
1. Überschrift des Start-Bereichs
</a></h3>
<div class="accordion">
<!-- ================================================== -->
<div id="accordion-box"><!-- START accordion-box -->
<h3 class="toggler"><a href="#">
1. Überschrift des Start-Bereichs
</a></h3>
<div class="accordion">
HTML-Steuerelement TYP 2:
</div>
<h3 class="toggler"><a href="#">
XX. Überschrift des xx. Bereichs
</a></h3>
<div class="accordion">
<h3 class="toggler"><a href="#">
XX. Überschrift des xx. Bereichs
</a></h3>
<div class="accordion">
HTML-Steuerelement Typ 3:
</div>
</div> <!-- STOP - accordion-box -->
<!-- ================================================== -->
</div> <!-- STOP - accordion-box -->
<!-- ================================================== -->
D. Sinnvolle Vorgehensweise beim Anlegen einer Seite
Planung ist immer von Vorteil und erspart später lästige Kopierorgien...
Wenn von vorne herein klar ist, daß eine Seite mit diesem Effekt ausgestattet sein soll, dann wird es sinnvoll sein, gleich beim "Zerteilen" des Inhalts in sinnvolle Päckchen, diese auch innerhalb eigener Contentparts abzuspeichern.
Hat man seinen kompletten Inhalt (wie von 95 % aller phpWCMS-User "gerne gemacht") in einem einzigen Eingabefeld abgespeichert, wird man garantiert die Nerven verlieren, wenn es an die Umstellung geht. Hat man aber nur 10 Minuten geplant, spart man diese Nerven und zehn mal so viel Zeit bei der Umsetzung... garantiert!
Besser ist es deshalb, bereits die erforderlichen HTML-Steuerelemente beim Anlegen der Inhaltsstruktur mit einzugeben, anfangs aber noch auf "nicht sichtbar" zu schalten.
So hat man beim Eingeben des Inhalts eine bessere Übersicht und kann nach Fertigstellung, die Akkordeon-Funktion durch Anklicken der "sichtbar/unsichtbar"-Icons (rechts neben dem EDIT-Icon) die komplette Funktion aktivieren.
