[gelöst] Wie Content in HMTL-Code auf zwei Tabs aufteilen
Eingetragen von PhilB (139)am 31.05.2011 - 14:06 Uhr in
Hallo,
meine Frage gehört leider nicht 100%ig in dieses Forum, da es mehr ein CSS Problem ist und nicht zwingend etwas mit Drupal zu tun hat. Aber evtl. kann man Drupaleigene Funktionen nutzen. Deshalb frage ich hier doch mal nach:
Und zwar arbeite ich mit dem Modul Frontpage. Dort kann ich meinen HTML/PHP-Code eingeben, welcher schließlich die Startseite darstellen soll.
Nun möchte ich aber in meinem PHP-Code den Inhalt auf zwei Tabs aufteilen.
Kann mir jemand helfen, wie ich das am Besten bewerkstellige? Bietet Drupal evtl. Funktionen/Module welche die Umsetzung vereinfachen? Ich habe nur Tabs in Verbindung mit CCK gefunden. Aber ich bräuchte Tabs auf einer reinen HTML-Seite.
Vielen Dank.
Gruß Phil
- Anmelden oder Registrieren um Kommentare zu schreiben
http://drupal.org/project/pan
am 31.05.2011 - 19:18 Uhr
http://drupal.org/project/panels_tabs zusammen mit de Modul Panels kann dein Problem möglicherweise lösen.
Danke für deine Hilfe. Aber
am 31.05.2011 - 20:37 Uhr
Danke für deine Hilfe.
Aber das Modul ist mir zu mächtig, dafür das ich nur 2 Tabs auf einer Seite darstellen möchte.
Ich hätte gerne so etwas hier: http://jqueryui.com/demos/tabs/#default
Aber ich möchte nicht 290 KB nur für 2 Tabs laden :( Kann man nicht das Drupalinterne jquery verwenden? Es muss doch eine simplere Lösung geben :(
Bitte weiter um Hilfe.
Vielen Dank,
gruß Phil
Wenn Du in deine Website
am 31.05.2011 - 21:53 Uhr
Wenn Du in deine Website eingeloggt bis, dann hast Du ja bei einem Node oben auch die beien Tabs für "Anzeigen" und "Bearbeiten".
Schau Dir mal den Quelltext dazu an: Damit erhältst Du mal die Info, welche Tags und Klassen Drupal hierfür verwendet.
Dann braucht man etwas jquery, um die Klassen "ein- und auszuschalten".
Hier ein Snippet, für ein tab mit 3 registern, die click funktion muss natürlich für die tabs 2 und 3 analog fortgesetzt werden.
$(function () {
$(".tab_2").attr("style", "display:none");
$(".tab_3").attr("style", "display:none");
});
$("li#t1").click(function()
{
$(".tab_1").attr("style", "display:block");
$(".tab_2").attr("style", "display:none");
$(".tab_3").attr("style", "display:none");
$("li#t2").removeClass("active");
$("li#t3").removeClass("active");
$(this).addClass("active");
}
);
Ich hoffe, dies bringt dich von der Idee her weiter.
Vielen Dank! Ich glaube das
am 31.05.2011 - 22:51 Uhr
Vielen Dank! Ich glaube das ist genau das was ich suche :)
Leider bekomme ich es einfach nicht ans laufen. Kannst du mir evtl. noch mal eine Hilfestellung geben?
Hier einer meiner Versuche (für 2 Tabs):
<script>
$(function () {
$(".tab_2").attr("style", "display:none");
});
$("li#t1").click(function()
{
$(".tab_1").attr("style", "display:block");
$(".tab_2").attr("style", "display:none");
$("li#t2").removeClass("active");
$(this).addClass("active");
}
);
$("li#t2").click(function()
{
$(".tab_2").attr("style", "display:block");
$(".tab_1").attr("style", "display:none");
$("li#t1").removeClass("active");
$(this).addClass("active");
}
);
</script>
<ul>
<li id="t1">1. Tab</li>
<li id="t2">2. Tab</li>
</ul>
<div class="tab_1">Tab1</div>
<div class="tab_2">Tab2</div>
Vielen Dank!
Gruß Phil
Ich vermute, dass der
am 01.06.2011 - 14:29 Uhr
Ich vermute, dass der Scriptteil nach allem stehen sollte.
Die List selbst so, die Vergabe der Klassen ist wichtig:
<div class="tabs"><ul class="tabs nodetab primary">
<li id="t1" class="active"><a href="#">Tab 1</a></li>
<li id="t2"><a href="#">Tab 2</a></li>
</ul>
</div>
Danke
am 01.06.2011 - 17:54 Uhr
Super, jetzt klappt es.
Hab vielen Dank!
Gruß Phil
Schön, das freut mich :-)
am 01.06.2011 - 22:53 Uhr
Schön, das freut mich :-)