jQuery, accordion, Plugin, Demo, JavaScript

Zurück zur Übersicht

//WERKSTATT

jQuery.tn34.accordion

Kategorie:: jQuery
Autor:: Mario Alves
Version:: 1.0

Erstellungsdatum:: 19.07.2010
Programmiersprache:: JavaScript

Demo:

Statischer Inhalt Ajax Statischer Inhalt (IE6-kompatibel)

Download:

Das jQuery Akkordion-Plugin: akkordion_v1.zip

Features:

Clean&Valid Markup
Mehrere Akkordions auf einer Seite
Ajax-Funktion (get/json)
Animation und Animationsgeschwindigkeit einstellbar
beforeChange / afterChange-Funktion

Browser support:

Firefox v2/3+
IE v6/7/8+
Opera v9/10+
Safari v3
Konqueror v4+

Anwendung:

Um das TN34.Accordion benutzen zu können, benötigt ihr jQuery 1.4.2, TN34.Accordion Script und CSS.

<link rel="stylesheet" href="css/akkordion.css" type="text/css" media="screen, tv, handheld, projection" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.tn34.akkordion.min.js" type="text/javascript"></script>

JavaScript:

Zuletzt startet man das Plugin unter Verwendung der $(document).ready()-Funktion.

<script type="text/javascript">
$(document).ready(function(){
  $('dl').akkordion({
    cssClass: 'akkordion'
  });
});
</script>

HTML:

Als nächstes benötigt ihr etwas HTML. Bitte achtet darauf die Markup-Struktur einzuhalten, die Klasse "ddBodyContent" ist hingegen optional.

<dl>
  <dt><div class="dtbody"><big>Tab-Überschrift</big></div></dt>
  <dd>
    <div class="ddBody">
      <h2>Inhalts-Überschrift</h2>
      <div class="ddBodyContent">Inhalt</div>
    </div>
  </dd>
</dl>

Optionen:

Durch das Einstellen folgender Optionen könnt ihr den TN34.Accordion auf eure Bedürfnisse anpassen.

<script type="text/javascript">
$(document).ready(function(){
  $('dl').akkordion({
    defaultIndex: 0,                        // default opened tab
    animated: true,                         // define if you want the akkordion to be animated
    animationSpeed: 500,                    // animation speed
    cssClass: false,                        // if javascript is on we apply this class on the "dl"
    innerContainerCssClass: 'ddContainer',  // css-classname for "inner" container
    activeTabCssClass: 'active',            // css-classname for the "active (dt) tab"
    activeContentCssClass: 'opened',        // css-classname for the "opened (dd) container"
    height: 'auto',                         // auto | amount in pixel (integer)
    aJx: 'static',                          // static | example.com/ajax.php?key=
    aJxType: 'get',                         // get | json
    pageNotFoundText: '',                   // needed if ajax-response is empty or 404
    beforeChange: function(){},             // before change trigger
    afterChange: function(){}               // after change trigger
  });
});
</script>