Wie kann ich bei diesen JS-Tabs Subtabs auch auf die zweiten und dritten Parenttabs bekommen

fahl5 · 23. April 2018

Ich nutze gerade dieseTabs von Github und verzweifele etwas an deren Nutzung.

Ich kann das Beispiel der Beispielsseite anstandslos in mein Template übernehmen.

Wenn ich aber testhalber versuche die Tabs für meine Bedürfnisse anzupassen, kann ich zwar auch die Anzahl der Tabs durch Copy und Paste des Codes eines Tabs erhöhen.

Wenn ich aber versuche auch in andere Horizontal Parenttabs Subtabs zu kopieren oder eine weitere Reihe Vertikal Tabs unter den Vertical tabs der Beispielsseite durch Copy und Paste anzulegen geht das einfach nicht.

Ich habe ein bisschen an den verschiedenen "class" namen der kopierten Tabs hermprobiert aber entweder überhaupt keine Änderung oder ein nur noch größéres Chaos angerichtet, dass ich hier mal lieber gar nicht poste.

Bin ich zu optimistisch wenn ich glaube, ich könnte alle Horizontal Tabs mit untergeordneten Vertical-Childtabs versehen? Oder bin ich bin hoffentlich einfach mal wieder nur zu blöd die Spielregeln zur Verwendung der Tabs zu verstehen. Die Tabs sind schon ca. 5 Jahre alt und der Support hat bisher leider nicht auf meine Anfrage reagiert. Wenn hier jemand besser damit zurecht kommt und mir einen Tip geben kann wie ich auf mehreren Parenttabs vertikale Childtabs haben kann wäre ich natürlich sehr dankbar.

basti1012 · 23. April 2018

da wirst du wohl die css und oder Javascript mit anpassen müssen.Aber ich kucke mal genauer nach

und mach mal Beispiel ,fals ich dich richtig verstanden habe, soll vertikal und horizontal mehrere verlinkungen rein . ALSO TABS?

fahl5 · 23. April 2018

Also ich habe eigentlich alle Beispiele für meinen momentanen Verzweiflunggsstand schon oben verlinkt.

1) was der Coder an Beispielen parat hällt: Beispielsseite

2) Mein Versuch dieses Beispiel "testhalber für meine Bedürfnisse anzupassen,"

Ich könnte mir vorstellen, dass du da genau in die richtig Richtung zeigst. ich tappe da allerdingsmomentan noch etwas im dunkeln wo ich was finde um den JS darauf vorzubereiten, dass er in jedem Horizontalen (Parent)Tab auch noch ein Set mit ca. 4 vertikalen Childtabs vorfindet. Weil das momentan so einfach mit Copy und Paste (wie das z.B. bei der Vermehrung der Tabs geht) leider nicht hinzukriegen ist.

Ich habe mir nochmal die Skripte im Package nach "ParentHorizontalTab" und "ChildVerticalTab" durchforsten in der Hoffnung dass mir da irgendetwas einfällt, was mir erlaubt in jedem Horizontal Tab Vertikale Childtabs zu haben. Aber ehrlich bei der css verstehe ich immer nur welche Layouteintellungen wecher Bereich hat und beim JS habe ich bestenfalls eine flaue Ahnung, wie der die Liste mit den Tabnamen mit den Tabs in Verbindung bringt.Ich habe allerdings nicht den Eindruck, dass da im JS schon direkt etwas angelegt wäre, was darauf warten würde vermehrt zu werden um z.B. entsprechend mehrere Horizontale Container für jeweils eigene Vertikale ChildtabTabs zu ermöglichen. Ansich sagt der Coder ja, ma könne mehrere Tabs auf der gleichen Seite haben.

Für mich ist das derzeit noch ein ziemliches Stochern im Dunkeln.

Andererseits könnte es ja vielleicht auch sein, dass es doch eher auf die Nomenklatur der div class und div-id und sich mir deren Spielregeln nur nicht erschlossen haben. Wie gesagt meine Spielerein haben da bislang nur noch mehr Chaos oder Fehlfunktion bewirkt.

Ich vemute wenn dann wird man wohl hier etwas machen können:

http://kahn.8sf.de/js/easyResponsiveTabs.js

(Allerdings gehören auch http://kahn.8sf.de/js/jquery-1.6.3.min.js

und http://kahn.8sf.de/js/jquery-1.9.1.min.js zu den Tabs, Allerdings hoffe ich dass das keine Tab-spezifischen JS'te sind)

Die zugehörige css wäre http://kahn.8sf.de/css/easy-responsive-tabs.css

Also wenn jemanden etwas hilfreiches dazu einfällt wäre ich wirklich froh.

Danke schon mal für das mitdenken soweit.

Sempervivum · 23. April 2018

Zu deiner Testseite http://kahn.8sf.de/subtabs-test.html

Dein 4. vertikaler Tab funktioniert nicht, weil Du ihn nicht initialisiert hast. Ergänze das Javascript auf diese Weise und er funktioniert:

Code

    <script>
        $(document).ready(function() {
        //Horizontal Tab
        $('#parentHorizontalTab').easyResponsiveTabs({
            type: 'horizontal', //Types: default, vertical, accordion
            width: 'auto', //auto or any width like 600px
            fit: true, // 100% fit in a container
            tabidentify: 'hor_1', // The tab groups identifier
            activate: function(event) { // Callback function if tab is switched
                var $tab = $(this);
                var $info = $('#nested-tabInfo');
                var $name = $('span', $info);
                $name.text($tab.text());
                $info.show();
            }
        });

        // Child Tab
        $('#ChildVerticalTab_1').easyResponsiveTabs({
            type: 'vertical',
            width: 'auto',
            fit: true,
            tabidentify: 'ver_1', // The tab groups identifier
            activetab_bg: '#fff', // background color for active tabs in this group
            inactive_bg: '#F5F5F5', // background color for inactive tabs in this group
            active_border_color: '#c1c1c1', // border color for active tabs heads in this group
            active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border
        });

        // Child Tab 4
        $('#ChildVerticalTab_4').easyResponsiveTabs({
            type: 'vertical',
            width: 'auto',
            fit: true,
            tabidentify: 'ver_1', // The tab groups identifier
            activetab_bg: '#fff', // background color for active tabs in this group
            inactive_bg: '#F5F5F5', // background color for inactive tabs in this group
            active_border_color: '#c1c1c1', // border color for active tabs heads in this group
            active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border
        });
    });
    </script>

Alles anzeigen

Damit funktioniert der vierte vertikale Tab auf meiner Testseite. Wahrscheinlich müsste man noch den tab groups identifier anpassen und eindeutig machen.

basti1012 · 23. April 2018

Ja Sempervivum hat ja eigentlich alles gesagt.

Wenn man alles richtig Kopiert ,und das Script vieleicht so ändert

Code

$(document).ready(function() {
        $('#parentHorizontalTab').easyResponsiveTabs({
            type: 'horizontal', //Types: default, vertical, accordion
            width: 'auto', //auto or any width like 600px
            fit: true, // 100% fit in a container
            tabidentify: 'hor_1', // The tab groups identifier
            activate: function(event) { // Callback function if tab is switched
                var $tab = $(this);
                var $info = $('#nested-tabInfo');
                var $name = $('span', $info);
                $name.text($tab.text());
                $info.show();
            }
        });

    for(a=1;a<=6;a++){
        $('#ChildVerticalTab_'+a).easyResponsiveTabs({
            type: 'vertical',
            width: 'auto',
            fit: true,
            tabidentify: 'ver_'+a, 
            activetab_bg: '#fff', 
            inactive_bg: '#F5F5F5', 
            active_border_color: '#c1c1c1', 
            active_content_border_color: '#5AB1D0'
        });
  }
    });

Alles anzeigen

Erhält man ein 6 x 7 Tabs Feld

http://sebastian1012.bplaced.n….php#parentHorizontalTab1

fahl5 · 23. April 2018

Danke Danke Danke Sempervivum und Basti. as war genau das Codebrett vor meinem Kopf, dass ich mir nicht die Tabs Skripte unter dem Seiten-Content nochmal angesehen hatte. Damit habt ihr mir wirklich wesentlich erleichtert die langen listen etwas handlicher zu machen.

Vielen Dank.

Wie kann ich bei diesen JS-Tabs Subtabs auch auf die zweiten und dritten Parenttabs bekommen

Jetzt mitmachen!

Teilen