Tab öffnen bei Klick auf Button

[chuvak]

In Dreamweaver CS3 gibt es die Funktion (Spry), Tabs zu erstellen.
Wenn man die Tabs anklickt, öffnet sich das jeweilige.
Ich möchte jetzt einen Button erstellen, der beim Klicken auch diese Tabs öffnen kann. Leider finde ich die dazugehörige Funktion nicht.

Das Ganze benötigt noch eine JavaScript und eine CSS-Datei. Im Anhang hab ich sie als TXT gespeichert.

<script src="SpryAssets/SpryTabbedPanelsJS.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanelsCS.css" rel="stylesheet" type="text/css" />

<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Registerkarte 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Registerkarte 2</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Inhalt 1</div>
    <div class="TabbedPanelsContent">Inhalt 2</div>
  </div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>

 

[Maik]

Hi,

vielleicht bist du auf der Suche nach den Control.Tabs?

//edit: Ansonsten klingt doch diese Funktion im JS-Code ganz verheissungsvoll:

Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)

 

[chuvak]

Reicht es also, wenn ich diesen Button einfüge?

<input type="button" onclick="Spry.Widget.TabbedPanels.prototype.showPanel">

 

[Maik]

Die Funktion braucht darin überhaupt nicht aufgerufen werden, sondern lediglich die Klasse TabbedPanelsTab:

<input type="button" class="TabbedPanelsTab" tabindex="0" value="content1">

den Rest übernimmt das Script "vollautomatisch".

Hier habe ich ein funktionstüchtiges Demo entdeckt, dass statt des Buttons das li-Element verwendet: http://mkicle.biz/practice/tabpanel/

 

[chuvak]

Wo soll ich denn die ID´s für die einzelnen Tabs eintragen?
So funktioniert es bei mir nämlich nicht.

 

[Maik]

In dem genannten Beispiel besitzen die Tabs / Panels überhaupt keine ID, sondern werden über den Klassennamen angesprochen.

 

[chuvak]

Komischerweise funktioniert Ihr Beispiel nicht.

<input type="button" class="TabbedPanelsTab" tabindex="0" value="content1">

Es soll ja beim Draufklicken ein Tab geöffnet werden. Müsste ich durch eine ID nicht definieren, WELCHES Tab genau geöffnet wird?

 

[Maik]

Bei mir funktioniert das angepasste Beispiel mit den Buttons ganz ohne IDs einwandfrei.

 

[Maik]

Ansonsten schau dir mal die folgende Einführung an: Adobe Labs - Tabbed Panel Overview