Tutorial jQuery Accordion Widget

Diese Multi-Layout-Region basiert auf jQuery Skripten.

Bitte fügt zunächst die Verlinkungen auf diese Skripte in die HTML Eures Layouts ein.

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

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

Ebenso fügt Ihr darunter “Zwischen Head Tags” die Javascript-Funktion ein, die auf die ID “accordion” verweist.

<script>
   $(function() {
      $( "#accordion" ).accordion();
   });
</script>

Es gibt verschiedene Funktionen für dieses Skript, bitte guckt Euch alle Optionen bei jqueryui.com an und lest auch meine Bemerkungen.

Ich habe hier die Funktionen (unten) verwendet, also dieses Skript anstelle des oben gezeigten “Zwischen Head Tags” eingefügt:

• heightStyle: “content” - bewirkt, dass sich die Höhe einer Layout-Region an den Inhalt anpasst
• collapsible: true - bewirkt, dass ein geöffneter Bereich mittels Klick auf die Überschrift geschlossen wird, sonst bleibt immer der aktive Bereich offen

<script>
   $(function() {
      $( "#accordion" ).accordion({
         heightStyle: "content",
         collapsible: true
      });
   });
</script>

Nun habe ich mir ein Textfeld aufgezogen. Ihr dürft lediglich ein Textfeld verwenden und müsst diesem dann die ID “accordion” geben.

Dazu markiert Ihr das Textfeld mit einfachem Klick und klickt im Fenster “Text-Eigenschaften” auf den Button “HTML”

Fügt dort “vor dem Tag” (ab NOF 11 “vorher”) diese DIV-ID in die Objekt-HTML ein:

<div id="accordion">

... und “nach dem Tag” (ab NOF 11 “nachher”) schließt Ihr diesen DIV-Container wieder mit:

</div>

Zieht das Textfeld auf die Breite auf, die das Widget haben soll und schreibt Euren Text ganz normal in das Textfeld, fügt Bilder ein und was auch immer.

Das jQuery-Skript ist so geschrieben, dass es die Absatz-Formatierung “H3” erkennt und an dieser Stelle eine neue Layout-Region öffnet. Ihr macht also nach dem “H3” Tag, das Ihr im Fenster “Text-Eigenschaften” unter “Absatz” findet, einen “harten” Umbruch (Enter-Taste). Innerhalb einer Region dürft Ihr dann in NOF ausschließlich “weiche” Umbrüche setzen (Shift+Enter Taste), da sonst eine neue Layout-Region geöffnet wird. Nachdem Ihr Eure Eingabe für die 1. Layout-Region beendet habt, setzt Ihr dann also wieder einen “harten” Umbruch und dann die nächste Überschrift, die Ihr wieder als “H3” Tag formatiert.

Bemerkung (im Februar 2013):

• Es gibt sehr viele Optionen für dieses Widget, wie z.B. eine bestimmte Region zuerst zu öffnen oder das Öffnen bei Mausüber und vieles mehr.
  Guckt für die Optionen bitte hier.
   
• Der Internet Explorer 8 oder älter kann die Boxen nicht abgerundet anzeigen, sondern wird diese eckig darstellen.
   
• Wenn Ihr die HTML-Ausgabe XHTML verwenden wollt (wie auf dieser Seite), dann müsst Ihr die jQuery-Verlinkungen unter die .js Datei von NOF legen, die bei diesem DOCTYPE von NOF generiert wird,  da diese nicht mit den neuen jQuery-Skripten des Widgets korrespondiert.
   
• Bei der Verlinkung zur CSS-Datei “jquery-ui.css” müsst Ihr Euch ausprobieren, ob eventuelle “Accordion” Klassen oder andere CSS-Klassen von NOF dabei überschrieben werden. Diese also entweder in NOF ändern oder die CSS-Datei entsprechend über oder unter der Datei “style.css” von NOF legen.
  
  Das könnt Ihr am einfachsten machen, indem Ihr diese 3 Verlinkungen inklusive der Funktion in den <Code> Editor (unten links auf der Seite) in den Custom4 - Bereich (anstelle von “Zwischen Head Tags”) einfügt.

<!-- [BEGIN Custom4] -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

<script>
   $(function() {
      $( "#accordion" ).accordion({
         heightStyle: "content",
         collapsible: true
      });
   });
</script>
<!-- [END Custom4] -->

• Aktive Layout-Region
  
  Wollt Ihr eine bestimmte Layout-Region beim Aufruf der Seite zuerst öffnen (anstelle der ersten), wie auf meiner Seite “XHTML”, dann könnt Ihr der Funktion noch diese Anweisung (active:)  zufügen - in meinem Beispiel ist das die 4. Region (active: 3), beginnend bei 0 für die erste, die zweite 1,
  die dritte 2, die vierte 3, usw.
   
• Um alle Regionen beim Aufruf der Seite zunächst geschlossen zu halten, kann man die Anweisung (active:) auf “false” setzen - also active: false

<script>
   $(function() {
      $( "#accordion" ).accordion({
         heightStyle: "content",
         collapsible: true,
         active: 3
      });
   });
</script>

nach oben

Viel Erfolg!