Hat sich schon erledigt. Habe das Modul über die Erweiterungsverwaltung repariert und dann konnte ich auch wieder die Reiternamen angeben.
Druckbare Version
Hat sich schon erledigt. Habe das Modul über die Erweiterungsverwaltung repariert und dann konnte ich auch wieder die Reiternamen angeben.
Hat sich erledigt - man sollte natürlich lesen, dass Mootools aktiviert sein sollte :p
Ich habe tabcontrol installiert, aber so richtig funktioniert es nicht.
Es werden die Überschriften für die beiden Tabs untereinander angezeigt, darunter der Inhalt des ersten Tab, der zweite fehlt komplett. Auch werden keine Tabs angezeigt, mootools habe ich aktiv, wo könnte noch der Fehler liegen?
Contao 3.2.5
tabcontrol 3.0.1 stable
Hallo 00-Schneider,Zitat:
Zitat von 00-schneider
vermutlich am CSS!
Hier findest du ein Beispiel >> http://www.christianbarkowsky.de/contao-tabcontrol.html
Wie und wo muss ich die einfügen? Bin ein totaler Contao-Anfänger....Zitat:
Zitat von christian.barkowsky
Hier die Bauanleitung. :)Zitat:
Zitat von 00-schneider
http://www.christianbarkowsky.de/con...tabcontrol.css
Ein wenig weiter bin ich schon, Danke! Jetzt geht es nur noch um das Aussehen, aber ich bekomme die Tabs einfach noch nicht hin. Bei mir stehen die beiden Tabs einfach untereinander und darunter der Inhalt.
Ich würde gern die Tabs wie auf der Beispielseite erstellen...
Guck dir das doch mit den Chrome-Entwickler-Tools oder dem Firefox FireBug.Zitat:
Zitat von 00-schneider
Da ich keinen Plan von CSS habe, lass ich das sein. Schade, dann überleg ich mir was anderes für die Seite.
Hi Christian,
das ist scheinbar dasselbe Problem, das ich dir in Git geöffnet hatte :) In meiner 3.2.4 musste ich hierzu aber nichts im CSS anpassen. Ich schau mir das Problem die Tage auch noch mal an.
Hallo,
zunächst einmal vielen Dank für diese wirklich tolle Extension.
Ich habe auf einer Unterseite 2 Tabs erstellt mit verschiedenen Formularen.
Diese will ich nun direkt von der Startseite aus mit 2 Buttons geöffnet auswählen können.
Dies gelingt mir auch sehr gut mittels der Cookies und dann #cookie im Link des Buttons.
Nun hab ich das Problem das sich die Tabs weiter unten auf der Seite befinden, darüber eine Überschrift und etwas Text welcher auch zu lesen sein soll.
Springe ich nun zum geöffnetem Tab sehe ich wie gewollt den Inhalt des Tabs, jedoch natürlich nichts darüber ohne nach oben zu scrollen.
Besteht die Möglichkeit diese Position zu der gesprungen wird, etwas nach oben über die Tabs zu verschieben, etwa mittels CSS oder Javascript?
Grüße
Edit: Hat sich erledigt!
Moin,
sobald ich ein Accordion oder Caroufredsel als Inhalte von Tabcontrol verwende ist die Interaktivität im Dudd. D.h. keine Steuerung mehr möglich im Gegensatz zur Verwendung außerhalb von Tabcontrol. Kennt jemand dieses Problem / Abhilfe ?
Hi,
steh etwas auf dem Schlauch: wo kann ich den Reitern eigene (unterschiedliche) Klassen geben?
Hintergrund: ich möchte jedem Reiter ein eigene Background-image (+ hover/ selected) via css verpassen. Ich sehe allerdings nur, dass die li-Elemente automatisch "tab_0", "tab_1" bekommen und dann "hover" und "selected" hinzugefügt wird. D.h. bisher könnte ich nur einheitliche CSS für alle hover- und selected-Zustände vergeben.
Oder schnall ich das nicht? :eek:
Vielen Dank...
Du kannst in CSS mit mehreren Klassen arbeiten:Zitat:
Zitat von pipkin
LG, GeorgCode:li.tab_0 { color: A; ...}
li.tab_0.hover { color: B; ... }
li.tab_0.selected { color: C; ... }
li.tab_1 { color: D; ...}
li.tab_1.hover { color: E; ... }
li.tab_1.selected { color: F; ... }
Vielen Dank ... allerdings funktioniert das bei mir nicht .. ich glaube, weil "tab_(x)", "selected" und "hover" die Klassen desselben li-Elements sind.
<li class="tab_0 selected hover">Reiter 1</li>
li.tab_0.hover würde also nichts ansprechen. ... ?
Ich habe jetzt die ce_tabcontrol_tab.html5 etwas modifiziert und noch ein div in das Listenelement eingefügt. Die Klassen entsprechen den Bezeichnungen, die ich den Reitern gegeben habe (reiter1, reiter2 etc.) - den Text blende ich ja eh aus.
<ul>
<?php foreach ($this->titles as $key => $title) : ?>
<li class="<?php echo $this->tabs . ' tab_' . $key; ?>"><div class="<?php echo $title; ?>"><?php echo $title; ?></div></li>
<?php endforeach; ?>
</ul>
Damit kann ich meine Background-Images so anwenden:
mytabs.reiter1 (-> Bild 1)
mytabs.selected.reiter1 (-> Bild 2)
mytabs.hover.reiter1 (-> Bild 3)
mytabs.reiter2 (-> Bild 4)
mytabs.selected.reiter2 (-> Bild 5)
mytabs.hover.reiter2 (-> Bild 6)
Hm. Geht sicher auch eleganter ;-)
Doch, es macht genau das, was Du willst. Siehe z.B. http://hyperkontext.at/weblog/artike...n_kombinieren/Zitat:
Zitat von pipkin
N'Abend allerseits...
womöglich gibt es an anderer Stelle schon eine ähnliche Frage.
Ich habe eine linke Spalte, in der ich auf erster Ebene zwischen "News" und "Zeiten" switche. Kein Problem. Nun möchte ich aber im "Zeiten"-Tab auf zweiter Ebene zwischen drei Wochentagen wechseln können. Geht das mit der Extension? Hab schon viel herumprobiert, aber noch keine Lösung gefunden. Ich habe die Einträge der zweiten Ebene auch schon per CSS gewechselt, doch da rutscht mir die Seite natürlich bei jedem Anker-Klick runter an die entsprechende Stelle. Das finde ich suboptimal.
Danke schonmal für die Hilfe.
VG
Michael
Hallo Tabcontroller,
ich habe mein tabcontrol jetzt so eingestellt, dass ich nur über die Registerreiter fahren muss (mit der Maus) und sich damit die Inhalte ändern.
Ist es möglich, die Registerreiter zusätzlich zu Links umzuwandeln? Sodass sie beim Hovern ihre ursprüngliche Funktion behalten, dann aber bei einem klick darauf ein Link aufgerufen wird?
Jemand eine Idee? :)
Vielen Dank!
Du kannst das Template anpassen.Zitat:
Zitat von olop01
Wo macht man eine Template Anpassung denn genau? Wo liegen die Daten von Tabcontrol? :(
Danke für die Hilfestellung! Das Tool ist wirklich sehr nützlich, gute Arbeit!
Kann mir jemand einen Tipp geben, wie kann ich aus dem Panel eines Tabs auf ein anderen Tab linken kann?
Klar, ganz einfach:
*thumbs up*Zitat:
Zitat von christian.barkowsky
Nein, das war nicht die Antwort.
Ich möchte aus dem Inhalt eines Tabs auf einen anderen Tab verlinken.
Das hat vermutlich nichts mit dem Template zu tun!
Das war auch nicht meine Antwort, sondern die des Entwicklers. ...immer.
gerade im Netz gefunden. Ist zwar schon etwas älter, aber vielleicht kann man es ja adaptieren: http://www.sideblog.frische-zitronen...tab-verlinken/Zitat:
Zitat von plusx
Ich finde, dass man dankbar für eine kostenlose Erweiterung sein sollte und auch Verständnis dafür haben muss, wenn der Entwickler nicht alle Probleme löst.Zitat:
Zitat von olop01
Dankbar bin ich auf jeden Fall, und die Erweiterung ist ja auch sehr nützlich.
Aber (gerade bei der Fülle an verfügbaren Erweiterungen auf dem Markt) gibt es einem dann nicht das Recht, unmanierlich zu antworten. Dann lieber gar nix sagen.
Huhu,
ich scheitere gerade an der Verschachtelung von 2 Tabcontrols. Kann mir jemand den korrekten Aufbau der Inhaltselemente nennen? Wenn ich die Tabs des innenliegenden 2. Tabcontrols anklicke, schließt sich alles. CSS liegt gar keins drauf, also muss es an meinem Aufbau liegen. Ich hab grad versucht, den zu visualisieren, aber das ist total komplex, es übersichtlich hinzubekommen oO
Ich brauche ein umliegendes Tabcontrol, das aus 3 Tabs besteht. In dessen 1. Tab befindet sich nur Text, im 2. Tab ein Tabcontrol mit 3 Tabs und im 3. Tab eins mit 2 Tabs.
Knackpunkt ist wohl, dass ich mehrere 2. und 3. Sections habe (### TABCONTROL: 2. SECTION START/END ###) und Tabcontrol nicht versteht, welches Tab zu welchem umschließenden gehört?
Hallo und guten Morgen,
bis zum Contao Update 3.3 habe ich tabcontrol einwandfrei benutzen können. Nach dem Update musste ich MooTools nochmal aktivieren und habe dann festgestellt, das die Fly-Out-Menüs der Navigation nicht mehr aktiv sind. Ich nutze das BigBusiness Theme v1.
Es scheint also einen Konflikt zwischen MooTools und jQuery vorzuliegen. Hat jemand eine Idee woran das liegt?
Salut
T
Hall rennXF,
genau mit dem gleichen Theme habe ich auch in den letzten Tagen diesen Effekt beobachtet. Ich habe alle möglichen Kombinationen versucht, das Menü funktioniert nicht mehr, wenn man Mootools zusätzlich aktiviert.
Bezüglich Tabcontrol musste ich dann auf eine jQuery-Lösung ausweichen, für die es aber (noch) keine Erweiterung in Contao gibt.
http://jqueryui.com/tabs/
Vielleicht hat Christian Barkowsky Lust, die jQuery-Variante mit in die tabcontrol-Erweiterung aufzunehmen?
Hi do_while,
danke für die schnelle Rückmeldung! Wie sah die Lösung in Contao dann aus? Ich nehme an der Javascript-Code ist schon in Contao integriert und du hast ihn irgendwie über CSS-IDs aufgerufen oder?
Salut
Ganz so einfach ist es eben nicht, wenn man nicht gleich eine Erweiterung daraus machen möchte:
1) Ein Template j_tabcontrol.html5 angelegt, welches im Seitenlayout mit ausgewählt wird:
2) Im Artikel, wo die Tabs auftauschen sollen, habe ich einige HTL-Contentelemente eingesetzt, um die Tabs zu formatieren:HTML-Code:<?php
$GLOBALS['TL_JAVASCRIPT'][] = 'http://code.jquery.com/ui/1.10.4/jquery-ui.js';
?>
<script>
$(function() {
$("#tabs").tabs({active: 0});
})(jQuery);
</script>
3) Eine gewisse Menge an CSS braucht es auch, damit es so aussieht:HTML-Code:HTML-Element:
<div id="tabs" class="ce_tabcontrol">
<ul>
<li><a href="{{env::request}}#tabs-1">Tab 1</a></li>
<li><a href="{{env::request}}#tabs-2">Tab 2</a></li>
<li><a href="{{env::request}}#tabs-3">Tab 3</a></li>
</ul>
<div class="panes">
----------------------------------------------------------------
HTML-Element:
<div id="tabs-1">
----------------------------------------------------------------
TEXT FÜR 1. TAB
----------------------------------------------------------------
HTML-Element:
</div>
<div id="tabs-2">
----------------------------------------------------------------
TEXT FÜR 2. TAB
----------------------------------------------------------------
HTML-Element:
</div>
<div id="tabs-3">
----------------------------------------------------------------
TEXT FÜR 3. TAB
----------------------------------------------------------------
HTML-Element:
</div>
</div>
</div>
Ich hoffe, ich habe nichts übersehen.Code:.ce_tabcontrol {
margin-bottom:20px;
}
.ce_tabcontrol .ce_text p {
margin-right:0;
margin-left:0;
font:13px "TitilliumText22LMedium",Arial,sans-serif;
color:#666;
}
.ui-helper-reset {
margin:0;
padding:0;
font-size:100%;
line-height:1.3;
text-decoration:none;
border: 0 none;
list-style: none outside none;
outline: 0 none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
display:table;
border-collapse:collapse;
content:"";
}
.ui-helper-clearfix:after {
clear:both;
}
.ui-helper-clearfix {
min-height:0px;
}
.ui-tabs {
position:relative;
padding:.2em;
}
.ui-tabs .ui-tabs-nav {
margin:0;
padding:.2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
top:0;
position:relative;
float:left;
padding:0;
border-bottom-width:0;
list-style:none outside none;
margin:1px 0.2em 0 0;
white-space:nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
float:left;
padding:.5em 1em;
text-decoration:none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom:-1px;
padding-bottom:1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
cursor:text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
cursor:pointer;
}
.ui-tabs .ui-tabs-panel {
display:block;
padding:1em 1.4em;
border:0px;
background:none;
}
.ui-widget {
font-family:Verdana,Arial,Helvetica,sans-serif;
line-height:1.1em;
}
.ui-widget-content {
border:1px solid #aaa;
color:#222;
background: url("files/theme_data/img/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% #fff;
}
.ui-widget-content a {
color:#222;
}
.ui-widget-header {
border:1px solid #aaa;
font-weight:bold;
color:#222;
background: url("files/theme_data/img/ui-bg_highlight-soft_75_cccccc_1x100.png") repeat-x scroll 50% 50% #ccc;
}
.ui-widget-header a {
color:#222;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border:1px solid #d3d3d3;
font-weight:normal;
color:#555;
background: url("files/theme_data/img/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #e6e6e6;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
text-decoration:none;
color:#555;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
border:1px solid #999;
font-weight:normal;
color:#222;
background: #dadada url(files/theme_data/img/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
text-decoration:none;
color:#222;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border:1px solid #aaa;
font-weight:normal;
color:#222;
background: url("files/theme_data/img/ui-bg_glass_65_ffffff_1x400.png") repeat-x scroll 50% 50% #fff;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
text-decoration:underline;
color:#222;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
border-bottom-right-radius:4px;
behavior:url('assets/css3pie/1.0.0/PIE.htc');
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
border-bottom-left-radius:4px;
behavior:url('assets/css3pie/1.0.0/PIE.htc');
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
border-top-right-radius:4px;
behavior:url('assets/css3pie/1.0.0/PIE.htc');
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
border-top-left-radius:4px;
behavior:url('assets/css3pie/1.0.0/PIE.htc');
}
Ja, sowas Ähnliches habe ich vermutet. Tausend Dank für die Vorlage!
Ich befürchte nur diese Lösung ist leider nicht so ganz otto-normal-redakteur-gerecht. Klar, von der Struktur her ist es nichts anderes als tabcontrol.
Was denkst du, wo die Ursache liegt? Eigentlich müsste doch auch eine Theme-Anpassung helfen.
In meinen Augen ist es das Zusammenspiel von jQuery und Mootools.
Anfällig dafür ist die Menü-Navigation als dem Theme, vielleicht hat es Sinn, den Theme-Hersteller zu fragen, ob man da etwas machen kann.
In anderen Installationen habe ich keine Probleme mit den beiden Frameworks.
Jo, das habe ich mal gemacht. Vielleicht kann er sich eine Reim darauf machen.
Ja, es liegt wohl definitiv an dem Zusammenspiel von MooTools mit jQuery bei dem Theme BigBusiness v1.
Jetzt habe ich festgestellt, dass es auch das Script behindert, welches für das Menü mobiler Geräte notwendig ist. Wenn MooTools deaktiviert ist, geht es wieder.
Ok, ich werde mich wohl auf jQuery versteifen.
Hi do_while,
nun habe ich doch mal deinen Workaround für die jQuery-Reiter ausprobiert. Sobald ich das Template "j_tabcontrol.html5" im Seitenlayout aktiviere, wir die Seite nicht mehr angezeigt und das Error-Log spuckt folgendes aus:
[02-Jun-2014 13:35:32 UTC] PHP Fatal error: Uncaught exception 'Exception' with message 'Could not find template "j_tabcontrol"' thrown in /kundenXYZ/contao2/system/modules/core/library/Contao/TemplateLoader.php on line 127
#0 /kundenXYZ/contao2/system/modules/core/library/Contao/Controller.php(70): Contao\TemplateLoader::getPath('j_tabcontrol', 'html5', 'templates/theme...')
#1 /kundenXYZ/contao2/system/modules/core/library/Contao/BaseTemplate.php(85): Contao\Controller::getTemplate('j_tabcontrol', 'html5')
#2 /kundenXYZ/contao2/system/modules/core/library/Contao/Template.php(244): Contao\BaseTemplate->parse()
#3 /kundenXYZ/contao2/system/modules/core/classes/FrontendTemplate.php(46): Contao\Template->parse()
#4 /kundenXYZ/contao2/system/modules/core/pages/PageRegular.php(673): Contao\FrontendTemplate->parse()
#5 /kundenXYZ/contao2/system/modules/core/pages/PageRegular.php(179): Contao\PageRegular->createFooterScripts(Object(Contao\LayoutModel))
#6 /kundenXYZ/contao2/index.php(263): Contao\PageRegular->generate(Object(Contao\PageModel), true)
#7 /kundenXYZ2/contao2/index.php(447): Index->run()
#8 {main}
Das Template ist angelegt und es ist im Seitenlayout aktiviert. Was kann ich tun?
Nun hat sich der Entwickler von Bigbusiness gemeldet und mir einen Tipp gegeben:
"Können Sie versuchen die Mootoolsquelle auf ""googleapis.com mit lokalem Fallback“ zu stellen?"
Und siehe da: Nun funktioniert tabcontrol wieder.
@do_while: Das müsste für dich interessant sein.
hallo,
ist es denn möglich, dass tabcontroll so eingestellt wird dass sich die inhalte erst beim ersten klick auf einen reiter öffnen?
grüße
oly
das ist doch das standardverhalten, oder nicht? du kannst im CE "reiter" bei "reitergruppe start" unter "reitereinstellungen" wählen ob es beim klick oder beim hover wechseln soll