Mit Hilfe der Tabulator-Makros lassen sich Tabulator-Zeilen erstellen. Wird ein Tabulator angeklickt, wird derzugehörige Bereich eingeblendet und anderen Tabulatoren zugeordnete Bereiche werden ausgeblendet.

Einfache Anwendung

#INCLUDE Tabs.inc

{{TabSelectorsTop| myTab | Line VMargin }}
{{TabLabel| Label: }}
{{TabSel| tab0 }}
{{TabSelDefault| tab1 }}
{{TabSel| tab2 }}
{{TabSelDisabled| tab3 }}
{{EndTabSelectors}}


{{TabBoxes| myTab }}

box 0

{{NextTabBox}}

box 1

{{NextTabBox}}

box 2

{{NextTabBox}}

box 3

{{EndTabBoxes}}

So sieht es aus:

• Label:
• tab0
• tab1
• tab2
• tab3

Die Tabulator-Zeile wird durch die Makros zwischen TabSelectorsTop oder TabSelectorsBottom und EndTabSelectors definiert. Die zugehörige Gruppe von TabBoxen muss zwischen den Makros TabBoxes und EndTabBoxes stehen. Die Tabulator-Zeile und die zugehörigen Boxen müssen die selbe ID haben, im Beispiel myTab.

Mit den Angaben TabSelectorsTop wird die Tabulator-Zeile so formatiert, wie sie oberhalb der Boxen steht mit TabSelectorsBottom entspricht die Formatierung einer Zeile unterhalb der Boxen. Mit Line und VMargin, das sind CSS-Klassen, kann das Aussehen der Tabulator-Zeile beeinflusst werden. Anstatt TabSelectorsTop und TabSelectorsBottom kann auch einfach TabSelectors verwendet werden und mit einem der CSS-Klassen Top oder Bottom die Formatierung gesteuert werden (oder mit einer anderen, selbst definierten Klasse).

Syntax

{{TabSelectorsTop| ID | TabKlassen }}
{{TabSelectorsBottom| ID | TabKlassen }}
{{TabSelectors| ID | Klassen }}

{{TabLabel| Text | LabelID}}

{{TabSel| TabText | TabID }}
{{TabSelDefault| TabText | TabID }}
{{TabSelDisabled| TabText | TabID }}

{{TabSelButton| Text | ButtonID | ButtonKlassen }}
{{TabSelButtonDisabled| Text | ButtonID | ButtonKlassen }}

{{EndTabSelectors}}

ID

Jede Tabulator-Zeile mit zugehörigen Boxen muss eine eigene eindeutige ID haben. Über diese ID werden sie einander zugeordnet, egal wo auf der Seite sie stehen.

TabID: (optional)

Einem Tab kann eine HTML-id zugeordnet werden, damit er über CSS oder JavaScript individuell angesprochen werden kann. In der Regel ist das nicht nötig, da er auch über die Tabs-Funktion Tabs.GetTabDomObj() angesprochen werden kann.

LabelID: (optional)

Einem Label kann eine HTML-id zugeordnet werden, damit er über CSS oder JavaScript individuell angesprochen werden kann.

ButtonID

Jeder Button muss eine eigene eindeutige ID haben. Über diese HTML-id kann er per JavaScript angesprochen werden.

TabText

Beschriftung eines Tabulators.

Text

Label-Text oder Button-Beschriftung.

TabKlassen: (optional)

CSS-Klassen, die das Aussehen der Tabulator-Zeile steuern:

• Top/Bottom: Position der Zeile bezüglich der Boxen. Bestimmt, ob die Linie und die Tab-Markierung unten oder oben am Tab stehen. Bei Top steht die Zeile oberhalb der Boxen, die Linie wird unten an der Zeile gezeichnet und die Markierungen oberhalb der Tabs.
• Line: Zeichnet die Linie uner- bzw. oberhalb der Tabulator-Zeile.
• VMargin: Macht einen Abstand zwischen der Tabulator-Zeile und der Umgebung.
• Weitere eigene Klassen dürfen hier aufgeführt werden.

ButtonKlassen: (optional)

Eigene Klassen für Buttons.

{{TabBoxes| ID | Indizes }}
{{NextTabBox| Indizes }}
{{EndTabBoxes}}

ID

Jede Tabulator-Zeile mit zugehörigen Boxen muss eine eigene eindeutige ID haben. Über diese ID werden sie einander zugeordnet, egal wo auf der Seite sie stehen. Einzelne Boxen brauchen keine ID, da sie über die Funktion Tabs.GetBoxDomObj() angesprochen werden können.

Indizes: (optional)

Mit einer Liste von durch Kommas getrennten Indizes kann gesteuert werden, bei welchen Tabulatoren die Box angezeigt werden soll. Standardmässig ist die erste Box mit dem ersten Tabulator verbunden usw. Dies kann über die Indizes geändert werden. Eine Box kann somit mehreren Tabs zugeordnet sein und wird bei der Selektion einer dieser Tabs angezeigt. Es können mehrer Boxen gleichzeitig angezeigt werden. Der erste Tab hat den Index 0.

Funktionsprinzip

Es wird eine Gruppe von TabBox Bereichen definiert, von denen üblicherweise zu einer Zeit jeweils einer angezeigt werden soll. Mit einer Gruppe von Tabulator-ähnlichen TabSelectors kann der Anwender steuern, welche Bereiche er sehen will.

• Es können beliebig viele TabBox Bereiche definiert werden.
• TabBox Bereiche können beliebig viel und beliebigen Text, Grafiken usw. enthalten.
• Die TabBox Bereiche müssen hintereinander definiert werden und durch die entsprechenden Makros eingeschlossen werden.
• Es können beliebig viele TabBox/TabSelectors Gruppen auf einer Seite definiert werden. Jede Gruppe benötigt eine eindeutige ID, welche die Zuordnung von TabSelectors zu TabBoxes festlegt.
• In der Zeile mit den Tabulatoren können auch Labels und Buttons angezeigt werden.
• Mit TabSelDefault kann der Tabulator bestimmt werden, der defaultmässig selektiert werden soll. Ohne diese Makro ist der erste Tabulator defaultmässig selektiert.
• Die ganze Logik wird im Hintergrund mit JavaScript automatisch erledigt. Dazu muss nur Tabs.inc includet werden.
• Wenn JavaScript deaktiviert ist, werden alle Boxen untereinander angezeigt und die Tab-Teile ist ausgegraut.
• Die Steuerung kann auch über JavaScript erfolgen. Die Aktionen von Buttons müssen über JavaScript programmiert werden.

Steuerung per JavaScript

Tabs.Select( id, ix );
Tabs.Reset( id );
Tabs.SelectNext( id, wrap );
Tabs.SelectPrev( id, wrap );

var ix = Tabs.GetCurrent( id );
var ix = Tabs.GetDefault( id );
var num = Tabs.GetNTabs( id );
var num = Tabs.GetNBoxes( id );

var boxTab = Tabs.FindBoxTab( name );
var tabDomObj = Tabs.GetTabDomObj( id, ix );
var boxDomObj = Tabs.GetBoxDomObj( id, ix );
var tabData = Tabs.GetTabData( id, ix );
var boxData = Tabs.GetBoxData( id, ix );

Tabs.SetText( id, ix, text );
var text = Tabs.GetText( id, ix );

if (Tabs.IsSelected( id, ix )) ...
if (Tabs.IsEnabled( id, ix )) ...
if (Tabs.IsBoxVisible( id, ix )) ...
Tabs.SetEnabled( id, ix, enabled );
Tabs.SetEnabled( id, -1, enabled );
Tabs.SetEnabled( null, -1, enabled );
Tabs.SetEnabled( id );
var enabled = Tabs.ToggleEnabled( id, ix );

Tabs.AddSelectHandler( id, func( BoxTab ) );
Tabs.RemoveSelectHandler( id, func( BoxTab ) );
Tabs.AddVisiChangeHandler( boxChildDomObj, func( BoxData ) );
Tabs.RemoveVisiChangeHandler( boxChildDomObj, func( BoxData ) );

var boxData = Tabs.FindBoxDataByChildDomObj( domObj );
var boxData = Tabs.FindBoxDataByDomObj( boxDataDomObj );

var buttonData = Tabs.FindButtonData( id, button );
var domObj = Tabs.GetButtonDomObj( id, button );
var buttonId = Tabs.GetButtonId( id, button );
var ix = Tabs.GetButtonIndex( id, buttonId );

if (Tabs.IsButtonEnabled( id, button )) ...
Tabs.SetButtonEnabled( id, button, enabled );
Tabs.SetButtonEnabled( buttonData, enabled );
Tabs.SetButtonEnabled( null, -1, enabled );
Tabs.SetButtonEnabled( id, -1, enabled );
Tabs.SetButtonEnabled( );
var enabled = Tabs.ToggleButtonEnabled( id, button );
var enabled = Tabs.ToggleButtonEnabled( buttonData );

var text = Tabs.GetButtonText( id, button );
var text = Tabs.GetButtonText( buttonData );
Tabs.SetButtonText( id, button, text );
Tabs.SetButtonText( buttonData, text );

Tabs.AddButtonClickHandler( id, button, func( ButtonData, xEvent ) );
Tabs.AddButtonClickHandler( buttonData, func( ButtonData, xEvent ) );
Tabs.AddButtonClickHandler( null, -1, func( ButtonData, xEvent ) );

Tabs.RemoveButtonClickHandler( id, button, func( ButtonData, xEvent ) );
Tabs.RemoveButtonClickHandler( buttonData, func( ButtonData, xEvent ) );
Tabs.RemoveButtonClickHandler( null, -1, func( ButtonData, xEvent ) );

Tabs

ist ein globales Objekt, über welches alle TabSelectors und TabBoxes angesprochen werden können.

id

ist die ID einer Tabulator-Zeile oder ein BoxTab-Objekt, wie es von der Klasse Tabs verwaltet wird.

ix

ist die Nummer des zu selektierenden Tabulators oder einer Box. Der erste Tabulator bzw. die erste Box hat die Nummer 0.

buttonData

Ein ButtonData-Objekt, welches zum Beispiel von einem ButtonClickHandler stammt.

button

Button Index oder HTML-id des Buttons. Der erste Button hat den Index 0. Wenn Buttons keine Id haben, können sie über den Index gefunden werden.

enabled

Boolean. Gibt an, ob das Element auf Eingaben reagieren soll (true) oder nicht (false). Dieser Zustand wird optisch entsprechend angezeigt.

Tabs-Objekte

Alle Memebers der folgenden Klassen sind read only und dürfen nur über Tabs-Funktion geändert werden. Auf private Memebers darf nicht zugegriffen werden.

Tabs = {
  BoxTabList: Array of BoxTab (private)
  IsInit: boolean
}

BoxTab = {
  Name: String
  TabContainer: TabContainer
  BoxContainer: BoxContainer
  ButtonDataList: Array of ButtonData
  CurrentTab: Integer
  DefaultTab: Integer
}

TabContainer = {
  DomObj: DomObject
  TabDataList: Array of TabData
}

BoxContainer = {
  DomObj: DomObject
  BoxDataList: Array of BoxData
}

TabData = {
  BoxTab: BoxTab
  DomObj: DomObject
  Index: Integer
  IsSelected: Boolean
}

BoxData = {
  BoxTab: BoxTab
  DomObj: DomObject
  Indexes: Number or Array of Number
  IsVisible: Boolean
}

ButtonData = {
  BoxTab: BoxTab
  DomObj: DomObject
  Id: String (optional)
  Index: Integer
  IsEnabled: Boolean
}

Anwendung

Die folgenden Zeilen zeigen die Anwendung einiger obiger Funktionen:

• Label:
• tab0
• tab1
• tab2

* [javascript:Tabs.Select('myTab',2)|Tab2 selektieren]
* [javascript:Tabs.SelectNext('myTab')|Nächsten Tab selektieren]
* [javascript:alert('Current = ' + Tabs.GetCurrent('myTab'))|GetCurrent]
* [javascript:alert('NTabs = ' + Tabs.GetNTabs('myTab'))|GetNTabs]
* [javascript:alert('Current Tab Text = ' + Tabs.GetText('myTab',Tabs.GetCurrent('myTab')))|Current Tab Text]
* [javascript:alert('Default Tab Text = ' + Tabs.GetText('myTab',Tabs.GetDefault('myTab')))|Default Tab Text]
* [javascript:ChangeAllTabTexts()|Alle Tab Texte ändern]

<jscript>
function ChangeAllTabTexts() {
  var nTabs = Tabs.GetNTabs( 'myTab' );
  for (var i = 0; i < nTabs; i++) {
    Tabs.SetText( 'myTab', i, 'TAB-' + i );
  }
}
</jscript>

sieht so aus:

• Tab2 selektieren
• Nächsten Tab selektieren
• GetCurrent
• GetNTabs
• Current Tab Text
• Default Tab Text
• Alle Tab Texte ändern

Anwendung mit Buttons

In der Tabulator-Zeile können auch Buttons mit hinterlegten JavaScript Funktionen definiert werden. Diese Buttons können aktiviert und deaktiviert werden. Angesprochen werden diese Buttons über ihre HTML-id oder den Index. Der erste Button in einer Tab-Zeile hat den Index 0. Damit ein Button auf einen Klick reagiert, muss ihm ein Event-Handler zugewiesen werden. Das folgende Beispiel zeigt wie das funktioniert:

• Label:
• On
• Next
• Prev
• Tab On
• tab0
• tab1
• tab2

{{TabSelectorsTop| TabButtonDemo | Line VMargin}}  
{{TabLabel| Label: }}  
{{TabSelButton| On | OnOffButton }}  
{{TabSelButtonDisabled| Next | NextButton }}  
{{TabSelButtonDisabled| Prev | PrevButton }}  
{{TabSelButton| Tab On | OnOffTabButton }}  
{{TabSel| tab0 }}
{{TabSel| tab1 }}
{{TabSelDisabled| tab2 }}
{{EndTabSelectors}}

<jscript>

xOnDomReady( 
  function() {
    var boxTabName = 'TabButtonDemo';
    Tabs.AddButtonClickHandler( boxTabName, 'OnOffButton',
      function( buttonData ) {
        var enabled = Tabs.ToggleButtonEnabled( buttonData.BoxTab, 'NextButton' );
                      Tabs.ToggleButtonEnabled( buttonData.BoxTab, 'PrevButton' );
        Tabs.SetButtonText( buttonData, enabled ? 'Off' : 'On' );
      }
    );
    Tabs.AddButtonClickHandler( boxTabName, 'NextButton', 
      function( buttonData ) {
        Tabs.SelectNext( buttonData.BoxTab );
      }
    );
    Tabs.AddButtonClickHandler( boxTabName, 'PrevButton', 
      function( buttonData ) {
        Tabs.SelectPrev( buttonData.BoxTab );
      }
    );
    Tabs.AddButtonClickHandler( boxTabName, 'OnOffTabButton', 
      function( buttonData ) {
        var enabled = Tabs.ToggleEnabled( buttonData.BoxTab, 2 );
        Tabs.SetButtonText( buttonData, enabled ? 'Tab Off' : 'Tab On' );
      }
    );
  } 
);

</jscript>

{{TabBoxes|TabButtonDemo}}

box 0

{{NextTabBox}}

box 1

{{NextTabBox}}

box 2

{{EndTabBoxes}}