Tutorial gbAccordion

Tutorials von Thomas Frei-Herrmann

Tutorial Skript gbAccordion v1.0

von gb media. Hier geht es zum Download.

Hier eine kurze Beschreibung, wie ich die ersten beiden Zeilen auf meiner Seite gbAccordion eingefügt habe.

Zunächst habe ich mir die Demo-Seite herunter geladen. Entpackt diese .zip Datei. Ihr erhaltet folgende Ordner:

  • css - Ordner mit einer CSS-Datei, die Ihr verwenden und Euren Bedürfnissen anpassen könnt
  • js - Ordner mit zwei Java-Skripten

Bitte kopiert diese beiden Ordner in das Verzeichnis “Lokale Publizierung” auf Eurem PC und natürlich in das Stammmverzeichnis Eures Projektes auf dem Server.

Dann fügt Ihr die Verlinkungen zu den beiden .js Dateien, der .css Datei sowie diese Style Anweisung in die HTML des Layouts ein: Achtet dabei auf die richtige relative Pfadangabe, hier mit einem Punkt ./ von der Startseite, von einer Unterseite müssen dort zwei Punkte ../ hin.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen

<script type="text/javascript" src="./js/moo1.3.1_compile.js"></script>
<script type="text/javascript" src="./js/gbaccordion_compile.js"></script>

<link rel="stylesheet" type="text/css" href="./css/main.css" />

<style type="text/css">
#accordion {
margin-bottom: 1em;
}
.toggler {
color: #000;
}
.togglerh {
color: #ff4e00;
}
.toggler, .togglerh {
cursor: pointer;
}
</style>

... anschließend habe ich mir einen neuen Layout-Bereich aufgezogen in den ich, in meinem Beispiel, zwei Textfelder aufgezogen habe.

Diesem Layout-Bereich habe ich dann die ID=content” gegeben, also:

“vor dem Tag” (ab NOF 11 “vorher”)

<div id="content">

“nach dem Tag” (ab NOF 11 “nachher”)

</div>

... in die beiden Textfelder habe ich dann jeweils meinen Inhalt in den HTML-Code Editor kopiert. Hier ein Beispiel mit Link und Bild. Bitte gebt jedem h2 Tag eine andere ID.

<h2 id="tommy2" class="toggler">Tommys NOF Textfeld Nummer 2 mit Bild</h2>
<div class="listcontent">
<p class="blau">Dieser Inhalt ist von Tommy direkt als Textfeld von NOF definiert und ist nur ein Text.<br><span style="color: #FF0000">Dieses Element wird durch einen <b>Anker</b> zuerst geöffnet.</span></p>
<p class="blau">Bitte <a href="http://www.tommyherrmanndesign.com/nof/jquery-expand/" target="_blank">klicke hier</a> für ein ähnliches Skript.</p>
<p class="blau">Man kann natürlich auch ein Bild einfügen.</p>
<br>
<p align="center"><img src="./assets/images/Stinktier.gif" alt="Herzlich willkommen" title="Herzlich willkommen"></p>
</div>

Optional könnt Ihr auch noch dieses Skript (wie ich hier) “Zwischen Head Tags” des Layouts einsetzen. Ich habe hier folgende Veränderungen vorgenommen:

  • anker: 1 - der Anker bezieht sich auch das sich zuerst öffnende Element beginnend bei 0. Mit 1 öffne ich das 2. Element von oben
  • opacity: true - die Opacity (Deckkraft) erzeugt ein Aus- bzw. Einblenden des Textes bei “true”, sonst “false” eintragen

<script type="text/javascript">
var gbAccordionOpt = {
handle : 'accordion',
toggler : 'toggler',
toggleractive : 'togglerh',
content : 'listcontent',
anker : 1,
opacity : true
}
</script>

Bemerkungen:

  • Das NOF-eigene Skript “rollover.js” (für den Mausüber-Effekt der Navi) muss ausgeschaltet sein
  • Die NOF-eigene HTML-Ausgabe XHTML erzeugt eine .js-Datei, die nicht mit den Skripten von gbAccordion korrespondiert.

nach oben

Viel Erfolg!

diese Seite weiter empfehlen



Counter Statistik