Neue Version im ER (2.0.0 RC1)

Soeben hab ich die Version 2.0.0 rc1 im ER bereitgestellt.

Changes:
Diverse Bugfixes

Features:

• Konfiguration über ein Eigenständiges Modul
• jQuery oder Mootools Template im Layout zuweisbar
• SaveState und verlinkbare Tabs mit jQuery möglich
• Läuft nun auch im .noConflict mode
• Update Script (bei manueller installation muss die install.php aufgerufen werden!)

Einstieg:
Nach dem die Extension Installiert ist findet ihr unter System ein neues Modul (Accessible Tabs). In diesem Modul habt ihr die Möglichkeit die Default Einstellungen für jQuery oder Mootools zu laden. Bei einem Update sollten die Grundkonfiguration von der alten Installation übernommen worden sein. Die Konfiguration kann nach belieben überschrieben werden.

In der Liste der Content Elements ist darauf der Eintrag "Accessible Tabs" ersichtlich. Über dieses Content Element werden die Tabs gesteuert. Die Elemente sollten wie folgt generiert werden.

Irgendwelche Elemente oberhalb der Tabs

--------------------------
Accessible Tabs -> Umschlag (Beginn)
--------------------------
Accessible Tabs -> Neues Tab
--------------------------
Irgendwelche Elemente
--------------------------
Accessible Tabs -> Neues Tab
--------------------------
Irgendwelche Elemente
--------------------------
Accessible Tabs -> Umschlage (End)

--------------------------
Irgendwelche Elemente unterhalb der Tabs

Links:
fry_accessible_tabs im ER
fry_accessible_tabs auf github

Demo Stylesheet
https://github.com/yfridelance/conta...aster/demo.css

Danke, das scheint jetzt wie gewünscht zu funktionieren. Im ersten Moment lief es noch nicht, aber da hatte ich vergessen im Layout das entsprechende jQuery-Template anzuhaken.

Ich style das Ding jetzt mal hübsch und stell nacher mein CSS hier zur Verfügung. Wer will, kann es dann gerne nutzen.

Hier mein CSS:

HTML-Code:

---

/* Karteireiter */
.ce_accessible_tabs {
  margin-bottom: 1.5em;
}

.tabs-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.tabs-list li {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  background-image: none !important;
}
.tabs-list a {
  display: block;
  margin: 0 2px 0 0;
  padding: 5px 10px;
  float: left;
  -webkit-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
}
.tabs-list a:link, .tabs-list a:visited {
  background-color: #2476A2;
  color: #fff;
  text-decoration: none;
}
.tabs-list a:hover, .tabs-list a:focus, .tabs-list a:active {
  background-color: #2476A2;
  color: #fff;
  text-decoration: underline;
  outline: 1px dotted #fff;
  outline-offset: -4px;
}
.tabs-list .current a {
  background-color: #013C66;
  color: #fff;
  font-weight: bold;
}

.ce_accessible_tabs div.content {
  clear: both;
  margin-top: -1px;
  padding: 10px;
  border: 1px solid #2476A2;
  -webkit-border-radius: 0px 5px 5px 5px;
  border-radius: 0px 5px 5px 5px;
  background-color: #fff;
  color: #333;
}

.ce_accessible_tabs .current-info, .ce_accessible_tabs .tabhead {
    left: -999em;
    position: absolute;
}

---

Man könnte noch mit unterschiedlichen Symbolen für die Reiter-Überschriften arbeiten. Dazu müsste man einfach nur jeweils ein anderes Bild für die verschiedenen Linkzustände einbinden.

Kleiner Fehler:

Der Text <span class="current-info">current tab: </span> steht in Englisch im Quelltext, anstatt auf eine deutsche Übersetzung (oder andere Sprachfiles) zuzugreifen.

Ein Bug der sich krass auswirkt:

Wenn als Inhalt eine Liste geladen wird (z.B. Event-Listenmodul mit Template event_list), packt die Extension diese Listenpunkte zur tabliste dazu, anstatt sie in den Tabcontent zu stecken.

Hallo Nina,
danke für dein Feedback.

Zitat:

---

Zitat von Nina

Kleiner Fehler:

Der Text <span class="current-info">current tab: </span> steht in Englisch im Quelltext, anstatt auf eine deutsche Übersetzung (oder andere Sprachfiles) zuzugreifen.

---

Wird erledigt...

Zitat:

---

Zitat von Nina

Ein Bug der sich krass auswirkt:

Wenn als Inhalt eine Liste geladen wird (z.B. Event-Listenmodul mit Template event_list), packt die Extension diese Listenpunkte zur tabliste dazu, anstatt sie in den Tabcontent zu stecken.

---

Kannst du mir dies genauer erläutern, ich konnte den Fehler nicht nachvollziehen. Wenn ich das Module Calendar - Event List aus der Musik Akademie in ein Tab lege wird dies richtig dargestellt. Ebenfalls eine einfache numerische sowie nicht numerische liste wird sauber dargestellt.

Gruss Yves

Komisch. Wenn ich das tu, zieht er die ganze Liste nach oben in die Tabs rein.

Also ich habe den Aufbau:

--------------------------
Accessible Tabs -> Umschlag (Beginn)
Irgendwelche Elemente
--------------------------
Accessible Tabs -> Neues Tab
News-Moduliste (enthält keine UL-Liste)
--------------------------
Accessible Tabs -> Neues Tab
News-Eventliste *
--------------------------
Accessible Tabs -> Neues Tab
Text-Element
--------------------------
Accessible Tabs -> Umschlage (End)

* Wenn ich bei der Eventliste das Template "upcoming" einstelle (ohne UL-Liste), wird alles korrekt angezeigt. Stelle ich stattdessen z.B. das Template "event_list" (mit UL-Liste) ein, kommt folgendes oben bei der Tabliste raus:

Code:

---

<div id="group_...">
<ul class="block tabs-list tabamount5">
<li class="first" id="accessibletabsnavigation0-0"><a id="tab_..." href="#accessibletabscontent0-0">Neuigkeiten</a></li>
<li class="current" id="accessibletabsnavigation0-1"><a id="tab_3..." href="#accessibletabscontent0-1"><span class="current-info">current tab: </span>Termine</a></li>
<li id="accessibletabsnavigation0-2"><a href="#accessibletabscontent0-2"></a><a href="veranstaltungen/tagung-x.html" title="Tagung X">Tagung X</a></li>
<li id="accessibletabsnavigation0-3"><a href="#accessibletabscontent0-3"></a><a href="veranstaltungen/tagung-y.html" title="Tagung Y">Tagung Y</a></li>
<li class="last" id="accessibletabsnavigation0-4"><a id="tab_..." href="#accessibletabscontent0-4">Karriere</a></li></ul>

---

Total komisch ^^

Ich teste das auf Contao 3.0.6 mit jQuery.

In den Einstellungen habe ich das hier:

jQuery eingestellt
Tab Head Klasse: h2
Positionierung: top
Höhe synchronisieren
der Rest mit der Standardeinstellung

Ah, ich weiß, was die Ursache ist:

Es hat nix mit der Liste zu tun, sondern damit, dass in den anderen Event-Templates die Titel der Events auch mit H2 formatiert sind. Sobald ich daraus H3 oder was anderes mache, tritt das Problem nicht mehr auf. Da ist also das Script zu unspezifisch und greift alle H2s im Content auf, statt nur die in der Tabliste.

Zitat:

---

Zitat von Nina

Ah, ich weiß, was die Ursache ist:

Es hat nix mit der Liste zu tun, sondern damit, dass in den anderen Event-Templates die Titel der Events auch mit H2 formatiert sind. Sobald ich daraus H3 oder was anderes mache, tritt das Problem nicht mehr auf. Da ist also das Script zu unspezifisch und greift alle H2s im Content auf, statt nur die in der Tabliste.

---

Danke, ich hab den Fehler erfolgreich nachgestellt. ich werde dies rasch möglichst fixen.

Zitat:

---

Zitat von Nina

Ah, ich weiß, was die Ursache ist:

Es hat nix mit der Liste zu tun, sondern damit, dass in den anderen Event-Templates die Titel der Events auch mit H2 formatiert sind. Sobald ich daraus H3 oder was anderes mache, tritt das Problem nicht mehr auf. Da ist also das Script zu unspezifisch und greift alle H2s im Content auf, statt nur die in der Tabliste.

---

Ist gefixt.

Hallo.

Ich will nur sicher gehen, das ich nichts falsch mache.
Ich habe soeben ein Update gemacht und nun passiert gar nichts mehr.

Was mir auffällt... im Head werden die JS Links so ausgegeben:

Code:

---

<script src="/system/modules/fry_accessible_tabs/assets/scripts/jquery.tabs.js"></script>
<script src="/system/modules/fry_accessible_tabs/assets/scripts/jquery.syncheight.js"></script>

---

Also mit Backslash am Anfang. Da ich die Arbeitsseite in einem Unterverzeichnis habe, werden die Dateien nicht gefunden... (wenn ich mir die Pfade genau ansehe wird das Unterverzeichnis immer aus der URL genommen) Müsste der Slash am Anfang nicht weg?

Gruß Thomas

edit//
Ich habe die Einträge in der Datei AccessibleTabsDS.php (ganz unten) gefunden. Nach Löschung des besagten ersten Slashes ging alles. Scheint also tatsächlich daran zu liegen.

Hi Thomas,
danke für den hinweis, ich habe die Änderungen an der AccessibleTabsDS heute Morgen durchgeführt. Ich hatte leider noch nicht die möglichkeit dies zu posten. Ab Build 5 sollte dies kein Problem mehr sein.

Gruss Yves

Zitat:

---

Zitat von Nina

Kleiner Fehler:

Der Text <span class="current-info">current tab: </span> steht in Englisch im Quelltext, anstatt auf eine deutsche Übersetzung (oder andere Sprachfiles) zuzugreifen.

---

'current tab' wird nun ebenfalls übersetzt.

Hi und erstmal danke für das coole Plugin. Was mir aufgefallen ist nen Problem mit der Animationsgeschwindigkeit.

1. In der Konfiguration kann man "show","fadeIn" und "slideDown" auswählen. Das klappt auch alles, wenn man aber "-" aussucht, kommt ein Fehler beim tab'n.
2. Bei der Geschwindigkeit steht normal als default, man weiß aber nicht was man anderes nehmen könnte und es fehlt die Möglichkeit von der Geschwindigkeit 0. Laut http://blog.ginader.de/archives/2009...accessible.php kann man fast, slow und normal als String übergeben oder eine Zahl als ms. Wenn man aber eine Zahl eingibt, wird eine 0 zu 'false' und eine 1 zu 'true' gewandelt. Wenn man bei is_number die Zahl direkt ohne quote ausgeben würde, würde auch keine Animation klappen.

Hi !

Mir ist auch aufgefallen, dass ein </section> bzw. </div> im tabs_wrapper fehlt.

In jedem Element wird, ausser beim ersten, zuerst das vorherige geschlossen. Nur leider beim letzten nicht. Das müßte im am Ende passieren.

v_r

Zitat:

---

Zitat von v_r

Hi !

Mir ist auch aufgefallen, dass ein </section> bzw. </div> im tabs_wrapper fehlt.

In jedem Element wird, ausser beim ersten, zuerst das vorherige geschlossen. Nur leider beim letzten nicht. Das müßte im am Ende passieren.

v_r

---

Dieses fehlende </section>-Tag ist auch die Ursache für das Problem mit dem IE8, welches ich hatte!
Nach Änderung des Templates "ce_accessible_tabs_wrapper.html5" in:

HTML-Code:

---

<?php if($this->mode == 'start') : ?>
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>
<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<div id="<?php echo $this->id; ?>">
<?php else: ?>
</section>  <!-- <-hier die Ergänzung! -->
</div>
</div>
<?php endif; ?>

---

funktionieren die accessible tabs auch wieder im IE7/IE8.

Gruß,
Ignatz

Hallo,

ist mir auch aufgefallen, der Validator wirft das auch als Fehler aus. Nachdem ich Deine Änderung übernommen habe waren die Fehler weg.

Vielleicht sollte wenn ein Fehler dort besteht, der Entwickler das aktualisieren.

Zitat:

---

Zitat von Ignatz

Dieses fehlende </section>-Tag ist auch die Ursache für das Problem mit dem IE8, welches ich hatte!
Nach Änderung des Templates "ce_accessible_tabs_wrapper.html5" in:

HTML-Code:

---

<?php if($this->mode == 'start') : ?>
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>
<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<div id="<?php echo $this->id; ?>">
<?php else: ?>
</section>  <!-- <-hier die Ergänzung! -->
</div>
</div>
<?php endif; ?>

---

---

Ist gefixt, danke