[ma_accessibleTabs] Mootools Accessible Tabs

**FloydThreepwood** · 28.03.2010, 13:51

Hallo,

aufgrund der freundlichen Anfragen von MackP und Sebastian habe ich eine kleine Extension für meine MooTools-Tabs Klasse geschrieben. Die Bedienung ist jetzt doch dem Accordeon Element nachempfunden und sollte demnach recht selbsterklärend sein. GEtestet habe ich ab TL 2.8.1, ältere Versionen dürften aber keine Probleme haben.

Sollten keine ernsthaften Fehler auftauchen, werde ich die Extension in einer Woche in das Repository stellen.

Viel Spaß beim testen!

MFG Jan

**MacKP** · 28.03.2010, 14:10

Hallo FloydThreepwood,
super!
Mehr kann ich da nicht sagen :-)
Ich freu mich total. Werde das die nächsten Tage direkt mal ausprobieren.

Viele Grüße

**Thomas** · 28.03.2010, 15:50

Liegt die Erweiterung im Rep.?

Wenn nicht, währen ein paar wenige Infos dazu hilfreich.

**Toflar** · 28.03.2010, 15:56

Zitat von Thomas

Liegt die Erweiterung im Rep.?

Wenn nicht, währen ein paar wenige Infos dazu hilfreich.

Gerade Mods sollten doch die Augen ein bisschen mehr öffnen, oder?

**FloydThreepwood** · 28.03.2010, 16:38

steht ja oben, dass die Version erstmal auf Fehler getestet werden könnte, bevor ich sie außerhalb des Forums/meines Supportbereiches veröffentlichen möchte.

Zur Funktion:

In dem Vorgängerthread habe ich bereits ausgeführt, dass es sich um eine MooTools-Klasse nach dem Vorbild von Dirk Ginaders Accessible Tabs handelt. Darüber hinaus steht in dem BlogPost bereits, welches Markup zu erwarten ist und was die Optionen machen.

Neu ist jetzt nur ein Inhaltselement, welches funktional äquivalent zum Akkordeon arbeitet und ich ma_accessibleTabs getauft habe.

Fragen? Wünsche? Her damit!

***lucina*** · 28.03.2010, 19:17

Nö, außer dass Du mir damit zuvorgekommen bist ... tut prima, soweit ich das sehe. (2.81, 2,76)

LG, Carolina.

**MacKP** · 29.03.2010, 09:00

Hallo FloydThreepwood,
direkt ein paar Anmerkungen von mir:

ce_accessibleTabs_head fehlt in Zeile 22 das > am Ende (div ist nicht geschlossen).

Die Experteneinstellungen haben noch keine Auswirkung (z.B. ist die WrapperKlasse noch fest im Template geschrieben).

Das Umgebene Div hat bisher nur tabsID als Klasse. Schön (oder auch nochtwendig) ist da doch auch eine feste Klasse um das passend zu Formatieren oder? Sehr schön ist ja schon das automatische Ansprechen per JS dieser schon vergebenen Klasse.

Ich weiß nicht ob es sinnvoll ist, aber könnte man den JS-Code nicht im Header unterbringen? Sieht immer ordentlicher aus finde ich *g*

Ich würde mir Wünschen, wenn man die Experten Einstellungne in den Systemeinstellungen vornehmen könnte. Sozusagen als default und dann in den jeweiligen Elementen nur noch den Effekt einstellen muss/kann.

Dann noch zum Handling:
An sich schon mal ein sehr guter Ansatz. Ich würde mir da noch ein Zusätzliches Content Element Wünschen: Accessible Tabs Set (oder so).
Wo man die Grundeinstellungen vornimmt und dann noch auswhält wie viele Tabs man erstellen möchte (2-10 oder so). Und beim Speichern wird dann direkt ein Grundgerüsst von head, break und stop erstellt passend zur Anzahl der Tabs.
Das wäre das Optimum an Bedienbarkeit glaube ich, denn so ist es doch schon recht auswändig ein paar Tabs zu erstellen.

Ich glaub das war es erst einmal. Reicht ja auch *g*

Ich hoffe du nimmst mir die Anmerkungen nicht krum...

Viele Grüße

**FloydThreepwood** · 29.03.2010, 09:22

Hallo MacKP,

Danke für die Anmerkungen, ich werde mich heute Abend drum kümmern.

Zitat von MacKP

Die Experteneinstellungen haben noch keine Auswirkung (z.B. ist die WrapperKlasse noch fest im Template geschrieben).

Hmmm, das ist in der Tat ein schwerwiegender Fehler. Aber fest geschrieben ist im Template nichts, allerdings im Datenbanksatz stehen Defaults.

Zitat von MacKP

Das Umgebene Div hat bisher nur tabsID als Klasse. Schön (oder auch nochtwendig) ist da doch auch eine feste Klasse um das passend zu Formatieren oder? Sehr schön ist ja schon das automatische Ansprechen per JS dieser schon vergebenen Klasse.

Ich arbeite so gut wie ger nicht mit dem Framework, gibt es da noch Besonderheiten?

Zitat von MacKP

Ich weiß nicht ob es sinnvoll ist, aber könnte man den JS-Code nicht im Header unterbringen? Sieht immer ordentlicher aus finde ich *g*

Besser wäre noch der Footer -> mal das passende Array suchen

Zitat von MacKP

Ich würde mir Wünschen, wenn man die Experten Einstellungne in den Systemeinstellungen vornehmen könnte. Sozusagen als default und dann in den jeweiligen Elementen nur noch den Effekt einstellen muss/kann.

Das ist eine wirklich gute Idee, in meinen Tests hatte ich Probleme damit Vorbelegungen für Eingabefelder zu definieren, hab das aber auch schon gesehen.

Zitat von MacKP

Dann noch zum Handling:
An sich schon mal ein sehr guter Ansatz. Ich würde mir da noch ein Zusätzliches Content Element Wünschen: Accessible Tabs Set (oder so).
Wo man die Grundeinstellungen vornimmt und dann noch auswhält wie viele Tabs man erstellen möchte (2-10 oder so). Und beim Speichern wird dann direkt ein Grundgerüsst von head, break und stop erstellt passend zur Anzahl der Tabs.
Das wäre das Optimum an Bedienbarkeit glaube ich, denn so ist es doch schon recht auswändig ein paar Tabs zu erstellen.

Da wär mal wirklich was nettes! Mal sehen...

MFG & Bis heute Abend Jan

**MacKP** · 29.03.2010, 09:30

Zitat von FloydThreepwood

Hallo MacKP,

Danke für die Anmerkungen, ich werde mich heute Abend drum kümmern.

Hmmm, das ist in der Tat ein schwerwiegender Fehler. Aber fest geschrieben ist im Template nichts, allerdings im Datenbanksatz stehen Defaults.

Nich? also bei mir steht noch -> <div class="tabbody">
Eventuell meinst du auch das JS.. ich meinte an dieser Stelle den HTML Teil *g*

Zitat von FloydThreepwood

Ich arbeite so gut wie ger nicht mit dem Framework, gibt es da noch Besonderheiten?

Besser wäre noch der Footer -> mal das passende Array suchen

Ich weiß nicht ob das im Footer überhaupt geht.. denn soweit ich weiß ist nur im Head die möglichkeit sowas dynamisch reinzuladen. Da gibts seit 2.8 so ne Möglichkeit...

Zitat von FloydThreepwood

Das ist eine wirklich gute Idee, in meinen Tests hatte ich Probleme damit Vorbelegungen für Eingabefelder zu definieren, hab das aber auch schon gesehen.

Müssten auch nicht unbedingt Vorbelegungne sein. Nur ich finde das die meisten Einstellungen eher Grundeinstellungen sind, die kein Redaktuer machen muss (klassen etc.) und das deswegen besser in den Einstellungen aufgehoben ist. Also die Konfig Felder einfach zum Teil zu den Einstellungen und dann an der Stelle weg.

Zitat von FloydThreepwood

Da wär mal wirklich was nettes! Mal sehen...

Eventuell kannst du da ja bei subcolumns anschauen. Das hat aktuell zwar noch einen kleinen Bug beim verschieben. Aber das soll anscheinend auch bald weg sein. Vllt magst du auch Felix Pfeiffer kontaktieren, der die Erweiterung gemacht hat. der kann dir da vllt noch den ein oder anderen Tipp geben ;-)

Zitat von FloydThreepwood

MFG & Bis heute Abend Jan

Viele Grüße

**FloydThreepwood** · 29.03.2010, 20:32

Neues Spiel, neues Glück.

Habe jetzt oben die Beta2 angehängt. Übernommen wurden:
- Die Klassen werden jetzt alle ausgegeben
Ein Lese+Schreibfehler meinerseits - sorry
- Das JavaScript wird jetzt in den Head eingefügt
- Man kann jetzt alle Profi-Variablen auch in den Einstellungen vorbelegen
Andernfalls kann man nicht mehrere/verschiedenartige Tabs direkt ansteuern.

Nicht übernommen wurde:
- Subcollumn-Artige Elementkonstruktion
Das werde ich für eine spätere Version aufsparen

MFG & Viel Spaß damit!
Jan

**MacKP** · 29.03.2010, 22:06

Hallo FloydThreepwood,
so langsam macht es sich :-)

1. Was mir aufgefallen ist im maat.js Zeile 18 muss das hier hin:

Code:

tabsListClass: '<?php echo $this->ma_tabsListClass; ?>'

Allerdings wird das nicht ausgegeben an der stelle...

2. ce_accessibilityTabs_head.tpl:
Nicht so schlimm, aber hier fehlt mir echt ne Klasse die um alles drum herum ist:

Code:

<div id="<?php echo $this->tabsId; ?>" class="umschließende_klasse_tabs">

Diese Eventuell auch Konfigurierbar machen? Zur Not füge ich mir die immer selber ein.. aber an sich wäre das schon was feiner ;-)

3. Beim Händling:
Ich bin jetzt hingegangen und habe immer mit 'speichern und neu' die Elemente angelegt. Was mir dabei aufgefallen ist: beim break muss ich erst speichern, da dann erst mal TL meckert, das keine Überschrift angegeben wurde. Das ist auch klar so und normal bei TL.
Deswegen frag ich mich ob es nicht besser wäre die Typen direkt als Element auszuwählen und nicht erst im Element. Das würde den Ablauf enorm flüssiger machen und fehlbedienungen verhindern.

Ich glaub das waren erst mal meine Anmerkungen.. ich bin aktuell mit den Klassen etc. etwas durcheinander gekommen und musste erst ein wenig rumspielen bis ich alles zusammen hatte ;-)

So, nu hoff ich noch das meine Anmerkungen in Ordung sind und ich dich nicht nerve *g*

Viele Grüße

**FloydThreepwood** · 29.03.2010, 23:22

Ärgert mich schon ein bisschen, dass ich so doofe Fehler mache....

Ich werd Morgen eine neue Version veröffentlichen, in der Hoffnung, dass dann erstmal alles klappt.

Zu 3. Ich werde das vorerst so lassen, ich hoffe du hast noch ein wenig Zeit. Sollte das fehlerfrei sein, halte ich das für ein solides 1.0 Release, mit dem ich dann auch mein Projekt angehen kann. Im Anschluss (= kurz nach Ostern), kann ich dann gerne an einer 1.5er weiterarbeiten.

MFG Jan

**MacKP** · 29.03.2010, 23:24

Mach dir keinen Stress. Im Moment nutz ich das erst mal nur für ne eigene Seite. Wenn meine Kollegen das nicht hinbekommen, schreien die eh nach mir *g*

Wenn es keine dummen Fehler wären, könnte ich die gar nicht finden ;-)

Von daher gut, das es keine Intelligenten Fehler sind.

Viele Grüße

---

Edit: irgendwie hab ich auch noch Probs mit der Überschrift (wird 2 mal angezeigt) und im Tab wird 'Aktueller Tab:' auch noch angezeigt. Sollten die nicht ne Klasse invisible oder so bekommen?

Tut mir leid das es so stückelweise kommt.. aber fällt mir aktuell ein wenig schwer da noch richtig durchzublicken *g*

**deerwood** · 30.03.2010, 02:41

Moin ihr beiden,

faszinierend hier mit zu lesen, weiter so! Ich denke, das wünscht sich jeder Entwickler: Tester, die qualifiziert und wohlwollend berichten, Ideen liefern und Mut machen. Und zu Fehlern: 1/3 der Entwicklungszeit geht in Fehlersuche/beseitigung, das ist halt so. Da muss sich auch niemand für schämen. Fehler werden in allen Berufsständen gemacht, vom Gärtner bis zum Arzt (nur dass letztere das niemals zugeben) ... ein guter Gärtner/Handwerker/Rechtsanwalt/Ingeneur/Bundeskanzler/Arzt/Entwickler zeichnet sich, in meinen Augen, dadurch aus, dass er WEISS, dass er Fehler macht, Kritik akzeptiert und es dann besser macht.

Ich freue mich schon, demnächst eine tolle neue Erweiterung nutzen zu können, Dank Euch beiden!

LG, Georg

**MacKP** · 15.04.2010, 09:34

Zitat von MacKP

Edit: irgendwie hab ich auch noch Probs mit der Überschrift (wird 2 mal angezeigt) und im Tab wird 'Aktueller Tab:' auch noch angezeigt. Sollten die nicht ne Klasse invisible oder so bekommen?

Tut mir leid das es so stückelweise kommt.. aber fällt mir aktuell ein wenig schwer da noch richtig durchzublicken *g*

Hallo FloydThreepwood,
hast du diese Meldung von mir übersehen gehabt?
Hab jetzt ne Weile nix mehr gehöhrt von dir zu dem Thema und wollte mal nachfragen.

Viele Grüße

---
Edit: hab herausgefunden wodran das bei mir lag... bei dem Beispiel bekommt html noch die class="js" ich weiß bisher noch nicht warum das so ist.. aber dadurch waren ein paar CSS Regeln natürlich ohne Funktion ><

Vllt bekomme ich noch raus warum das so sein sollte.. mal sehen. Dann werd ichs hier zumindest posten

Viele Grüße

**JamesdK** · 15.07.2010, 12:02

Hallo zusammen,

momentan sind die Accessible Tabs ja das einzige Tabs-Modul, dass für Contao verfügbar ist - auch wenn es noch nicht über den Erweiterungskatalog geht.
Tabcontrol ist veraltet und irgendwie auch nicht mehr im Erweiterungskatalog für die 2.9.0 auffindbar.

Die Accessible Tabs funktionieren soweit eigentlich ganz gut, bis auf einen kleinen Fehler, auf den auch MacKP bereits hingwiesen hat:

Zitat von MacKP

1. Was mir aufgefallen ist im maat.js Zeile 18 muss das hier hin:

Code:

tabsListClass: '<?php echo $this->ma_tabsListClass; ?>'

Allerdings wird das nicht ausgegeben an der stelle...

2. ce_accessibilityTabs_head.tpl:
Nicht so schlimm, aber hier fehlt mir echt ne Klasse die um alles drum herum ist:

Code:

<div id="<?php echo $this->tabsId; ?>" class="umschließende_klasse_tabs">

Diese Eventuell auch Konfigurierbar machen? Zur Not füge ich mir die immer selber ein.. aber an sich wäre das schon was feiner ;-)

Im Moment bekommt die Tabliste (ul) - warum auch immer - als Klasse den Wert der "wrapperClass" zugewiesen, dadurch haben die ul und das nachfolgende div immer die selbe Klasse. Richtig als Klasse für die ul wäre aber "tabsListClass". Meine Versuche, das zu fixen, sind bisher fehlgeschlagen - ich finde den Ansatzpunkt einfach nicht. Bis auf die genannte Stelle in der maat.js habe ich keine Falschzuweisung in den mitgeliferten Dateien der Erweiterung gefunden.

FloydThreepwood, kannst du dir das bei Gelegenheit nochmal anschauen?
In der Zwischenzeit kann man sich ja durch die hardcodierte Klasse im Template ce_accessibilityTabs_head.tpl behelfen, so wie es MacKP bereits beschrieben hat.
Falls du noch weitere Bugfixing-Hinweise benötigst, sag einfach Bescheid!

**JamesdK** · 16.07.2010, 07:37

OK, ich habe ein bisschen weiter recherchiert, vielleicht können wir das Problem so weiter eingrenzen.

Die falsche Variablenbelegung der "tabsListClass" müsste in Zeile 105 der mootools.tabs.js passieren, hier steht die Anweisung:

Code:

this.setOptions(options);

Vor dieser Anweisung hat tabsListClass noch den Wert "tabs-list", der über die globalen Einstellungen kommt. Nach dieser Zeile bekommt tabsListClass den gleichen Wert von wrapperClass, den man selbst per Backend in der Inhaltselementkonfiguration eingegeben hat.

**blueamerican** · 21.07.2010, 08:42

zum lernen habe ich mir die erweiterung auch mal angeschaut...

das css fehlte (http://testcases.must-art.de/tabs/tabs.css)... ich habe es analog dem javascript eingebungen (liegt in modulordner html)

warum in dem css irgendwas von yaml steht ist mir nicht ganz klar;-) ich denk das wär ein reines mootools teil...

in der ...head.tpl muss im ersten div folgendes ergänzt werden:
class="mootools_tabs"

das könnte man auch konfigurierbar machen

der fehler im maat_js ist ganz einfach:
<?php echo $this->tabsListClass; ?>

statt
<?php echo $this->ma_tabsListClass; ?>

dann klappts.

was MacKP mit der wrapperklasse meinte is mir nich ganz klar....funktioniert so auch...

handling:
so richtig prickelnd finde ich dieses baukastenweise zusammensetzen nicht... weil ich mir denke dass der user viele fehler machen kann... aber es ist halt einfach zu developen und wenn der user sich dran gewöhnt hat...

diesen stop teil könnte man doch locker in js machen und dem user das ersparen, weil er es sowieso oft vergessen wird! das sind ja nur zwei divs am schluss... oder gibt es dafür eine andere möglichkeit...

ach so: meiner meinung kann die extension doch in den extensionmanager, oder?

vg blueamerican

**JamesdK** · 26.07.2010, 10:49

Hallo blueamerican,

danke für deine Hinweise und Tests.

Zum CSS:
Bei der Einbindung der angegebenen CSS-Datei sollte man bedenken, dass die Selektoren darin allesamt auf den Standard-Klassen der Accessible_Tabs basieren. Ändert man diese Benennungen in den Tabs-Einstellungen, bricht auch dein CSS auseinander.

Zum automatischen Stop-Element:
Der Einbau läuft analog zum Accordion, hier kann man ja auch die Variante mit Start- und Stopelement nutzen. Ich denke, dass sollte man auch weitestgehend offen lassen, denn woher soll das Skript automatisch wissen, nach welchem Inhaltselement der nächste Tab beginnen soll? Hin und wieder hat man ja den Fall, dass man mehrere Elemente in einen Tab bringen möchte.

Zur Veröffentlichung: Ja, grundsätzlich kann man die Erweiterung ins Repository schieben - ich würde aber vorher nochmal versuchen, FloydThreepwood zu kontaktieren.

**rettungjim** · 24.09.2010, 17:06

Hallo,

wir haben die Extension [ma_accessibleTabs] manuell in einem Contao 2.9.1 installiert.

In Firefox läuft alles super, im IE 7/8 springt er bei einem klick auf die Tabs zur Startseite.

die Links auf den Tabs sehen folgendermaßen aus:

http://www.xxx.de/#accessibletabscontent1285343323873

Ich befinde mich auf der Seite:

http://www.xxx.de/anwendung.html

Müsste der Ankerlink nicht so http://www.xxx.de/anwendung.html#acc...t1285343323873 aussehen?

Ich habe um es kurz zu testen mal in der mootools.tabs.js in Zeile 154
.....adopt(new Element('a',{'href': '#'+contentAnchor, 'text': $tabhead.get('text')}));
in
.....adopt(new Element('a',{'href': 'anwendung.html#'+contentAnchor, 'text': $tabhead.get('text')}));
geändert wie gesagt quick and dirty...

mit dieser Änderung funktioniert das Umschalten zwischen den Tabs einmal. Danach kommt im IE ein Scriptfehler: "Das Steuerelement kann den Fokus nicht erhalten, da dieses unsichtbar oder nicht aktiviert ist oder keinen Fokus zulässt."

Hat jemand eine Idee?