individuellen Tab über URL/Anker direkt ansprechen

[eblick]

Hab nun noch etwas experimentiert.

Dieser Teil hier hat irgendwie nicht funktioniert:
var tabindex = location.hash.substr(4,2); if(tabindex!=Math.round(tabindex))

Damit geht es nun:

jQuery(document).ready(function(){
        var tabindex = (window.location.hash.substring(1));
        if (tabindex == "" ){
            tabindex = 0;
        } 

[eblick]

Dem Kunden gehen hier die Ideen nicht aus...
Das mit der Sprungnavigation funktioniert nun bei einfachen Tabs.
Nun gibt es auf der Seite innerhalb von horizontalen Tabs auch noch vertikale Tabs, die ebenfalls direkt angesprochen werden sollen (Verschachtelte Tabs).

Wäre sowas auf der Basis von Brubbels Lösung möglich / erweiterbar? Ich dachte daran, die Anker zu strukturieren mit z.B. #Tab-H1-V1, #Tab-H1-V2 usw. und die jeweilige Nummerierung aus dem Ankerstring auszulesen und in zwei Tabindex-Variablen zu packen..

[Tim]

Möglich ist natürlich alles. Hast du brubbel mal angesprochen auf einen Ausbau?

[eblick]

Das wird der nächste Schritt!

[pixle]

Hallo zusammen,

was die Template Anpassung des Eclipse Themes angeht, hatte Tim ja einen Ansatz gepostet:

Die Tabs reagieren auf die Klasse "active". Diese wird standardmäßig hier per js auf das Element li:first, also das erste li Element angewendet. Damit ist dieses als erstes offen.
Um ein anderes Element zu öffnen, würde es reichen diesem die Klasse "active" zu geben. Entweder anfangs hardcodiert oder per JS ermittelt.

Meine JS Kenntnisse sind für eine Umsetzung leider zu dürftig. Hat jemand ein funktionsfähiges Template für das Eclipse Theme erstellen können, welches er mir und anderen Eclipse Usern hier (bzw. im entsprechenden Theme-Bereich) zur Verfügung stellen könnte? Vielen Dank im Voraus!

[Brubbel]

Hi eblick , Du hattest seinerzeit mal diese Frage aufgeworfen aber es ist zumindest im Thread nicht zu einem Ende gekommen. Ich habe jetzt auch so einen Fall mit verschachtelten Tabs und wollte mal fragen ob Du da etwas teilbares oder andere Ansätze hast?

Dem Kunden gehen hier die Ideen nicht aus...
Das mit der Sprungnavigation funktioniert nun bei einfachen Tabs.
Nun gibt es auf der Seite innerhalb von horizontalen Tabs auch noch vertikale Tabs, die ebenfalls direkt angesprochen werden sollen (Verschachtelte Tabs).

Wäre sowas auf der Basis von Brubbels Lösung möglich / erweiterbar? Ich dachte daran, die Anker zu strukturieren mit z.B. #Tab-H1-V1, #Tab-H1-V2 usw. und die jeweilige Nummerierung aus dem Ankerstring auszulesen und in zwei Tabindex-Variablen zu packen..

Danke Dir für jeden Hinweis und VG

[eblick]

Hi Brubbel

anbei mal zwei Templates.
Das erste für die Tabs: customelement_layout_tabs_start_anker
Das zweite für die Sub-Tabs: customelement_layout_tabs_start_subanker

Funktionsweise:
der Hash besteht nun aus 2 Parametern, getrennt durch ein "-„.
Die erste Zahl gibt die Nr des zu öffnenden horizontalen Tabs an, die zweite die Nr. des zu öffnenden Vertikalen.
#2-1 bedeutet also:
öffne das 2. horizontale und darin das 1. vertikale Tab.
#1-4:
öffne das 1. horizontale und darin das 4. vertikale Tab.

Nach dem Anker kann auch mit einem weiteren Bindestrich ein beliebiger Text ergänzt werden: #1-4-Produkte

Damit lassen sich dann einigermaßen sprechende Links erstellen.

Das Ganze basiert auf einem Orphan Theme. Insofern habe ich nicht geprüft, ob sich zwischenzeitlich was an den aktuellen Anker Templates z.B. bei Eclipse geändert hat.

[Brubbel]

Das ist cool. Vielen Dank - ich probiere das morgen mal aus!

[Brubbel]

Hi eblick, Hi Tim ,
ich konnte das erst jetzt ausprobieren und bekomme es leider nur fast hin - Danke erst mal an Dich eblick, für den Einblick in die Templates. Die Art der Ansteuerung der Tabs scheint sich aber so stark verändert zu haben, dass zumindest ich nichts damit anfangen konnte. Ich habe also versucht mein vorhandenes Skript zu erweitern. Ich habe 2 horizontale Tabs in denen jeweils 4 weitere horizontale Tabs liegen. 2 Ebenen also.
Ich habe von eblick den Ansatz mit den Bindestrichen übernomenn und füge folgenden Hash an meine URL: <url>#tab1-3
Ich benutze auch 2 Templates. Für die erste Ebene sieht es so aus:

<script>
/* <![CDATA[ */
jQuery(document).ready(function(){
    var tabhash = window.location.hash;
    tabindex1 = Math.round(tabhash.substr(4,1)-1);
    tabindex2 = Math.round(tabhash.substr(6,1)-1);
    if(tabindex1!=Math.round(tabindex1) || tabindex1==-1)
    {
        tabindex1=0;
    }
    if(tabindex2!=Math.round(tabindex2) || tabindex2==-1)
    {
        tabindex2=0;
    }
    console.log(tabindex1+" "+tabindex2);
    //jQuery(".tabs_<?= $this->id; ?> > ul > li:first").addClass('active');
    jQuery(".tabs_<?= $this->id; ?> > ul > li:eq("+tabindex1+")").addClass('active');
    jQuery(".panes_<?= $this->id; ?> > div:eq("+tabindex1+")").addClass('active');
    jQuery(".tabs_<?= $this->id; ?> > ul > li").click(function(e)
    {
        if (!jQuery(this).hasClass("active"))
        {
            var tabNum = jQuery(this).index();
            var nthChild = tabNum+1;
            jQuery(".tabs_<?= $this->id; ?> > ul > li.active").removeClass("active");
            jQuery(this).addClass("active");
            jQuery(".panes_<?= $this->id; ?> > div.active").removeClass("active");
            jQuery(".panes_<?= $this->id; ?> > div:nth-child("+nthChild+")").addClass("active");
        }
    });
/* ]]> */
</script>

und für die darunterliegenden dann nur der untere Teil mit dem "oben" ermittelten tabindex2:

<script>
/* <![CDATA[ */
jQuery(window).ready(function(){
    console.log(tabindex2);
    //jQuery(".tabs_<?= $this->id; ?> > ul > li:first").addClass('active');
    jQuery(".tabs_<?= $this->id; ?> > ul > li:eq("+tabindex2+")").addClass('active');
    jQuery(".panes_<?= $this->id; ?> > div:eq("+tabindex2+")").addClass('active');
    jQuery(".tabs_<?= $this->id; ?> > ul > li").click(function(e)
    {
        if (!jQuery(this).hasClass("active"))
        {
            var tabNum = jQuery(this).index();
            var nthChild = tabNum+1;
            jQuery(".tabs_<?= $this->id; ?> > ul > li.active").removeClass("active");
            jQuery(this).addClass("active");
            jQuery(".panes_<?= $this->id; ?> > div.active").removeClass("active");
            jQuery(".panes_<?= $this->id; ?> > div:nth-child("+nthChild+")").addClass("active");
        }
    });
/* ]]> */
</script>

Das ganze funktioniert "fast". Für den ersten horizontalen Tab funktioniert alles wunderbar. Ich kann mit <URL>#tab1-3 den richtigen Tab in der zweiten Ebene öffnen.Wenn ich jetzt aber <URL>#tab2-3 angebe, dann öffnet er zwar den zweiten Tab der ersten Ebene, aber darin immer nur den ersten

Irgendeine Idee was ich falsch mache?

[Tim]

In EclipseX ist dieses Feature bereits von mir implementiert in den Tabs. Diese reagieren auf:

.html?tab_ID-DES-ELEMENTS=2

Öffnet den 2. Tab des Tab-Inhaltselements zu der passenden ID.

[Brubbel]

Das wäre natürlich super wenn es bereits eingebaut ist. Ich hatte da im Template auch was mit der "tab_ID-OF-ELEMENT=INDEX-OF-TAB" gesehen aber das hatte bei mir nicht funktioniert. Auch schon nicht mit einer Ebene.
Wie müsste der Parameterteil denn aussehen, wenn ich in dieser Struktur das Tab 2-3 öffnen möchte?

[Tim]

Die 2. Ebene wäre ja wieder ein eigenständiges Tab-Element mit einer eigenständigen ID.

Sagen wir, wir haben zwei Tab-Elemente id=10 und id=20.

id=10 binhaltet im 2. Tab das Tab-Element mit id=20.

Beispiel: "öffne 2. Tab von Tab.id=10 UND öffne 3. Tab von Tab.id=20"

.html?tab_10=2&tab_20=3

[Brubbel]

Ich habe das noch mal versucht mit der bereits eingebauten Methode und bekomme damit nur für den ersten Tab die 2.Ebene sauber angesprungen (Im Bild der blaue Zweig). Beim zweiten Tab öffnet er immer den ersten Tab der unteren Ebene (Im Bild der grüne Zweig)..
Ich komme auch wieder an den Punkt der mich damals beim ersten Spielen mit der Methode gestört hat. Die URL wird sehr unhandlich. In meinem Fall sah das jetzt z.b. so aus:

.html?tab_109567=1&tab_109580=2

Auch für viele Redakteuere evtl. etwas sperrig?

Aber! ... beim Zuweisen der Originaltemplates ist mir mein Fehler aufgefallen und er ist so blöd wie er nur sein kann... Ich habe beim Zweiten Tab-Startelement der 2.Ebene (im Bild oben grüne Seite das untere Tab-Element) vergessen MEIN modifiziertes Subtemplate zuzuweisen!!! Mann, Mann, Mann ... Habe ich eben nachgeholt und siehe da, alles funktioniert wie es soll!!! Ich bin so ein Honk ...

Also - ich verfolge die eingebaute Version nicht weiter, da ich die URL zu sperrig finde und man ggf. erst etwas aufwendig die ID ermitteln muss. Durch den Einsatz der beiden obigen Templates kann ich nun eine URL nach diesem Muster verwenden:

.html#tab2-3

Danke für eure Inputs die mich auf die richtige Lösung gebracht haben!

[eblick]

In EclipseX hat sich ja das Tab-Template nun ziemlich geändert und die Anker-Navigation funktioniert nicht mehr.
Hat jemand eine Idee, wie die neuen Templates erweitert werden können, dass einzelne Tabs direkt über die URL angesprochen werden können?

[Tim]

In EclipseX hat sich ja das Tab-Template nun ziemlich geändert und die Anker-Navigation funktioniert nicht mehr.
Hat jemand eine Idee, wie die neuen Templates erweitert werden können, dass einzelne Tabs direkt über die URL angesprochen werden können?

Die Methode von Brubble und die Funktionsweise ist weiterhin gegeben. Standardmäßig kann ein Tab direkt via tab_ID-DES-ELEMENTS=TAB-NUMMER angesprochen werden.