individuellen Tab über URL/Anker direkt ansprechen

[eblick]

Gibt es die Möglichkeit, einen bestimmten Tab direkt, z.B. über einen Anker bei Seitenaufruf zu aktivieren?

[Tim]

http://api.jqueryui.com/tabs/#option-active

Es gibt eine active Option. Damit wird der aktive Tab gesetzt.

[Brubbel]

Ich versuche diese Möglichkeit bei meinem Theme Calm einzusetzen (Ich denke es wird da grundsätzlich identisch sein oder?) und könnte einen kleinen Schubser gebrauchen.

Grundsätzlich will ich erreichen, dass ich bestimmte Tabinhalte bookmarken kann. Ich muss also einen Tab gezielt von außen anspringen können und wollte dazu mit Hashbezeichnungen arbeiten. Das mit der Hashabfrage ist soweit kein Problem aber ich bekomme einen individuellen Tab nicht geöffnet.
Selbst wenn ich (vermeintlich) ganz einfach versuche, einfach nur beim normalen Seitenaufruf, z.B. den 2ten Tab zu öffnen, bekomme ich das irgendwie nicht hin.

Könnte evtl. jemand von Euch mal ein funktionierendes Beispiel posten, mit dem man gezielt einen anderen Tab als den ersten öffnen kann?

Daaaaaaanke schön!

[Tim]

Zeig mal her, was du schon hast.
Du musst den jeweiligen Tab in eineindeutiger Beziehung zum Hashwert bringen z.B. #tab_1, hätte eine Beziehung z.B. wenn der Tab die Klasse "tab_1" hat. GET Parameter bieten sich hier auch an, da diese nicht mit event. Ankern auf der Seite kollidieren.

[Brubbel]

Ich würde gerne erst mal die "ganz einfache" Sache hinbekommen, die sich aus Deinem Link von oben ergibt. Daraus geht hervor, dass man die Tabs auch über einen Index ansprechen kann. Sowas in der Art

  jQuery( ".selector" ).tabs({active: 1});

müsste also den zweiten Tab aktivieren.

Ich habe zunächst nur das unveränderte Template des Tab Inhaltselement von Calm:

<script type="text/javascript">
/* <![CDATA[ */
    jQuery(document).ready(function(){
        jQuery(".tabs<?php echo $this->origin->get('pid'); ?> ul").tabs("div.panes.<?php echo $this->origin->get('pid'); ?> > div",{effect: 'fade', fadeInSpeed:'400'});
        var panes = jQuery('div.panes.<?php echo $this->origin->get('pid'); ?> > div');
        var min_height = 0;
        jQuery.each(panes,function(i,v)
        {
            var h = jQuery(v).height();
            if(h > min_height)
            {
                min_height = h;
            }
        });
        jQuery('div.panes.<?php echo $this->origin->get('pid'); ?>').css('min-height',min_height);
    });
/* ]]> */
</script>

<div class="tabwrapper <?php echo $this->class; ?>">
    <div class="tabs tabs<?php echo $this->origin->get('pid'); ?> <?php echo $this->field('darstellung')->value(); ?>">
        <ul>
        <?php if(count($this->group('tab')) > 0): ?>
            <?php foreach($this->group('tab') as $i => $fields): ?>
                <li class="<?php echo $this->field('counts')->value(); ?>"><a href="{{env::request}}"<?php if($this->field('icon#'.$i)->value()): ?> class="<?php echo $this->field('icon#'.$i)->value(); ?>"<?php endif; ?>><?php echo $this->field('list#'.$i)->value(); ?></a></li>
            <?php endforeach; ?>
        <?php endif; ?>
        </ul>
    </div>
    <div class="panes <?php echo $this->field('darstellung')->value(); ?> <?php echo $this->origin->get('pid'); ?>" style="min-height:170px">
        <div class="section">

Wie kombiniere ich das, damit beim Aufrufe der Seite (noch ganz ohne Hash), der 2te Tab sich standardmäßig öffnet?

Wenn ich das habe, dann würde ich in zweiten Schritt per location.hash den Indexaufruf variabel gestalten wollen.

[Brubbel]

Hatte ich auch schon versucht und eben nochmal. Das bewirkt keinen Unterschied. Es wird nach wie vor der erste Tab geöffnet! Auch wenn ich versuche den 3ten oder 4ten anzusprechen. Ömm?

[Tim]

Ah ja, Nachtrag: Das sind hier die jquery.tools tabs. http://jquerytools.github.io/documen...abs/index.html

Parameter ist initialIndex

jQuery(".tabs<?php echo $this->origin->get('pid'); ?> ul").tabs("div.panes.<?php echo $this->origin->get('pid'); ?> > div.section",{effect: 'fade', fadeInSpeed:'400',initialIndex:2});

[Brubbel]

DAS isses! ... und schon klappt´s auch mit dem Nachbarn!
Vielen lieben Dank!

[Tim]

Pack dein fertiges Template vielleicht hier rein und beschreibe kurz wie du die Url ausnutzt. Das wäre super.

[Brubbel]

Klar, gerne. Ich habe 2 Eingangsforderungen.
1. Ich möchte auf der Startseite einen Link setzen, der beim anklicken eine andere Seite öffnet und in der dort vorhandenen Tab-Navigation ein bestimmtes Tab öffnet.
2. Ein User soll sich die Links für die Tabs selbst als Bookmark setzen können.

Ich habe dank des letzten Hinweises das Template (customelement_layout_tabs_start.html5 -->aus dem Theme Calm!) wie folgt umgebaut:

<script type="text/javascript">
/* <![CDATA[ */
    jQuery(document).ready(function(){
        var tabindex = location.hash.substr(4,2);
        if(tabindex!=Math.round(tabindex))
        {
            tabindex=0;
        }
        jQuery(".tabs<?php echo $this->origin->get('pid'); ?> ul").tabs("div.panes.<?php echo $this->origin->get('pid'); ?> > div",{effect: 'fade', fadeInSpeed:'400', initialIndex: tabindex});
        var panes = jQuery('div.panes.<?php echo $this->origin->get('pid'); ?> > div');
        var min_height = 0;
        jQuery.each(panes,function(i,v)
        {
            var h = jQuery(v).height();
            if(h > min_height)
            {
                min_height = h;
            }
        });
        jQuery('div.panes.<?php echo $this->origin->get('pid'); ?>').css('min-height',min_height);
    });
/* ]]> */
</script>

<div class="tabwrapper <?php echo $this->class; ?>">
    <div class="tabs tabs<?php echo $this->origin->get('pid'); ?> <?php echo $this->field('darstellung')->value(); ?>">
        <ul>
        <?php if(count($this->group('tab')) > 0): ?>
            <?php foreach($this->group('tab') as $i => $fields): ?>
                <li class="<?php echo $this->field('counts')->value(); ?>"><a href="{{env::request}}#tab<?php echo $i+1; ?>"<?php if($this->field('icon#'.$i)->value()): ?> class="<?php echo $this->field('icon#'.$i)->value(); ?>"<?php endif; ?>><?php echo $this->field('list#'.$i)->value(); ?></a></li>
            <?php endforeach; ?>
        <?php endif; ?>
        </ul>
    </div>
    <div class="panes <?php echo $this->field('darstellung')->value(); ?> <?php echo $this->origin->get('pid'); ?>" style="min-height:170px">
        <div class="section">

Die Veränderungen sind:
hinzugefügt:

        var tabindex = location.hash.substr(4,2);
        if(tabindex!=Math.round(tabindex))
        {
            tabindex=0;
        }

Hier stecken 2 Sachen drin. Zum Einen will ich meine Tabs ganz simpel mit <Seitenadresse>#tab1, #tab2, #tab3 usw. aufrufen. In der ersten Zeile lese ich die Nummer des Tabs aus, den ich aufrufen will. und speichere den Wert. Dahinter prüfe ich nur ganz einfach darauf ob ich eine ganze Zahl habe. Falls da irgendein Phantasiehash eingegeben wurde, soll er den Standard-Tab(den ersten) anzeigen.

Hier:

 ...div",{effect: 'fade', fadeInSpeed:'400', initialIndex: tabindex});

verändere ich den Tab den er beim Seitenaufbau öffnet, entsprechend der zuvor getroffenen Auswahl.

und etwas weiter unten

<li class="<?php echo $this->field('counts')->value(); ?>"><a href="{{env::request}}#tab<?php echo $i+1; ?>"<?php if($this->field('icon#'.$i)->value()): ?> class="<?php echo $this->field('icon#'.$i)->value(); ?>"<?php endif; ?>><?php echo $this->field('list#'.$i)->value(); ?></a></li>

ergänze ich noch den Hash an die LinkURL, damit User das einfach bookmarken können.

In meinem Fall wollte ich jetzt keinen Aufwand für "sprechende" Hashnamen treiben. Hierzu könnte man aber prinzipiell genauso vorgehen und z.B. das Inhaltselement um einen Ankernamen erweitern und diesen dann z.B. mit Switch entsprechend abfragen.


Vielen Dank noch mal für Deinen Hinweis auf die jquery.tools. Das war wirklich der entscheidende Hinweis und nun läuft alles wie gewünscht!

[eblick]

Bestens. Habs nun nach Brubbels Vorlage eingebaut und passt prima! THX

[eblick]

Hallo Brubbel,

ich habe grad das identische Snippet nochmals in einem weiteren Projekt versucht.
Hier funktioniert das Ganze seltsamerweise nicht. Es stellt sich so dar, dass bei den panes die initialen display: block, bzw. display: none nicht erstellt werden.

Hast du eine Ahnung, womit das zusammenhängen könnte?
Thx

[jobrenner]

Hallo zusammen,

habe versucht den Code im aktuellen Template (Eclipse-Theme) anzupassen. Leider bis auf den PHP-Part erfolglos. Bekomme den Script Bereich einfach nicht zum Laufen. Wenn ich das Script-Snippet oder den gesamten Code von Brubbel übernehme funktioniert das Template nicht mehr,
Kann mir jemand helfen?

Danke schon mal!
Jochen

<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function(){
        var tabindex = location.hash.substr(4,2);
        if(tabindex!=Math.round(tabindex))
        {
            tabindex=0;
        }
    jQuery(".tabs_<?php echo $this->id; ?> li:first").addClass('active');
    jQuery(".tabs_<?php echo $this->id; ?> li").click(function(e){
        if (!jQuery(this).hasClass("active")) {
            var tabNum = jQuery(this).index();
            var nthChild = tabNum+1;
            jQuery(".tabs_<?php echo $this->id; ?> li.active").removeClass("active");
            jQuery(this).addClass("active");
            jQuery(".panes_<?php echo $this->id; ?> div.active").removeClass("active");
            jQuery(".panes_<?php echo $this->id; ?> div:nth-child("+nthChild+")").addClass("active");
        }
    });
});
/* ]]> */
</script>
        
<div class="<?php echo $this->class; ?> block<?php if($this->field('margin_top')->value()): ?> <?php echo $this->field('margin_top')->value(); ?><?php endif; ?><?php if($this->field('margin_bottom')->value()): ?> <?php echo $this->field('margin_bottom')->value(); ?><?php endif; ?><?php if($this->field('no_margin')->value()): ?> no-margin<?php endif; ?><?php if($this->field('margin_top_mobile')->value()): ?> <?php echo $this->field('margin_top_mobile')->value(); ?><?php endif; ?><?php if($this->field('margin_bottom_mobile')->value()): ?> <?php echo $this->field('margin_bottom_mobile')->value(); ?><?php endif; ?>"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
    <div class="tabs tabs_<?php echo $this->id; ?> <?php echo $this->field('schema')->value(); ?>">
        <ul<?php if($this->field('margin')->value()): ?> style="margin-bottom:<?php echo $this->field('margin')->value(); ?>px"<?php endif; ?>>
        <?php foreach($this->group('tab') as $i => $fields): ?>
            <li class="<?php echo $this->field('counts')->value(); ?>">
                <a href="{{env::request}}#tab<?php echo $i+1; ?>">
                    <?php if($this->field('icon#'.$i)->value()): ?><i class="<?php echo $this->field('icon#'.$i)->value(); ?>"></i><?php endif; ?>
                    <?php if($this->field('image-icon#'.$i)->value()): ?><?php echo $this->field('image-icon#'.$i)->html(); ?><?php endif; ?>
                    <?php if($this->field('title#'.$i)->value()): ?><?php echo $this->field('title#'.$i)->value(); ?><?php endif; ?>
                </a>
            </li>
        <?php endforeach; ?>
        </ul>
    </div>
    <div class="panes panes_<?php echo $this->id; ?> <?php echo $this->field('schema')->value(); ?>">
        <div class="section active">

[Tim]

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.

[eblick]

ich kämpfe nun schon seit Stunden mit Brubbels Anpassung mit Anker und komme nicht weiter.

Dein Schnipsel funktioniert grundsätzlich, aber nur, wenn ein #1, #2 oder höherer Anker an die URL angehängt wird.
Wenn die reine URL ohne Anker oder mit #0 verwendet wird, dann wird lediglich der erste Tab angezeigt, allerdings auch ohne Aktiv zu sein.
Die anderen Tabs bleiben ohne Funktion.
Hier mal eine Demo-Seite: http://contao.p279007.mittwaldserver...ngen-test.html

Könnt ihr mir einen Tipp geben, woran das liegt?