8.6.1      div

Das HTML-Element div steht für einen Bereich. Sie können mit div Bereiche im Frontend zusammenfassen und per CSS formatieren.

Wenn Sie im Formular Inhalt oder Einleitung die Nummer 3 anklicken, können Sie bei div ein Markup, eine CSS-Klasse, vergeben. Dann können Sie anschließend per CSS entsprechend formatieren. Geben Sie beispielsweise im Markup »mein_ende« ein, erhalten Sie im Quellcode des Frontends diese Ausgabe:

8.6.2      Icon

Wählen Sie den Feldtyp Icon aus, haben Sie die Möglichkeit, ein Icon auszuwählen, mit dem Sie Ihr Frontend gestalten können.

Die Icons selber finden Sie im Joomla!-Root-Verzeichnis unter:

[ /media/system/images/

8.6.3      Tabs

Natürlich können Sie ein Formular auch als Tab-Ansicht abbilden. Wichtig ist hier die Auswahl Auftreten. Der Tab-Block beginnt stets mit dem Start und endet mit dem Ende. Dazwischen kommen beliebig viele Panels.

Bild 8.30: Tab-Ansicht

Der Start-Tab leitet nicht nur den Tab-Block ein, sondern ist auch gleich der erste Tab. Darunter kommen so viele Felder, wie Sie möchten. Dem nächsten Tab weisen Sie dann ein Panel zu und legen auch hier wieder so viele Felder an, wie Sie möchten. Wenn Sie weitere Tabs wünschen, dann geben Sie ab jetzt jedem Tab ein Panel im Aufkommen. Wollen Sie den Block beenden, setzen Sie am Ende ein Tab mit dem Aufkommen »Ende«. Sie können vor oder nach dem Tab-Block natürlich beliebig viele Felder legen.

In Bezeichnung tragen Sie die Tab-Beschriftung ein. Zum Standard Wert kann ich Ihnen leider nichts sagen. Sie können die Felder in einem Tab auch mit einer Gruppenbezeichnung belegen. Das hat aber erst dann Einfluss, wenn Sie mehrere Tab-Blöcke definieren. Ein paar Beispiele zu den Tabs:

Bild 8.11: Beispiele mit Tabs.

Tab 1 und Tab A haben jeweils Start im Auftreten ausgewählt. Die beiden Felder Tab END wurde entsprechend das Ende zugewiesen. Die Tabs dazwischen erhalten jeweils ein Panel. Wenn Sie das so speichern und zur Anzeige bringen, stehen alle Tabs in einer Reihe, und bei den Feldern entsteht ein scheinbares Durcheinander.

Feld A und Feld B wechseln die Tabs entsprechend durch, Feld C und Feld D tun das zwar auch, aber die Felder der zweiten Tab-Reihe stehen direkt unter den Feldern der ersten Tab-Reihe und wechseln erst, wenn die zugehörigen Tabs angeklickt werden. Solange Sie nicht auf Tab B klicken, steht in der zweiten Reihe immer Feld C.

Bild 8,12: Verwirrendes Tab-Verhalten

Falls Sie ein solches Szenario bauen möchten, müssen Sie einen klaren Kopf bewahren, da schnell der Überblick verloren gehen kann.

Wenn Sie das erste Tab END löschen – also zwischen Tab 2 und Tab A –, aber Tab A weiterhin als Start definieren, dann bekommen Sie eine Variante vom obigen Effekt. In Tab 1 und Tab 2 stehen jetzt nur noch die zugewiesenen Felder. In Tab A und Tab B bleibt aber das letzte Feld des ersten Blocks – also Feld B – stehen:

Bild 8.13: Verwirrung, Teil 2

Fügen wir das erste Tab END wieder ein und vergeben wir nun unseren zwei TabBlöcken Gruppenbezeichnungen. Dazu editieren Sie bitte die einzelnen Tabs und weisen dem oberen Tab Gruppe_1 zu. Sie können natürlich auch fantasievollere Namen nehmen. Wichtig ist aber, dass Sie keine Leerzeichen schreiben. Nehmen Sie stattdessen Unterstriche oder Bindestriche.

Es reicht bereits, den ersten Block mit einer Gruppenbezeichnung zu belegen, um unsere Tabs in zwei Reihen zu sehen:

Bild 8.14: Tabs-Blöcke untereinander

Wenn Sie nun wieder das erste Tab END entfernen und speichern, haben Sie den Effekt, dass der erste Tab allein angezeigt wird mit seinem zugewiesenen Feld, und beim Anklicken von Tab 2 wird der zweite Tab-Block sichtbar:

Bild 8.15: Der zweite Block im zweiten Tab

Wenn Sie mehr als zwei Tab-Blöcke erstellen möchten, arbeiten Sie mit mehreren unterschiedlichen Gruppenbezeichnern, für jeden Block einen eigenen.