Tab-Menü mit Slide Funktion (flowplayer)

Den Script-Aufruf einfügen in der header.php vor dem:

<?php wp_head(); ?>
</head>

Auf der download-Seite von Flowplayer kann man sich bequem eine Script-Datei aus benötigten Elementen zusammenstellen. Sehr praktisch.

Noch bequemer ist es direkt auf die Scripte zu verlinken.
Mit folgendem Scriptaufruf ist bereits alles erledigt:
(enthält jQuery Library und alle zustätzlichen Tools)

<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

Verwendet man bereits im Theme die JavaScript Library so sollte man einen doppelten Aufruf vermeiden.
In meinem Fall habe ich die Library bereits durch folgenden Aufruf eingebunden:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Somit benötigt man nur die zusätzlichen Script-Elemente:

<script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>

Anmerkung: Beim verlinken von Scripten besteht die Gefahr das die verlinkte Seite nicht erreichbar ist und dadurch die eigene Seite nicht richtig dargestellt wird. Wenn die Script-Dateien im Theme-Ordner liegen kann dies nicht passieren. Wobei vermutlich eher die eigene Seite mal streikt als google oder die jquerytools-Website. (?)

Zusätzlichen Script-Code einfügen in der footer.php
Nach <?php do_action('wp_footer'); ?>
und vor dem schließenden Body </body>
Einfach den untenstehenden markieren, kopieren und einfügen.

<!-- activate tabs with JavaScript -->
<script>
// wait until document is fully scriptable
$(function() {

// select #flowplanes and make it scrollable. use circular and navigator plugins
$("#flowpanes").scrollable({ circular: true, mousewheel: false }).navigator({

// select #flowtabs to be used as navigator
navi: "#flowtabs",

// select A tags inside the navigator to work as items (not direct children)
naviItem: 'a',

// assign "current" class name for the active A tag inside navigator
activeClass: 'current',

// make browser's back button work
history: true
});
});
</script>

In diesem JavaScript Code lassen sich einige Funktionen einstellen:
Funktion aktivieren=true – Funktion deaktivieren=false

• Soll beim letzten Tab nach drücken der “Vor” Taste zum ersten Tab gesprungen werden?
  Funktion: circular: true
• Sollen die Tabs beim scrollen mit der Maus nacheinander erscheinen?
  Funktion: mousewheel: false
  Schöne Funktion, kann aber auch etwas nervös wirken. (obige Demo anklicken) – habe die Funktion deaktiviert.

eintragen in der style.css oder dafür eine eigene css-Datei erstellen und im header.php verknüpfen:

<link rel="stylesheet" href="...Pfad zur css-Datei..." type="text/css">

Da ich dieses Script innerhalb von Beiträgen verwenden möchte habe ich ein minimiertes Design verwendet. (siehe obiges Bild)

• style.css-Angaben (txt-Datei)

Text Datei öffnen und zunächst die Breite und Höhe von #flowtabs und #flowpanes anpassen.

Klare, einfache Struktur. Zunächst werden die Tab-Menü-Punkte beschriftet, dann der eigentliche Inhalt (Text und Bilder) und zum Schluß optional die Navigation-Links.

<!-- Tab-Menue-Punkte -->
<ul id="flowtabs" class="navi">
<li><a id="t1" href="#beschreibung">Beschreibung</a></li>
<li><a id="t2" href="#ausstattung">Ausstattung</a></li>
<li><a id="t3" href="#lage">Lage</a></li>
<li><a id="t4" href="#sonstiges">Sonstiges</a></li>
</ul>

<!-- Inhalte zu den Menue-Punkten -->
<div id="flowpanes">
<div class="items">
<div>Text zur Beschreibung</div>
<div>Text zur Ausstattung</div>
<div>Text zur Lage</div>
<div>Text Sonstiges</div>
</div>
</div>

<!-- Navigation -->
<p class="scroll-navi">
<button class="custom prev">&laquo; Zurück&nbsp;</button>&nbsp;&nbsp;&nbsp;<button class="custom next">&nbsp;Vor &raquo;</button>
</p>