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 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
- Laden Sie die benötigt Daten hier herunter.
- 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>
- Legen Sie einen Hauptcontainer an, indem der Effekt ausgeführt werden soll.
Vergeben Sie diesem Container auch eine ID!
- 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>
- 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>
- Die JavaScript Klasse wird automatisch aufgerufen, wenn die Webseite vollständig geladen ist.
- 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
|