Skript gbAccordion

Tutorials von Thomas Frei-Herrmann

Skript gbAccordion v1.0

von gb media. Klicke auf die Überschriften.

Tommys NOF Textfeld Nummer 1 mit Text

Dieser Inhalt ist von Tommy direkt als Textfeld von NOF definiert und ist nur ein Text.

 

Tommys NOF Textfeld Nummer 2 mit Bild

Dieser Inhalt ist von Tommy direkt als Textfeld von NOF definiert und ist nur ein Text.
Dieses Element wird durch einen Anker zuerst geöffnet.

Bitte klicke hier für ein ähnliches Skript.

Man kann natürlich auch ein Bild einfügen.


Herzlich willkommen

 


Quelle: Original Beispiel-Datei von gb media.

Mit gbAccordion können Sie einen Auf- Zuklapp-Effekt (Accordion-Effekt) realisieren. Durch klicken eines Elementes wird der dazugehörige Inhalt aufgeklappt und der alte Inhalt zugeklappt. gbAccordion eignet sich hervorragend für einen FAQ-Bereich.

Demo

Klicken Sie auf die einzelnen Überschriften.

CSS

CSS (Cascading Style Sheets) ist eine deklarative Stylesheet-Sprache für strukturierte Dokumente. CSS legt fest, wie ein besonders ausgezeichneter Inhalt oder Bereich dargestellt werden soll. Neben diversen Angaben zu Farben und Schriften bietet CSS die Möglichkeit, Elemente frei zu positionieren oder Hintergrundbilder festzulegen.

JavaScript

JavaScript ist eine zur Erweiterung des HTML-Befehlssatzes entwickelte kompakte Scriptsprache, die es auch Entwicklern mit geringen Programmierkenntnissen ermöglicht, objektorientierte Anwendungen in Internetseiten zu implementieren. Sie wird direkt in das HTML-Dokument eingebunden, wodurch schnelle Aktionszeiten möglich sind.

Ajax

Ajax (Asynchronous JavaScript and XML) ermöglicht Datenübertragung zwischen einem Server und dem Browser, das innerhalb einer HTML-Seite eine HTTP-Anfrage durchführt, ohne die Seite komplett neu laden zu müssen.

MooTools

MooTools ist ein Javascript basierendes Framework, was Javascript um viele nützliche Dinge erweitert. MooTools läßt sich einsetzen um mit Ajax zu arbeiten und man kann damit schöne Effekte kreieren (siehe hier Akkordeon- Effekt), die es sonst nur bei Flash-Anwendungen gibt.

Sie können auch das erste Aufklapp-Element beeinflussen.
z.B. de/webprojekte/technologie.html#mootools

gbAccordion Demo herunterladen


Einbinden

  1. Laden Sie die benötigt Daten hier herunter.
  2. Binden Sie die JavaScript Dateien in Ihrer Seite ein.
    <script type="text/javascript" src="js/moo1.3.1_compile.js"></script>
    <script type="text/javascript" src="js/gbaccordion_compile.js"></script>
  3. Legen Sie einen Hauptcontainer an, indem der Effekt ausgeführt werden soll.
    Vergeben Sie diesem Container auch eine ID!
    <p id="accordion"></p>
  4. In diesem Hauptcontainer kommen nun Ihre Elemente für die Überschriften und den Inhalten. Vergeben Sie den Überschriften einen Klassennamen und eine ID. Die ID wird für den Anker benötigt. Den Inhalten reicht der Klassenname.
    <p id="accordion">
    <h2 id="ankername" class="toggler">// Eine Überschrift</h2>
    <div class="listcontent">Hier steht der Inhalt</div>
    </p>
  5. Sie können der Klasse noch Optionen (optional) zuweisen, die der Klasse übergeben werden soll.
    <script type="text/javascript">
    var gbAccordionOpt = {
    handle : 'accordion',
    toggler : 'toggler',
    toggleractive : 'togglerh',
    content : 'listcontent',
    anker : 0,
    opacity : false
    }
    </script>
  6. Die JavaScript Klasse wird automatisch aufgerufen, wenn die Webseite vollständig geladen ist.
  7. Das Aussehen der Elemente können Sie per CSS einstellen.
    <style type="text/css">
    #accordion {
    margin-bottom: 1em;
    }
    .toggler {
    color: #000;
    }
    .togglerh {
    color: #ff4e00;
    }
    .toggler, .togglerh {
    cursor: pointer;
    }
    </style>


Erläuterung

  • handle
    Geben Sie hier die ID des Hauptcontainers an.
    Z.B. 'accordion'
  • toggler
    Hier steht ihr Klassenname für die Überschriften.
    Z.B. 'toggler'
  • toggleractive
    Hier steht der Klassenname für den aktiven und mouseover Zustand einer Überschrift.
    Z.B. 'togglerh'
  • content
    Hier steht der Klassenname für Ihre Inhalte.
    Z.B. 'listcontent'
  • anker
    Tragen Sie hier eine Nummer für das Element ein, das als Erstes angezeigt werden soll. Beachten Sie, dass Sie hier die Position in einen Array vergeben. D.H die Position 1 ist die 0.
    Z.B. 0
    Sollten Sie einen Verweis mit einen Anker übergeben (index.html#javascript), dann wird die Position automatisch ermittelt.
  • opacity
    Beim Auf- oder Zuklappen kann der Inhalt Ein- oder Ausgeblendet werden. Tragen Sie hier true (Blend-Effekt an) oder false (Blend-Effekt aus) ein.
    Z.B. false
 

diese Seite weiter empfehlen



Counter Statistik