Tab-Liste

Eine Tabliste stellt mehrere Inhalte übersichtlich über horizontale Tabs dar und dient als Container für die einzelnen Tabs. Eine Tabliste wird über die Konstruktorfunktion Alvine.Package.UI.Dialog.TabList() erstellt.

tablist = new Alvine.Package.UI.Dialog.TabList(options);

Über den Parameter options kann folgender Wert definiert werden:

Schlüssel	Beschreibung	Default	Beispiel
id	ID der Tabliste	zufällige ID	myId

Das nachfolgende Beispiel erstellt eine Tabliste und fügt drei Tabs hinzu.

tablist = new Alvine.Package.UI.Dialog.TabList();
tab1 = new Alvine.Package.UI.Dialog.Tab('Tab1', 'Content ...');
tab2 = new Alvine.Package.UI.Dialog.Tab('Tab2', 'Content ...');
tab3 = new Alvine.Package.UI.Dialog.Tab('Tab2', 'Content ...', {'close':true});
tablist.addTab(tab1);
tablist.addTab(tab2);
tablist.addTab(tab3);

Das Ergebnis dieser Anweisungen sieht folgendermaßen aus:

Mit Hilfe von TabList.addTab(tab) kann ein Tab hinzugefügt werden. Über TabList.removeTab(tab) können Tabs wieder entfernt werden. Als Argument kann entweder ein Tab-Objekt oder der Index des Tabs angegeben werden. Im folgenden Beispiel wird der erste Tab und der Tab mit dem Objekt tab2 entfernt.

tablist.removeTab(0);
tablist.removeTab(tab2);

Eventbearbeitung

TabList.updateLocation

Mit dem Eventhandler TabList.updateLocation wird die ID des Tabs im Kontextargument tab gesetzt.

Über die Methode getInstanceFromDataset wird eine Instance von einem Alvine.DOM.Dataset zurück geliefert.

json = {
    "options": {},
    "tabs":[
       {
         "name": "Alvine.Package.UI.Dialog.Tab",
         "dataset": {
             "options": {},
             "label": "Tab 1",
             "content":
                 {
                     "name": "Alvine.Package.UI.Dialog.Blockquote",
                     "dataset": {
                         "text": "Lorem ipsum dolor sit amet, ...",
                         "options": {}
                     }
                 }
         }
     },
     {
         "name": "Alvine.Package.UI.Dialog.Tab",
         "dataset": {
             "options": {},
             "label": "Tab 2",
             "content":
                 {
                     "name": "Alvine.Package.UI.Dialog.Blockquote",
                     "dataset": {
                         "text": "TEST",
                         "options": {}
                     }
                 }
         }
     }
    ]
};

tabList = new Alvine.Package.UI.Dialog.TabList.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

Tabs

Tabs werden über die Konstruktorfunktion Alvine.Package.UI.Dialog.Tab(label, content, options) erstellt und über TabList.addTab(tab) einer Tabliste hinzugefügt. Ein Tab besteht dabei aus einem Label und einem Inhalt. Als Inhalte können reine Zeichenketten oder Objekte vom Typ Control verwendet werden.

tab = new Alvine.Package.UI.Dialog.Tab('Tab1', 'Content ...', options);

Über den Parameter options können folgende Werte definiert werden:

Schlüssel	Beschreibung	Default	Beispiel
class	Klasse des Tab-Labels	nav-link	myclass
close	Wenn true, dann wird ein Icon zum Schließen eingeblendet	false	true
id	ID des Tabs	zufällige ID	myID

Über die Methode getInstanceFromDataset wird eine Instance von einem Alvine.DOM.Dataset zurück geliefert.

json = {
        "options": {},
        "label": "Tab 1",
        "content": {
                     "name": "Alvine.Package.UI.Dialog.Blockquote",
                     "dataset": {
                         "text": "Lorem ipsum dolor sit amet, ...",
                         "options": {}
                     }
        }
}
tab = new Alvine.Package.UI.Dialog.Tab.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

Eventbearbeitung

Werden Tabs hinzugefügt oder entfernt, so werden auch alle Eventhandler die an den Tabs hängen gelöscht. Deshalb ist es wichtig die Eventhandler nicht an die Tabs zu binden, sondern an den View und über den Filter

jQuery('#viewid').on('shown.bs.tab', '[href="#tab1"]' ,function () {
  // ...
});