[jquery-ui-tabs] jQuery UI Tabs als Content Element für Contao

[Wangaz]

Bindet die um folgende Funktionalitäten erweiterten jQuery UI Tabs als Content Element in Contao ein:

• Hash wird gemäß des aktuell geöffneten Tabs gesetzt.
• Öffnen eines Tabs wird in der Browser-History gespeichert.
• Tabs können durch Referenzierung des Alias durch jeden Link geöffnet werden (<a href="...#alias">).
• Elemente in der Tab-Navigation, die die Breite der Tab-Navigation überschreiten, können in ein Dropdown-Menü verschoben werden.

Demo: https://europawochelauf.de/organisat...es/sieger.html

GitHub: https://github.com/wangaz/contao-jquery-ui-tabs
Extension Repository: https://contao.org/de/extension-list...y-ui-tabs.html
Packagist: https://packagist.org/packages/wanga...jquery-ui-tabs

Bei Fehlern bitte ein Ticket bei GitHub aufmachen, alle anderen Fragen gerne hier!

[Wangaz]

Demo ergänzt.

[Balthasar]

Hallo,

ist dies das gleiche wie hier?
Standard Aktives Akkordeon-Element mittels Hash-Wert in der URL steuern

Wenn ja, gäbe es noch die Möglichkeit das die Seite nicht zum dem Ankepunkt springt? Also das, das Fenster nicht zu dem Punkt springt sondern nur das Akkordeon öffnet?

Ich hoffe du weist auf was ich hinaus will. Ansonsten habe ich hier das Problem schon als Thread eröffnet.

Standard Bereichsüberschrift eines Akkordeons als Link

Wäre super wenn mal drüber schauen könntest.

[Wangaz]

Nein, diese Erweiterung bindet Tabs ein und kein Akkordeon. Das Problem mit dem "Springen" besteht hier aber auch, also kann ich mir gerne mal anschauen.

[Balthasar]

Ah so, ok. Danke für die Rückmeldung.

Wenn du dir die Sache mit dem "Springen" mal anschauen könntest, wäre ich dir sehr dankbar.

[Wangaz]

Habe ich gemacht - siehe anderes Thema.

[Wangaz]

Ab sofort auch im ER: https://contao.org/de/extension-list...y-ui-tabs.html

[netgroup]

Hi,

gibt es die Möglichkeit, z.B. für Smartphone-Ansicht oder eine bestimmte Breite, die Tabs in Akkordeon umzuwandeln?
Das fände ich echt super.

Vielen Dank und schöne Grüße

Adelaide

[Supermann]

Hallo,

ich habe in der Hoffnung das es in 3.1.5 auch funktioniert, die Tabs installiert. Leider bekomme ich beim speichern der Tabs einen Fehler, gibt es hier jemanden der die Tabs auch in einer älteren Contao Version am laufen hat?

[Wangaz]

gibt es die Möglichkeit, z.B. für Smartphone-Ansicht oder eine bestimmte Breite, die Tabs in Akkordeon umzuwandeln?
Das fände ich echt super.

Möglich ist das natürlich schon, allerdings sieht die HTML-Struktur der beiden Elemente unterschiedlich aus, daher müsste auch diese angepasst werden und es wäre nicht mit einem einfachen Austausch der Initialisierung im JavaScript-Code getan.

[Wangaz]

ich habe in der Hoffnung das es in 3.1.5 auch funktioniert, die Tabs installiert. Leider bekomme ich beim speichern der Tabs einen Fehler, gibt es hier jemanden der die Tabs auch in einer älteren Contao Version am laufen hat?

Wie lautet die Fehlermeldung?

[Cranker]

Hallo,

ich würde gerne die Tabs in Kombination mit Sprungmarken benutzen.
Also z.B. ein Link in der Navigation, der an eine bestimmte Stelle auf einer Seite verweist und gleichzeitig das richtige Tab anzeigt. Ist das auch Möglich?

Danke.
Thorsten

[Wangaz]

Ja, grundsätzlich ließe sich die Erweiterung dahingehend anpassen.

[Cranker]

Hallo Wangaz,

muss dafür die Erweiterung angepasst werden?
Ich dachte es würde reichen im Template einen onClick Event o.ä. hinzuzufügen.

Vielleicht kannst du mir einen Tipp geben, was ich dafür anpassen muss?

Danke
Thorsten

[Wangaz]

Ja, Du musst ermitteln, in welchem Tab der gewünschte Anker vorhanden ist, dann dieses öffnen und zum Anker scrollen.

[mulka]

Ich benutze Contao 3.5.6. (Gerade vor einer Woche eine neue Webseite aufgesetzt.)
In früheren Contao-Versionen hatte ich für Tabs die Erweiterung fry_accessible_tabs benutzt und war sehr zufrieden damit..
Nun wollte ich die Erweiterung jquery-ui-tabs ausprobieren und komme irgendwie damit nicht zurecht. Irgendwie fehlt mir eine Anleitung dazu.

Momentan sieht die Seite so aus (siehe Anhang) und URL http://ruegener-line-dancer.de/ueber-uns.html
Müsste ich nun per CSS (ähnlich wie bei fry_accessible_tabs) alles weitere einrichten?

Sorry, falls die Frage zu blöd ist :-(

[Spooky]

Du hast deine Inhalte so wie es aussieht auf Zwei Tabumschläge aufgeteilt. Du musst es aber so machen:

• Umschlag Anfang
  • Tab 1 Content
• Umschlag Mitte
  • Tab 2 Content
• Umschlag Ende

[Supermann]

Hallo,

ja ich denke das Du da dass einiges im CSS anlegen musst. Ich habe aber gerade noch ein anderes Problem auf der Seite gehabt, als ich einen der Tabs angeklickt habe, hörte es nicht mehr auf Tabs zu regnen!

[Wangaz]

Die Struktur der CE muss wie folgt aussehen:

Tabs (Umschlag Anfang)
Tabs (Umschlag Mitte)
...
Tabs (Umschlag Mitte)
Tabs (Umschlag Ende)

Dann sollte es (hoffentlich) klappen

[mulka]

Ich war einige Zeit nicht hier im Forum, da ich mein Problem anschließend selber gelöst hatte, genau wie in den Beiträgen geschrieben.
Ich musste die richtige Reihenfolge einhalten und anschließend per CSS formatieren.

Nun gefällt es mir. Siehe http://ruegener-line-dancer.de/ueber-uns.html


Ganz herzlichen Dank allen.

[pumukel]

Die Struktur der CE muss wie folgt aussehen:

Tabs (Umschlag Anfang)
Tabs (Umschlag Mitte)
...
Tabs (Umschlag Mitte)
Tabs (Umschlag Ende)

Dann sollte es (hoffentlich) klappen

Hallo Wagnaz

Ich habe auf Empfehlung von spooky das Ding in Contao 3.5.6 - (ob es unter Contao 3.5.14) noch maschiert, weiss ich nicht) installiert. Nun habe auch ich damit so meine Probleme. Warum nicht ein paar Infos mehr zum Gebrauch der Erweiterung. Muss man wirklich via https://europalauf.eu/organisatorisches/sieger.html wieder Stundenlang Glaskugeln lesen. Link von Handbuch geht nach https://github.com/wangaz/contao-jquery-ui-tabs aber keine Anleitung oder Hanbuch zu finden und Link Forum dann nach https://community.contao.org/de/show...t-f%FCr-Contao. Sehr grosse Hilfe. Also verstehe ich dies jetzt nun wieder richtig falsch?

Tabs (Umschlag Anfang)
Content von Tab1
Tabs (Umschlag Mitte)
Content von Tab1
Tabs (Umschlag Mitte)
Content von Tab 3
usw.
Tabs (Umschlag Ende)

Gruss pumukel

[Spooky]

Welche Informationen genau brauchst du denn noch in etwaigen Handbücher? So komplex ist die Extension ja nicht, als dass das notwendig wäre.

[pumukel]

Welche Informationen genau brauchst du denn noch in etwaigen Handbücher? So komplex ist die Extension ja nicht, als dass das notwendig wäre.

Wäre dies:

Die Struktur der CE muss wie folgt aussehen:

Tabs (Umschlag Anfang)
Tabs (Umschlag Mitte)
...
Tabs (Umschlag Mitte)
Tabs (Umschlag Ende)

Dann sollte es (hoffentlich) klappen

z.B in einem Readme dabei gewesen, hätte ich meine Kritik, die Dir wieder sauer aufstösst, gar nicht angebracht. Ich konnte vorallem mit Tabs (Umschlag Mitte) nichts anfangen. Also ist der Spruch mit Handbücher nicht so toll.

jquery-ui-tabs funktioniert für Contao 3.5.13 siehe http://www.gkammermann.ch/contao_351...eite-8-de.html. Ich musste, da ich YAML 4.1.2 (ist eben immer noch super) als CSS Framework verwende, noch die jquery-ui.css (dark.hive) einbinden. Das mit dem Dropdown habe ich noch nicht geschafft.

Contao ist wirklich ein tolles CMS, aber die Dokumentation lässt eben in vielen Bereichen sehr zu wünschen übrig. Das offizielle Contao-Buch (Leo Feyer, Addison Wesley) welches ich besitze, stammt aus dem Jahre 2011!

Einen schönen Abend noch
pumukel

[Spooky]

Contao ist wirklich ein tolles CMS, aber die Dokumentation lässt eben in vielen Bereichen sehr zu wünschen übrig.

Auf die Dokumentation von Extension hat Contao keinen Einfluss.

[iuna123]

Ich war auch sehr dankbar hier die Anleitung zu finden - wusste auch nicht wie ich mit Umschlag Mitte umgehen soll

Schlussendlich aber eben hier gefunden und auch sehr dankbar dafür
Wie habt ihr das für die Mobilversion gelöst?

Da wäre es eigentlich toll, wenn alle Infos untereinander stehen würden.
Nur wüßte ich jetzt ad hoc nicht wie ich das angehen kann.
Wäre also über einen Tipp sehr erfreut
Liebe Grüße
Daniela

[bird]

Hallo Wangaz,

vielen Dank für diese praktische Erweiterung, die unter Contao 3.5.19 problemlos funktioniert.

Ich würde die Tabs gerne dahingehend modifizieren, dass einzelne Wörter in den Überschriften / Tab-Schaltflächen per CSS formatiert werden können. Wie ich gesehen habe, lässt das Feld "Überschrift" bereits die Eingabe von HTML-Code zu, dieser wird in den Tab-Schaltflächen allerdings nicht ausgegeben. Ich vermute, dass an irgendeiner Stelle eine "Normalisierung" der Überschrift stattfindet? Gibt es dafür einen Grund bzw. eine Lösung?

Danke und viele Grüße!

EDIT: Die Anpassung lässt sich relativ leicht durchführen, indem man in der core.js die Zeile

text: that.children('.headline').eq(0).text() 

durch folgende Zeile ersetzt

html: that.children('.headline').eq(0).html() 

[Wangaz]

Vielen Dank für den Hinweis – wird in der nächsten Version geändert :)

[Frankie_C&P]

gibt es die Möglichkeit, z.B. für Smartphone-Ansicht oder eine bestimmte Breite, die Tabs in Akkordeon umzuwandeln?
Das fände ich echt super.

Hallo erstmal,

da ich neu hier im Forum bin stell ich mich erstmal vor:

Frankie, von Beruf Mediengestalter mit Schwerpunkt Frontend-Entwicklung, immer auf der Suche nach zeitsparenden Lösungen.


Ich finde das Plugin sehr gelungen, quasi selbsterklärend und auch recht einfach für Redakteure zu handlen. Nun hat ein Kunde den Wunsch, das Overflow-Dropdown in ein Hamburgermenu umzuwandeln, mit dem aktiven Tab als Text anstatt dem hinterlegten Standard-.dropdown span-Text.

Ich habe selbst schon etwas trial & error betrieben und, um die Zeit effektiv zu nutzen stelle ich jetzt einfach mal die Frage, ob jemand eine ähnliche Umsetzung geplant, bzw. im besten Fall schon umgesetzt hat. Die Frage hierzu ging ja schon mal in die richtige Richtung.

Vielen Dank im Voraus!

Frankie

[EDIT]

Die Contao-Version ist 3.5.17, Plugin-Version ist die 1.1.2, habe ich vergessen zu erwähnen...

[Bitjongleur]

Moin,

gibt es die Möglichkeit das Setzen des aktuell geöffneten Hash zu unterbinden?

Gruß
Karsten

[gm-team]

Ich habe es einfach nicht hinbekommen, den Inhalt des dritten Tabs im dritten Tab anzuzeigen.

Und noch bevor ich den post absenden konnte, habe ich den Fehler entdeckt.
Es ist im Grunde eh klar - doch beim kopieren kann man es leicht übersehen:

Das Element "Tabs (Umschlag Mitte)" benötigt unbedingt einen eindeutigen Alias wenn man es kopiert!

Hoffentlich hilft es zukünftig mal jemandem, denn ich habe jetzt alle möglichen Varianten mit der Struktur versucht, bis ich DARAUF gekommen bin

[Spooky]

https://github.com/wangaz/contao-jquery-ui-tabs/pull/12

[Webstylerin]

Huhu,

habe ein Frage zur Erweiterung.

Und zwar ist es so, dass der Kunde selbst die Inhalte einpflegt. Das geht am schnellsten/fehlerfreisten wenn einfach vorhandene Seiten kopiert und dann die Inhalte angepasst werden.

Nun ist es so, dass kopierte Artikel/Seiten mit Tabs erst mal Amok laufen, siehe Screen anbei. Die Tabs laden sich immer wieder selbst neu...

Das lässt sich beheben wenn die Tab-Elemente (Anfang, Mitte, Ende) einfach ohne Änderunge neu gespeichert werden. Das scheint dem Kunden aber zu kompliziert/zeitraubend und ja, sauber ist das auch nicht.

Wo liegt der Grund? Kann ich den irgendwie umgehen/beheben?

Ich weiß, dass Spooky einen Pull-Request gemacht hat, der auch eingespielt wurde, der irgendwas mit dem Kopieren zu tun hat. Ich kann aber nicht genau raus lesen, ob das der gleiche Fehler ist oder etwas damit zu tun hatte.

Zur Info: Contao 3.5.35 / wangaz/contao-jquery-ui-tabs 1.1.5 via Composer

LG
Nicole

[Bjoern.Mueller]

Hallo.

Ich habe hier gerade ein Problem, dass vermutlich irgendwie mit [jquery-ui-tabs] zusammenhängt.

Bei einer Contao 3.5.35 Installation passiert es immer wenn in der URL ein "?" dabei ist (in meinem Fall z.B. "?step=1" von mp_forms), dass komische Sachen passieren:
http://formtest.ish-immobilien.de/?

Das Einblenden von Blöcken per Javascript passiert dann im Sekundentakt und wenn ich mir Devtools anschaue passiert scheinbar beim [dk_mmenu] irgendwas was ich nicht wirklich deuten kann.

Die Tabs (beim "Kontakt" auf der rechten Seite) funktionieren dann auch nicht mehr.

Sobald ich im Layout jquery-ui-tabs unter den JQuery Einstellungen deaktiviere funktioniert alles ohne Sonderbarkeiten.

Ist mir irgendwie unverständlich was da passiert, weil [jquery-ui-tabs] doch gar nicht mit solchen Variablen in der URL arbeitet, oder?

Jemand ne Idee?

bisdenndann
björn

[bird]

Hallo,

vielen Dank für diese praktische Erweiterung. Gibt es technisch eine Möglichkeit, verschachtelte Tabs direkt über die URL bzw. den Hash zu öffnen?
In einer Contao 4.5 Installation sieht die Struktur der Tabs wie folgt aus:

Umschlag Anfang Thema 1
--> Umschlag Anfang Unterthema 1
--> Umschlag Mitte Unterthema 2
--> Umschlag Ende
Umschlag Mitte Thema 2
--> Umschlag Anfang Unterthema 1
--> Umschlag Mitte Unterthema 2
--> Umschlag Ende
Umschlag Ende

Ich kann über die URL und den Hash die Tabs "Thema 1" und "Thema 2" direkt öffnen. Die Unterthemen werden aber bei einer direkten Anwahl per URL + Hash nur dann angezeigt, wenn zufällig das entsprechende Eltern-Tab geöffnet ist. Es müsste also eine Funktion geben, welche sicherstellt, dass bei Verschachtelung das entsprechende Eltern-Tab geöffnet ist.

In einem zweiten Schritt würde ich diese Verschachtelung gerne noch mit Sprungmarken innerhalb der Tabs erweitern, welche ebenfalls direkt über die URL bzw. den Hash angewählt werden können.

Ich bin für jeden Tipp dankbar!

[bird]

Dieser Beitrag ist mittlerweile ziemlich in die Jahre gekommen und die Erweiterung ist veraltet, dennoch suche ich eine Lösung für das hier beschriebene Problem mit zusätzlichen Parametern in der URL:
https://github.com/wangaz/contao-jqu...-tabs/issues/6

Es scheint durch Parameter in der URL eine Endlosschleife bei der Erstellung der Navigationseinträge in der core.js zu entstehen, welche durch die jQuery UI _super() Funktion getriggert wird. Evtl. hat jemand hierfür irgendwann einmal eine Lösung gefunden?