goolemaps in tabs
Eingetragen von jonas28@drupal.org (96)am 02.11.2007 - 20:19 Uhr in
Hallo,
ich habe letzte Woche die Website www.ourbania.com hier im Showroom gesehen.
Unter http://www.ourbania.com/urban-items/hafencity sieht man die Tabs "Pictures" und "Map".
Das habe ich versucht mal mit den Modulen "Jstools" und "Gmap" nachzubauen.
Dazu habe in die datei "node-test.tpl.php" das folgende Codesnippet eingefügt:
<?php
$view_eins = views_get_view('notizimprojekt');
$view_zwei = views_get_view('arbeitsgruppen3');
$current_view->args[0]=$nid;
$view_eins_build =views_build_view('embed', $view_eins, $current_view->args);
$view_zwei_build =views_build_view('embed', $view_zwei, $current_view->args);
$form = array();
$form['example1'] = array(
'#type' => 'tabset',
);
$form['example1']['tab1'] = array(
'#type' => 'tabpage',
'#title' => t('Karte'),
'#content' => $view_eins_build,
);
$form['example1']['tab2'] = array(
'#type' => 'tabpage',
'#title' => t('Notizliste'),
'#content' => $view_zwei_build,
);
print tabs_render($form);
?>Die Tabs werden angezeigt, der $view_zwei perfekt, doch die gmap in $view_eins wird erst korrekt angezeigt wenn man die Website im Browser aktualisiert...
auf der Website http://stilbuero.de/jquery/tabs/ habe ich gelesen, dass es auch möglich ist, Content dynamische per Ajax in die Tabs zu laden.
und zwar mit dem folgenden Befehl:
$('#container').tabs({ remote: true });Allerdings weiß ich nicht wo ich dieses Snippet einsetzen soll.
Ich habe mir noch die tabs.js datei angesehen:
da gibt es einen Abschnitt der folgendermaßen aussieht:
$('.drupal-tabs:not(.tabs-processed)', context)
.addClass('tabs-processed')
.addClass('tabs')
.tabs({
fxFade: Drupal.settings.tabs.fade,
fxSlide: Drupal.settings.tabs.slide,
fxSpeed: Drupal.settings.tabs.speed,
fxAutoHeight: Drupal.settings.tabs.auto_height,
onShow: Drupal.tabsAddClassesCallback()
})Die folgende Änderung zeigt leider keine Wirkung
.tabs({
remote: true
fxFade: Drupal.settings.tabs.fade,
fxSlide: Drupal.settings.tabs.slide,
fxSpeed: Drupal.settings.tabs.speed,
fxAutoHeight: Drupal.settings.tabs.auto_height,
onShow: Drupal.tabsAddClassesCallback()
})Hat jemand von Euch auf diesem Gebiet Erfahrung und möchte Sie teilen?
Gruß Jonas
- Anmelden oder Registrieren um Kommentare zu schreiben
Gibt es hier niemanden der eine googlemap in einem tab benutzt?
am 28.11.2007 - 18:51 Uhr
?
meine gmap sieht im tab so aus...
am 28.11.2007 - 19:09 Uhr
...und wird leider erst nach "Neu laden" im Browser korrekt angezeigt...
ich hoffe jemand hat nen Tipp für mich
Gruß Jonas
URL des Tabs direkt ansteuern
am 28.11.2007 - 19:23 Uhr
Wenn man die URL des Tabs in dem die Karte liegt direkt im Broswer ansteuert wird die gmap korrekt geladen...
www.example.com/node/24#tabs-Wirkfaktor-2
In der URL steht -2 am Ende für das zweite Tab. Wie oben im Screenshot zusehen, enthält das zweite Tab den gmapview. Funktioniert sowohl im Firefox also auch IE!
Beschreibe mal was Du
am 28.11.2007 - 22:26 Uhr
Beschreibe mal was Du erreichen moechtest mit Tab und Googlemap.
Dann sehen wir mal wie man das machen kann. JS Tools brauchst Du eher nicht dafuer.
PS
Googlemap im Tab: http://dbox.quiptime.com/node/2
-------------
quiptime
Nur tote Fische schwimmen mit dem Strom.
Ein Link sagt mehr als 1000 Wort:
am 29.11.2007 - 12:54 Uhr
@ vielen Dank für deine Hilfe!
hier kannst Du sehen wovon ich rede:
http://www.hvv-mobility.de/wirkfaktor/18
Der Slideeffekt aus den JS Tools wäre für mich nicht zwingend notwendig, wenn ich mir dein Beipsiel anschaue würde ich es auch so umsetzen...
Gruß und Danke
Jonas
Secondary tabs
am 29.11.2007 - 13:17 Uhr
Durch den Forumsbeitrag "Secondary tabs werden nicht angezeigt - sollten unter Mein Konto -> bearbeiten erscheinen" unter http://www.drupalcenter.de/node/3195 bin auf das Thema Secondary tabs gestossen und habe jetzt mal testweise folgendes ins Template enigefügt:
<ul class="tabs secondary"><li><a href="/links/1/">Link 1</a></li>
<li><a href="/links/2/">Link 2</a></li>
<li class="active"><a href="/links/3/" class="active">Link 3</a></li>
</ul>
<?phpif ($tabs != ""): print $tabs; endif;
?>
Die Tabs werden nun auch ohne jstools angezeigt, allerdings sollte der Inhalt unterhalb der tabs angezeigt werden (wie in Beispiel von quiptime) und der User nicht zu dem jeweiligen Link springen, wie es durch das obige Codesnippet passiert.
Ein bekanntes Problem sind
am 29.11.2007 - 13:23 Uhr
Ein bekanntes Problem sind Googlemaps in Durpals Javascriptbereichen. Dieses Problem ist aber vermutlich kein Drupalproblem. So z. Bsp. gibt es Darstellungsprobleme mit einer Map in kollapsiblen Feldern wenn diese nicht default aufgeklappt sind.
Vermutlich resultiert Dein Problem aus den Javascriptbasierten Tabs. Obwohl es in meinem Firefox funktioniert. Ich kann die Map im Tab ohne Probleme sehen/verwenden.
Meine Tab-Loesung ohne Javascript basiert auf einem Inhaltstyp, dessen Bereiche per Template Tabweise angezeigt werden. Im Template erzeuge ich manuell die Liste welche den Tabs zu Grunde liegt.
Damit wird bei jedem Tab-Klick die Seite neu geladen. Im Unterschied zur Loesung mit den Javascript-Tabs. Da wird der Inhalt einmal komplett geladen und Tabweise angezeigt. Und so trifft also das eingangs erwaehnte Problem der Javascriptbereiche zu. Denn beim Laden einer Node ist der Bereich der Map quasi zugeklappt.
Im Falle von 3 Tabs werden also beispielsweise 3 CCK-Felder einzeln vom Template angezeigt. Nach dem Motto:
/node/x
/node/x/map
/node/x/tipps
Um im Template die CCK-Felder tabweise anzuzeigen verwende ich arg() und frage die URL-Parameter ab. Im Falle der URL /node/x/map
wird nur das CCK-Feld mit der Map angezeigt und darueber stelle ich den Code der Tabs.
Bei 3 Tabs gibt es den Code fuer die Tabs auch 3 Mal.
Sicher ist diese Loesung etwas haendisch, aber ich verhindere Map-Anzeigeprobleme bei Mimositaten jedweder Browser.
-------------
quiptime
Nur tote Fische schwimmen mit dem Strom.
vielen Dank
am 29.11.2007 - 13:37 Uhr
Ich fand an den jstools reizvoll, dass eben nicht die komplette seite neugeladen werden mußte, werde aber jetzt mal deinen Lösungsvorschlag ausprobieren, damit ich sicher stellen kann, dass die Karte korrekt angezeigt wird.
Jonas
Mach mal den Test. Lade die
am 29.11.2007 - 13:42 Uhr
Mach mal den Test. Lade die Map so das sie mit den JS-Tabs gleich zu sehen ist wenn die Seite aufgerufen wird.
------------
quiptime
Nur tote Fische schwimmen mit dem Strom.
JS Tabs bieten keine AJAX-Funktionalitatet
am 29.11.2007 - 13:50 Uhr
Ich fand an den jstools reizvoll, dass eben nicht die komplette seite neugeladen werden mußte, werde aber jetzt mal deinen Lösungsvorschlag ausprobieren, damit ich sicher stellen kann, dass die Karte korrekt angezeigt wird.
Das ist ja der Trick oder besser die Augenwischerei mit den JS Tabs. Der Code wird einmal komplett geladen und nur Tabweise angezeigt. Wer dabei echte AJAX-Funktionalitatet mit partiellem Nachladen von Seiteninhalten vermutet liegt falsch. Man braucht nur in den HTML-Quellcode zu sehen.
JS Tabs bieten keine AJAX-Funktionalitatet.
-------------
quiptime
Nur tote Fische schwimmen mit dem Strom.
tatsache
am 29.11.2007 - 14:42 Uhr
Ich habe jetzt einfach mal weight auf -10 gestellt damit das Kartentab als ersten angezeigt wird und siehe da, die Karte wird korrekt dargestellt, nur dumm dass die Karte auf "Kundenwunsch" im 2. Tab erscheinen soll
$form['Wirkfaktor']['tab2'] = array('#type' => 'tabpage',
'#title' => t('Karte'),
'#weight' => -10,
'#content' => $view_eins_build,
vielleicht gib es noch eine andere Möglichkeit...
am 29.11.2007 - 14:47 Uhr
Das Modul CCK Fieldgroup Tabs (http://drupal.org/project/cck_fieldgroup_tabs) soll im Zusammenspiel mit dem Modul CCK die Möglichkeit bieten fieldgroups in Tabs anzeigen zulassen.
Dann braucht man noch das Modul "viewfield", damit man einen gmapview als CCK-Feld in den Inhaltstyp bekommt.
Noch eine Frage zu deinem Vorschlag
am 29.11.2007 - 15:24 Uhr
Im Falle von 3 Tabs werden also beispielsweise 3 CCK-Felder einzeln vom Template angezeigt. Nach dem Motto:
/node/x
/node/x/map
/node/x/tipps
Um im Template die CCK-Felder tabweise anzuzeigen verwende ich arg() und frage die URL-Parameter ab. Im Falle der URL /node/x/map
wird nur das CCK-Feld mit der Map angezeigt und darueber stelle ich den Code der Tabs.
Bei 3 Tabs gibt es den Code fuer die Tabs auch 3 Mal.
Wo legt man fest, dass das cck-feld "map" von node x z.B. als /node/x/map ausgegeben wird, um sie dann wieder mit arg() zurückzuholen?
Zitat:Wo legt man fest,
am 29.11.2007 - 16:18 Uhr
Wo legt man fest, dass das cck-feld "map" von node x z.B. als /node/x/map ausgegeben wird, um sie dann wieder mit arg() zurückzuholen?
Das legt man ganz einfach im Template des Nodetypes selber fest. Damit Du das Prinzip verstehst mach mal folgenden Test bei einer Nodeseite. Dein Link fuer die Mapanzeige im Tab soll lauten: node/x/mysupermap
Nun rufe eine Node auf und haenge in der URL /mysupermap an. Was passiert? Die Node wird vom Template ganz normal angezeigt weil Drupal mit dem Pfad node/x/mysupermap nichts anfangen kann.
Nun musst Du nur noch im Nodetype-Template dafuer Sorge tragen, das wenn die URL node/x/mysupermap lautet der entaprechende Code/CCK-Feld angezeigt wird.
Als Beispiel Code eines Nodetype-Template, ein wenig auf Deine Belange geschrieben:
<?php /* $Id: node-nodetype.tpl.php, v 1.0 2007/11/29 quiptime Exp $ */
if ( $node->type == 'mynodetype' && arg(0) == 'node' && is_numeric(arg(1)) && is_null(arg(2)) ) { ?>
<div class="tabs"><ul class="tabs primary">
<li class="active"><a class="active" href="/node/<?php print $node->nid; ?>">Beschreibung</a></li>
<li><a href="/node/<?php print $node->nid; ?>/mysupermap">Karte</a></li>
<li><a href="/node/<?php print $node->nid; ?>/suggestion">Anregungen</a></li>
</ul>
</div>
<div class="description">
<?php print content_format('field_description', $field_description[0]); ?>
</div>
<?php
}
if ( $node->type == 'mynodetype' && arg(0) == 'node' && is_numeric(arg(1)) && arg(2) == 'mysupermap' ) { ?>
<div class="tabs"><ul class="tabs primary">
<li><a href="/node/<?php print $node->nid; ?>">Beschreibung</a></li>
<li class="active"><a class="active" href="/node/<?php print $node->nid; ?>/mysupermap">Karte</a></li>
<li><a href="/node/<?php print $node->nid; ?>/suggestion">Anregungen</a></li>
</ul>
</div>
Code um die Map anzuzeigen
<?php
}
if ( $node->type == 'mynodetype' && arg(0) == 'node' && is_numeric(arg(1)) && arg(2) == 'suggestion' ) { ?>
<div class="tabs"><ul class="tabs primary">
<li><a href="/node/<?php print $node->nid; ?>">Beschreibung</a></li>
<li><a href="/node/<?php print $node->nid; ?>/mysupermap">Karte</a></li>
<li class="active"><a class="active" href="/node/<?php print $node->nid; ?>/suggestion">Anregungen</a></li>
</ul>
</div>
<div class="suggestion">
<?php print content_format('field_suggestion', $field_suggestion[0]); ?>
</div>
<?php
}
?>
Ich hoffe jetzt keine Fehler gemacht zu haben weil, ich habe den Code aus dem Stand heraus geschrieben. Pruefe den Code vor Uebernahme auf PHP Syntax-Fehler.
PS
Ich sollte das ins Handbuch als Beitrag bringen. Was meinst Du?
----------------------------------------------
Tags fuer die Suche:
Node Inhalt Map in Tabs anzeigen
Tabnavigation
-------------
quiptime
Nur tote Fische schwimmen mit dem Strom.
das ist was fürs handbuch
am 29.11.2007 - 17:47 Uhr
wow, genial!
Ich habe aus folgender Zeile noch mal etwas Doppeltes entfernt
<li class="active"><a class="active" href="/node/<?php print $node->nid;-->
<li class="active"><a href="/node/<?php print $node->nid;Das ganze Snippet:
<?php /* $Id: node-nodetype.tpl.php, v 1.0 2007/11/29 quiptime Exp $ */
if ( $node->type == 'mynodetype' && arg(0) == 'node' && is_numeric(arg(1)) && is_null(arg(2)) ) { ?>
<div class="tabs"><ul class="tabs primary">
<li class="active"><a href="/node/<?php print $node->nid; ?>">Beschreibung</a></li>
<li><a href="/node/<?php print $node->nid; ?>/mysupermap">Karte</a></li>
<li><a href="/node/<?php print $node->nid; ?>/suggestion">Anregungen</a></li>
</ul>
</div>
<div class="description">
<?php print content_format('field_description', $field_description[0]); ?>
</div>
<?php
}
if ( $node->type == 'mynodetype' && arg(0) == 'node' && is_numeric(arg(1)) && arg(2) == 'mysupermap' ) { ?>
<div class="tabs"><ul class="tabs primary">
<li><a href="/node/<?php print $node->nid; ?>">Beschreibung</a></li>
<li class="active"><a href="/node/<?php print $node->nid; ?>/mysupermap">Karte</a></li>
<li><a href="/node/<?php print $node->nid; ?>/suggestion">Anregungen</a></li>
</ul>
</div>
Code um die Map anzuzeigen
<?php
}
if ( $node->type == 'mynodetype' && arg(0) == 'node' && is_numeric(arg(1)) && arg(2) == 'suggestion' ) { ?>
<div class="tabs"><ul class="tabs primary">
<li><a href="/node/<?php print $node->nid; ?>">Beschreibung</a></li>
<li><a href="/node/<?php print $node->nid; ?>/mysupermap">Karte</a></li>
<li class="active"><a href="/node/<?php print $node->nid; ?>/suggestion">Anregungen</a></li>
</ul>
</div>
<div class="suggestion">
<?php print content_format('field_suggestion', $field_suggestion[0]); ?>
</div>
<?php
}
?>
Gruß und nochmals vielen Dank
Jonas
CCK-Node's in Tabs anzeigen - Nachtrag
am 29.11.2007 - 18:42 Uhr
Den Inhalt von CCK-Node's in Tabs anzeigen
Fuer alle die hier nachlesen.
Das von mir gepostete Code-Snipped fuer ein Nodetype-Template, Code von CCK-Nodes in Tabs anzuzeigen bzw. navigierbar zu machen beschreibt nur die Kernfunktionalitatet um den Code von CCK-Feldern aufgeteilt fuer die Tabs anzuzeigen. Um die Terms und Links in den Tabs anzuzeigen muss mein Snipped-Code entsprechend erweitert werden.
Ebenso wird mit diesem Code keine Anzeige fuer den Teaser generiert. Auch dies muss im Code-Snipped bei Bedarf ergaenzt werden.
Will man diese Tab-Funktionalitaet fuer mehrere Nodetypes anwenden ist es unter Umstaenden sinnvoller, diesen Code in der "node.tpl.php" zu implementieren und die in Frage kommenden Nodetypes abzufragen um die Tabgenerierte Nodeanzeige auf die in Frage kommenden Nodetypes zu beschraenken. Insbesondere erscheint diese Vorgehensweise sinnvoll wenn man aus anderen Gruenden fuer diese Nodetypes kein Template erstellen wuerde.
-------------
quiptime
Nur tote Fische schwimmen mit dem Strom.
Das klingt eingendlich
am 22.09.2010 - 21:41 Uhr
Das klingt eingendlich logisch. Danke für das Snipped. Das einzige Problem welches ich noch dabei habe ist, dass vom System in der page.tpl.php ja bereits tabs geliefert werden, wenn z.B. der User den Node selbst bearbeiten darf. Also erscheint beim Author die vom System vorgegebene Tableiste. Wenn man nun noch in den obigen Code einmal die Standart tabs unterdrücken könnte und den Bearbeiten link dann anzeigt, wenn entsprechende Rechte vorhanden sind, dann würde es passen.
Zunächst einmal Danke für das
am 21.03.2011 - 09:51 Uhr
Zunächst einmal Danke für das Snippet von quiptime!
Ich habe es genauso implementiert und es funktioniert prima, die Google-Map wird korrekt
angezeigt.
Allerdings wäre die jquery-Lösung halt schon reizvoll....
Ursache der verschobenen Gmap ist die Tatsache, dass das zweite bzw. x-te Tab mit der Gmap beim Aufbau der Seite display:none hat.
Damit hat dieses DIV keine Ausdehnung und dem darin enthaltenen gmap misslingt es, seine eigene Ausdehnung korrekt zu berechnen.
Eine Lösung liegt darin, das Tab mit der gmap anzuzeigen, aber aus dem Sichtfeld geschoben:
Ich habe 3 Tabs, ein allgemeines, eines mit Bildern und das dritte mit der Karte.
im css:
.versteckeTab {
position: absolute;
left: -10000px;
}
am schluss des node-template (Auszug):
$(function () {
$(".tab_bilder").attr("style", "display:none");
$(".tab_karte").addClass("versteckeTab");
});
$("li#karte").click(function()
{
$(".tab_allgemein").attr("style", "display:none");
$(".tab_bilder").attr("style", "display:none");
$(".tab_karte").removeClass("versteckeTab");
$(".tab_karte").attr("style", "display:block");
});
Bis jetzt habe ich noch keine Nebenwirkungen gefunden.
Vielleicht hilft das jemandem weiter.