Kategorie:

jQuery

Autor:

Mario Alves

Version:

1.0

Erstellungsdatum:

23.08.2010

Programmiersprache:

JavaScript

Demo:

Animationsdemo 

Download:

Das jQuery Timetabs-Plugin: timetabs_v1.zip

Anwendung:

Um TN34.TimeTabs nutzen zu können, benötigt ihr das jQuery-Framework ab Version 1.4.2, TN34.TimeTabs-Skript und etwas CSS.

<link rel="stylesheet" href="css/timetabs.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.timetabs.min.js" type="text/javascript"></script> 

JavaScript:

Zuletzt startet man Skript unter Verwendung der $(document).ready()-Funktion. Damit die "<dl>" im "Tabstyle" dargestellt wird weisen wir dieser vor der Iniziierung noch die CSS-Klasse "enabled" zu.

 <script type="text/javascript">
$(document).ready(function(){
  $('dl.tabs').addClass('enabled').timetabs({
    defaultIndex: 0,
    interval: 2500,
    continueOnMouseLeave: true,
    animated: 'fade',
    animationSpeed: 500
  });
});
</script> 

HTML:

Als nächstes benötigt ihr etwas HTML. Bitte achtet darauf die Markup-Struktur einzuhalten.

<dl class="tabs">
    <dt>Tab 1</dt>
    <dd>Inhalt 1</dd>
    <dt>Tab 2</dt>
    <dd>Inhalt 2</dd>
    <dt>Tab 3</dt>
    <dd>Inhalt 3</dd>
</dl>

Optionen:

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

 <script type="text/javascript">
$(document).ready(function(){
  $('dl.tabs').addClass('enabled').timetabs({
        defaultIndex: 0,            // default opened tab
        interval: 2500,             // pager-interval in milliseconds
        continueOnMouseLeave: true, // continue tabsswitching on mouseleave after a mouseover
        animated: false,            // animation: false, 'slide', 'curtain', 'fade'
        animationSpeed: 500,        // animation speed
        beforeChange: function(){}, // before load-function
        afterChange: function(){}   // after load-function
  });
});
</script>