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:

Formular-Tab

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 () {
  // ...
});