dynamicinternet Wir machen Ihr Web dynamisch!

Google Maps im Tab, druckbare Tabs

geschrieben von Micha am 08. Februar 2010 | kein Kommentar

Wie sich herausstellte, keine ganz einfache Aufgabe. Aber zuerst die Ausgangbasis. Eine ganz normale WordPress Seite, die Informationen zu einem Objekt enthält und darunter wird per Shortcode [wpmaps] durch Sergej Müller’s Plugin wpMaps die Goggle Map eingeblendet. Daraus sollen 2 Tabs entstehen, eins mit der Info und eins mit der Karte.

Als Tab-Script kommt das jQuery Accessible Tabs von Dirk Ginader zum Einsatz, welches wirklich zugängliche Tabs erzeugt und Bestandteil des YAML Frameworks ist. Damit es funktioniert, braucht es einen Container, auf dem es angewendet wird, pro Tab eine Überschrift und den Contentbereich für das jeweilige Tab.

Die Grafik zeigt das Markup, wie es in WordPress erstellt wird. Der rote Rand ist das Div, welches die Post umschließt. Da Javascript für die Google Map und das Tabscript benötigt wird, liegt es auf der Hand, gleich das gesamte Markup mit jQuery umzubauen. Die Struktur, die erreicht werden soll, sieht so aus:

Zuerst bekommt die Post die Klasse ‘tabs’, dann wrappen wir die Post mit 2 Divs und fügen die Überschrift der Seite zwischen diesen Divs ein, damit sie am Beginn des Dokuments steht. Die Post bekommt eine Überschrift ‘Info’ eingeimpft. Anschließend bekommt das Div ‘wpmaps’, in welchem die Google Map erscheint, ein Div mit der ID ‘mymap’ und der Klasse ‘tabs’ herum und die Überschrift Karte. Dieses Div ‘#mymap’ wird dann aus der Post herausgenommen und hinter der Post wieder eingefügt. Zum Schluß wird das Tabscript aufgerufen. Damit das alles nur passiert, wenn eine Map da ist, wird das am Anfang abgefragt. Hier das Script:

<script type="text/javascript">
//<![CDATA[
document.documentElement.className += " js";
jQuery(document).ready( function($){
    var map = $('.wpmaps');
    if (map.length){
      $('.post').addClass('tabs').wrap('<div class="postcontent"><div class="tabber"><\/div><\/div>');
      $('h2').prependTo('.postcontent');
      $('<h6>Info<\/h6>').appendTo('.post');
      $('.wpmaps').wrap('<div id="mymap" class="tabs"><\/div>');
      $('<h6>Karte<\/h6>').prependTo('#mymap');
      $('#mymap').insertAfter('.post');
      $(".tabber").accessibleTabs({tabhead:'h6',tabbody:'.tabs'});
    }
});
//]]>
</script>

Das alleine wäre ja keinen Beitrag wert, ein bisschen DOM Manipulation kann ja jeder. Folgendes Problem trat auf: das Tabscript setzt erstmal alle Container mit der Klasse ‘tabs’ auf display: none und den ersten auf display: block. Damit kann das Google Javascript, welches die Map erzeugt und alles absolut positioniert, nichts mit dem Container wpmaps anfangen und richtet sich am nächst höheren sichtbaren Container ‘tabber’ aus. Der beinhaltet aber die Tabnavigation und damit stimmt die Zentrierung des Objekts in der Karte nicht mehr.

Also konnte ich im Tabscript mit .hide() und .show() nicht arbeiten. Das YAML Framework, welches zum Einsatz kommt, bietet im Core die Klassen hideme und print an, welche den Inhalt aus dem sichtbaren Bereich schieben.

/* YAML core/base.css */
/* (en) classes for invisible elements in the base layout */
/* (de) Klassen für unsichtbare Elemente im Basislayout */
.skip, .hideme, .print {
    position:absolute;
    top:-32768px;
    left:-32768px; /* LTR */
}

Dabei hat mir die Klasse print am besten gefallen:

@media print
{
...
/* (en) make .print class visible */
/* (de) .print-Klasse sichtbar schalten */
  .print {
    position:static;
    left:0;
}

Also kopierte ich mir das Tabscript in einen anderen Ordner und ersetzte im Tabscript hide() durch addClass(‘print’) und show() durch removeClass(‘print’) und zusätzlich die Zeile

$(el).find(o.options.tabbody).eq(i)[o.options.fx](o.options.fxspeed);
/* durch */
$(el).find(o.options.tabbody).eq(i).removeClass('print');

Dadurch gehen die konfigurierbaren Animationen nicht mehr, was mich nicht weiter stört. Der positive Effekt dank der Klasse print, die Tabs sind jetzt druckbar!