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.