[tabcontrol]

**spirelli** · 08.06.2012, 14:18

Hello, is it possible to link directly to certain tabs and their content. By default the first panel is visible, but there is a need to link directly to a certain tab. Is this possbile with this extension?

E.g. the link could be www.domain.com/pagename#tab3 (or something like this) would display the content of the third panel, with the third tab being highlighted.

We've got TL 2.7. installed with tabcontrol 1.1.3.

Here the page in question.
http://www.brt.org.uk/donate

**thepixture** · 13.06.2012, 14:01

Bei mir ist das Problem, das beim wechseln zwischen den Tabs keine Animation (Ein-/Ausblendung) abgespielt, sondern direkt gewechselt wird.
Muss ich hier noch weitere Einstellungen vornehmen?

**Vamiris** · 15.06.2012, 14:33

Hallo,

ich wollte die Erweiterungen seit langem mal wieder einbauen, ohne irgendein Ergebnis.

http://btc.lewilew.pl/cms/index.php/...ro-select.html weder eine .js Datei vom Tabcontrol noch ein Aufruf wird in den Quellcode eingebunden.

Kann sich jemand erklären, woran das liegen könnte?

**thepixture** · 15.06.2012, 14:37

Du müsstest auch noch das entsprechende Tab-Inhaltselement anlegen. Dann wird auch das js eingebunden.

Ich geh mal davon aus das sind deine 4 Punkte, die in Tabs gegliedert werden sollen? Dann musst du in dem Tab-Element die 4 Kategorien anlegen.
Und für jeden Inhalt legst du ein Start- und Endelement an, in denen deine Inhalte kommen, so wie beim Accordion.

**Vamiris** · 15.06.2012, 15:01

Ah ok, Danke.

Ich habe nur Tab Panel Anfänge und Enden angelegt, keine Reitergruppe.

Jetzt funktioniert es, danke.

**truni** · 06.07.2012, 07:14

Hallo miteinander, nach längerem Debuggen und Fehler suchen sind wir fündig geworden, dass im aktuellen Contao 2.11.4 und mit tabcontrol 1.3.1 bei unserer Installation die Tabs nie richtig funktionierten, sobald der Alias des Artikels (!) einen Punkt enthält (dies geschieht ja u.U. automatisch von Contao wenn z.B. Artikel dupliziert wurden). Sprich sobald eure Artikel im Stil NAME.XYZ heissen, könnte tabcontrol die Funktionalität verweigern. Ändern wir den Namen und entfernen den Punkt, ist alles wieder paletti … =)

--> Wenn dies nachvollziehbar ist, wäre ein Patch zu erstellen

**garybruckheimer** · 25.07.2012, 16:09

Hallo Community,

ich verzweifle an einer TabControl Extension Installation. Hier ist meine aktuelle Seite wo ich meine zu glauben das es richtig worden installiert ist

http://www.rebotnix.com/hdconnect.html

Installiert ist Contao 2.11 mit der Tabcontrol Version 1.3.1.

Die erforderlichen Mootools werden auch vor dem Tabcontrol.js geladen. Stylesheets habe ich angelegt. Das Problem ist das die Tabs angezeigt werden, jedoch auch der Inhalt in den jeweiligen Reitern.

Es wäre sehr nett wenn mir jemand helfen könnte.

Viele Grüsse
Gary

**christian.barkowsky** · 25.07.2012, 16:15

dein artikel hat die id hdconnect
das tabcontrol script bezieht sich aber auf HDconnect

da könnte der fehler liegen.

**garybruckheimer** · 25.07.2012, 16:27

Hallo christian,

vielen Dank für die schnelle Antwort.

Ich habe jetzt ein einfaches Beispiel aufgebaut.

1) Reiter mit zwei Reiterüberschriften.
- TabControlBegin1
- TabControlBegin2
2) Einen TabControl 1. Pane Start gesetzt
- dort ein Textelement "TabText1"
3) Nach dem Textelement ein TabControl: 1. Pane END

Danach das wieder Reiter Pane Start + Pane End (ohne erneute Reitergruppe).

Das Ergebnis:
http://007direct.rebotnix.com/HDConnect.html

Mich wundert wieso ich TabText1 und TabText2 sehe. Diese müßten doch eigentlich "unsichtbar sein".

Für einen weiteren Tip bedanke ich mich.

VG
Gary

Zitat von christian.barkowsky

dein artikel hat die id hdconnect
das tabcontrol script bezieht sich aber auf HDconnect

da könnte der fehler liegen.

**christian.barkowsky** · 26.07.2012, 12:10

mootools & jquery sind im einsatz ... es muss das moo_jquery_nc template im seitenlayout ausgewählt werden.

**detlevp** · 24.08.2012, 20:48

Hallo Miteinander,

ich habe auf die aktuelle Version von Contao upgedatet. Großen Dank hierfür auch an MacKP - Super.

Einige kleinere Probleme gibt es noch zu lösen. Eines ist das tabcontrol. Seit dem Update wird das Tab richtig dargestellt und manchmal nicht. Während die Tabs auf dieser Seite richtig dargestellt werden, funktionieren sie auf dieser Seite nicht. Ich habe alle Einträge geprüft und beide Seitenquelltexte Schritt für Schritt verglichen. Ich kann einfach keine Unterschiede in der Verwendung des tabcontrol (Reitergruppe und Panel-Angaben) finden. Dieses Problem habe ich auf etliche Seiten - mal geht es, mal nicht. Die Verwendung ist eigentlich immer identisch. Hat hier noch jemand eine Idee?

Vielen Dank und Gruß
Detlev

**detlevp** · 25.08.2012, 07:08

Hallo noch einmal,

Zitat von detlevp

Seit dem Update wird das Tab richtig dargestellt und manchmal nicht. Während die Tabs auf dieser Seite richtig dargestellt werden, funktionieren sie auf dieser Seite nicht. Ich habe alle Einträge geprüft und beide Seitenquelltexte Schritt für Schritt verglichen. Ich kann einfach keine Unterschiede in der Verwendung des tabcontrol (Reitergruppe und Panel-Angaben) finden. Dieses Problem habe ich auf etliche Seiten - mal geht es, mal nicht. Die Verwendung ist eigentlich immer identisch.

Nach längerem debuggen stelle ich fest, dass die Verwendung zwar immer gleich ist, aber die Artikel-ID unterschiedlich angewendet wird. Darauf gestoßen bin ich über den Beitrag #166 - vielen Dank an truni. Nach dem ich die Artikel-ID jeweils nur mit Kleinschreibung und maximal einen "-" versehen habe, werden die Tabs auch richtig dargestellt. Auch Großbuchstaben verhindern die richtige Verwendung. Das muss man einfach nur berücksichtigen.

Gruß Detlev

**fruechtetee** · 27.08.2012, 16:13

Hallo,

ich nutze Contao 2.11.5 und Tabcontrol 1.3.1 und habe das selbe Problem, das die Tabs nicht angezeigt werden bzw. die Inhalte von allen tab unter einandern. Habe schon versucht, adie Tabs neu anzulegen und nicht zu duplizieren - lieder bekomme ich es nicht zum laufen.

die varianten von detlevp und turni habe ich schon erfolglos probiert.
ich nutze jquery und mootools - moo_jquery_nc ist aktiviert.

Hat jemand einen Tipp?

Besten Dank!

**SeDaFo** · 07.09.2012, 09:21

Hallo,

falls es noch aktuell ist, ich nutze ebenfalls tabcontrol und alles hat sehr gut funktioniert (Contao 2.11.5 und tabcontroll 1.3.1). Vor einigen Tagen habe ich bemerkt, daß bei mir ebenfalls die Tabs nicht mehr korrekt angezeigt wurden. Ursache war eine Erweiterung die offenbar Inkompatibel mit tabcontrol ist (in diesem Fall war es der "frontend editor" von Lingo4You)
Nach dem Abschalten hat alles sofort wieder funktioniert. Es ist also zu vermuten, daß die Ursache von Fehlfunktionen die inkompatiblen Erweiterungen untereinander sind.
Falls es vorher mal funktioniert hat, prüft also welche Erweiterung Ihr neu installiert oder aktualisiert habt.

**christian.barkowsky** · 07.09.2012, 10:47

huhu,

hier mal der link zur nächsten version.

https://github.com/christianbarkowsk...rol/tree/1.3.2

kommt in den nächsten tagen ins repo.

**tblumrich** · 18.09.2012, 11:45

Hallo.

Ich sehe bei Beispielen aus deinen Referenzen des öfteren bei den Übergangen zwischen den Tabwechseln (auch beim Autoplay) diese typischen Mootools Transition Effekte... finde diese aber nicht in den Einstellungen.
Implementierst du das noch oder sind das individuelle Anpassungen? Wenn letzteres, kannst du die Anpassungen eventuell kurz erklären? Mir ist das aus den Quelltexten leider irgendwie nicht ersichtlich.

Dankeschön!

Gruß
Thomas

**christian.barkowsky** · 18.09.2012, 12:14

Hey Thomas,

bislang habe ich das immer nachträglich eingebaut.
In der neuen Version (kommt bald - findest du aber schon im git https://github.com/christianbarkowsk...rol/tree/1.3.2) kannst du den fade aktivieren.

Weiter besteht die Mögichkeit - via Hook - ein eigenes JS File zu verwenden.

TabControl Hook --> tabControlJS

**tblumrich** · 18.09.2012, 20:29

Dankeschön Christian.

Weitere Frage, die bei mir gerade auftaucht... es gibt scheinbar keine Möglichkeit den Reitern jeweils eigene Klassen mitzugeben, oder?
Hättest du da eventuelle auch einen Lösungsansatz?

Das einzige was in die Richtung geht zumindest für first, odd und even Klassen war hier:
https://www.contao-community.de/show...t-Alpha-Effekt

Funktioniert scheinbar auch, aber ist natürlich nicht richtig individuell.

Gruß
Thomas

**Kim** · 20.09.2012, 14:51

Kann man es verhindern das der Fade Effekt blitzt?
Ist das ein generelles Problem oder tritt das nur bei mir auf?

Auf dieser Seite sieht der Effekt flüssig aus: http://www.kwr-rathenow.de/

**Chris87** · 20.09.2012, 20:50

Seitdem ich das Update von tabcontrol eingespielt habe (das mit dem Fade Effekt) werden meine Tabs als normale Liste dargestellt und das Seitenlayout ist zerschossen.
Wieso? Was wurde noch geändert und was soll das? Es muss doch abwärtskompatibel bleiben...

Nachtrag:
Die CSS Klassen haben sich geändert von .ce_tabcontrol_tabs in .tabcontrol_tabs.

Trotzdem ist das Layout noch kaputt. Auf den Seiten wo tabcontrol eingesetzt wird ist der Footer in der Hauptspalte. Ich glaube da ist irgendwie ein DIV zu wenig...

Nachtrag:
Wenn ich am Ende des Artikels per HTML zwei </div> einbaue:

HTML-Code:

</div></div>

Dann funktioniert die Darstellung wieder.

**tblumrich** · 21.09.2012, 07:12

Neu ist... das die Reitergruppe auch ein schließendes Element bekommen muss.
Ich hab das dann hinter den letzten schließenden Tag gepackt.

Guck mal in die Konfig deiner Reitergruppe... da gibts jetzt 4 Elemente.

Was das Layout angeht, hat sich bei mir nach dem Update gar nichts verändert... das heißt also, es liegt an deiner CSS und der Auswahl der Selektoren.

Gruß
Thomas

**christian.barkowsky** · 21.09.2012, 08:23

Aktualisierte Beispielseite: http://www.christianbarkowsky.de/contao-tabcontrol.html

**christian.barkowsky** · 21.09.2012, 08:29

Nachtrag:

Jedes TabControl benötigt nun ein ENDE.
Das kann man ganz normal über das Inhaltselement hinzufügen.

Aufbau des TabControls:

Reitergruppe - Start
- hier werden die Teiterüberschriften gesetzt und das Verhalten bestimmt

Panel Anfang
...
Panel Ende

Panel Anfang
...
Panel Ende

Reitergruppe - Ende
- schließt das TabControl ab

**Chris87** · 21.09.2012, 10:06

Vielen Dank für den Hinweis.

**jabo** · 22.09.2012, 10:10

Hallo,

ich nutze Contao 2.11.5 und Tabcontrol 1.3.2 und habe das Problem, das die Bezeichnung der Tabs immer untereinander (zeilenweise) angezeigt werden.
Hat jemand eine Idee für mich ?

Besten Dank!

**andrea$** · 22.09.2012, 10:50

Zitat von christian.barkowsky

Nachtrag:

Jedes TabControl benötigt nun ein ENDE.
Das kann man ganz normal über das Inhaltselement hinzufügen.

Aufbau des TabControls:

Reitergruppe - Start
- hier werden die Teiterüberschriften gesetzt und das Verhalten bestimmt

Panel Anfang
...
Panel Ende

Panel Anfang
...
Panel Ende

Reitergruppe - Ende
- schließt das TabControl ab

So als unbedarfter User hat man ne Menge Fragezeichen im Kopf wie das überhaupt funktionieren soll???

Ich bin so vorgegangen:

- Artikel, Artikel bearbeiten, neues Element
- Reitergruppe Start mit 4 Überschriften, speichern u. schließen
- Neues Element, nach dem Inhaltselement einfügen, Panel Anfang
- Neues Element, nach dem Inhaltselement einfügen, Text
- Neues Element, nach dem Inhaltselement einfügen, Panel Ende
- das ganze 3x wiederholt
- zum Schluß Reitergruppe Ende

Was angezeigt wird:
- eine <ul> mit den 4 Überschriften
- der Text 4x
- anklickbar ist nichts, die Überschriften sind doch die Tabs?

Im Seitenlayout eingebunden:
moo_accordion
moo_mediabox
moo_chosen
moo_analytics
moo_slimbox

Auch wenn ich jetzt die Tabs mit CSS gestalte, sehe ich doch trotzdem noch keine funktionierenden Tabs.

**jubel** · 22.09.2012, 11:05

Zitat von andrea$

Auch wenn ich jetzt die Tabs mit CSS gestalte, sehe ich doch trotzdem noch keine funktionierenden Tabs.

Das Problem hatte ich auch.
Die Lösung steht weiter oben: https://www.contao-community.de/show...l=1#post222922
Die Klassen haben sich geändert!

**andrea$** · 22.09.2012, 15:27

Zitat von jubel

Das Problem hatte ich auch.
Die Lösung steht weiter oben: https://www.contao-community.de/show...l=1#post222922
Die Klassen haben sich geändert!

Wo ist jetzt die Lösung?
Ich kann die Tabs gestalten aber das Script funktioniert nicht.

christian.barkowsky
mootools & jquery sind im einsatz ... es muss das moo_jquery_nc template im seitenlayout ausgewählt werden.

Übers RE finde ich das nicht.

**jubel** · 22.09.2012, 15:56

Hallo Christian,

Zitat von christian.barkowsky

Aktualisierte Beispielseite: http://www.christianbarkowsky.de/contao-tabcontrol.html

Das auf dieser Seite angebotene CSS-Gerüst enthält noch die alten Klassen:

Code:

.ce_tabcontrol_tabs {}
.ce_tabcontrol_tabs ul, .ce_tabcontrol_tabs li {}
.ce_tabcontrol_tabs li {}
.ce_tabcontrol_tabs li.tabs {}
.ce_tabcontrol_tabs li.selected {}
.ce_tabcontrol_pane {}
.ce_tabcontrol_pane .panes {}

Der Sourcecode der Beispiele hat jedoch (wie meine Installationen jetzt auch) die Klasse

Code:

.tabcontrol_tabs

(ohne ce_ davor).
tabcontrol.jpg

@andrea$

Ich kann die Tabs gestalten aber das Script funktioniert nicht.

Haste mal 'nen Link?

**andrea$** · 22.09.2012, 19:19

Zitat von jubel

Hallo Christian,

Das auf dieser Seite angebotene CSS-Gerüst enthält noch die alten Klassen:

Code:

.ce_tabcontrol_tabs {}
.ce_tabcontrol_tabs ul, .ce_tabcontrol_tabs li {}
.ce_tabcontrol_tabs li {}
.ce_tabcontrol_tabs li.tabs {}
.ce_tabcontrol_tabs li.selected {}
.ce_tabcontrol_pane {}
.ce_tabcontrol_pane .panes {}

Der Sourcecode der Beispiele hat jedoch (wie meine Installationen jetzt auch) die Klasse

Code:

.tabcontrol_tabs

(ohne ce_ davor).
tabcontrol.jpg

na super! die habe ich in meine css übernommen.

arbeit lokal u.kein Link vorhanden.

Edit: mitlerweile funktionieren die Tabs! Einfaden geht nicht!

**andrea$** · 24.09.2012, 09:29

Zitat von christian.barkowsky

Hey Thomas,

bislang habe ich das immer nachträglich eingebaut.
In der neuen Version (kommt bald - findest du aber schon im git https://github.com/christianbarkowsk...rol/tree/1.3.2) kannst du den fade aktivieren.

ist bei mir aktiviert! Warum funktioniert es dann nicht?

**christian.barkowsky** · 24.09.2012, 10:00

@Andreas ... am besten du läßt mich mal auf dein System gucken.

**wunscherfueller** · 24.09.2012, 12:47

Ich wollte das tabcontrol nun auch einsetzen.
Leider scheitert das daran, dass ich keine vernünftige Möglichkeit für ein Noscript-Fallback finde.
Vielleicht habe ich da etwas übersehen?

**christian.barkowsky** · 24.09.2012, 13:00

@wunscherfueller ... right ... nen vernünftigen Noscript-Fallback gibt es noch nicht. ABER ohne JS werden zumindest alle panes angezeigt.

**andrea$** · 24.09.2012, 13:12

Zitat von christian.barkowsky

@Andreas ... am besten du läßt mich mal auf dein System gucken.

geht leider nicht! Die Seite ist zwar jetzt online aber passwortgeschützt.
Was würdest du dir anschauen wollen? Den Quelltext? Die Einstellung fürs Seitlayout habe ich mal als Screenshot angehangen. Auch wenn ich "jQuery verwenden" aktiviere funktioniert der Effekt nicht.

moo_jquery_nc ist aktiviert

**christian.barkowsky** · 24.09.2012, 13:22

@andrea$ ... probiere mal html5 ... mit jquery hat das NIX zu tun.

**wunscherfueller** · 24.09.2012, 13:48

Zitat von christian.barkowsky

@wunscherfueller ... right ... nen vernünftigen Noscript-Fallback gibt es noch nicht. ABER ohne JS werden zumindest alle panes angezeigt.

Schade.
Eine Lösung könnte sein, die Liste für die Reiter per Javascript reinzuschreiben.
Und als Noscript-Lösung die Liste für die Reiter nochmal in den noscript-Tag - hier dann aber mit Links auf den Inhalt der Tab-Panels.

**andrea$** · 24.09.2012, 22:13

Zitat von christian.barkowsky

@andrea$ ... probiere mal html5 ... mit jquery hat das NIX zu tun.

Danke Christian, mit html5 funktionierts aber das Layout ist erstmal futsch weil die Klassen und IDs anders benannt werden.
Also tabcontrol funktioniert nur mit html5? Ich möchte ganz bewußt kein html5 einsetzen. Wäre schade wenn das so ist. Gibt es eine Alternative zu tabcontrol. Oder muß ich ganz auf jQuery umsteigen u. da solch eine Erweiterung suchen?

html5: div id="tabcontrol_21" class="ce_tabcontrol block">
xhtml: <div class="ce_tabcontrol_tabs block">

xhtml: <div class="ce_tabcontrol_pane block">
html5: <div class="tabcontrol_panes block">