Ajax Tab Content in Contao als Modul - Warum geht das nicht?
Hallo liebe Contao-Gemeinde,
ich möchte ein Prozessablaufdiagramm als Tab-Content darstellen und habe bei www.dynamicdrive.com ein Ajax-Script gefunden und dieses für meine Zwecke etwas adaptiert.
Die modifizierte Demo funktioniert tadellos, genau so wie ich mir das vorgestellt hatte.
Hier der Link zur HTML-Demo: bitte hier klicken
Jetzt habe ich das ganze wie folgt in Contao eingebunden:
1. Ein neues Seitenlayout erstellt.
Darin die Ajax-Tabs-CSS eingebunden. Unter "Zusätzliche <head>-Tags" folgenden Code eingefügt:
Code:
<script type="text/javascript" src="tl_files/XXX/ajax_tabs/ajaxtabs/ajaxtabs.js">
/***********************************************
* Ajax Tabs Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
Und unter "Eigener JavaScript-Code" folgenden Code:
Code:
<script type="text/javascript">
var myflowers=new ddajaxtabs("flowertabs", "flowerdivcontainer")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()
</script>
2. Ein Modul mit eigenem HTML-Code erstellt. Hier der Code:
Code:
<!-- indexer::stop -->
<div id="ablauf">
<div id="flowerdivcontainer" style="width:588px; height: 300px; background-color: #FFF; padding: 5px; margin-left: 30px;">
</div>
<div id="tab_prev">
<a href="javascript:myflowers.cycleit('prev')">
<img src="../tl_files/XXX/ajax_tabs/images/button_blank.png" alt=" " /></a></div>
<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li class="tab1"><a href="../tl_files/XXX/ajax_tabs/external1.htm" rel="flowerdivcontainer" class="selected"><img src="../tl_files/XXX/ajax_tabs/images/images/beratung_blank.png" alt=" " /></a></li>
<li class="tab2"><a href="../tl_files/XXX/ajax_tabs/external2.htm" rel="flowerdivcontainer"><img src="../tl_files/XXX/ajax_tabs/images/images/angebot_blank.png" alt=" " /></a></li>
<li class="tab3"><a href="../tl_files/XXX/ajax_tabs/external3.htm" rel="flowerdivcontainer"><img src="../tl_files/XXX/ajax_tabs/images/images/konzept_blank.png" alt=" " /></a></li>
<li class="tab4"><a href="../tl_files/XXX/ajax_tabs/external4.htm" rel="flowerdivcontainer"><img src="../tl_files/XXX/ajax_tabs/images/images/inhalt_blank.png" alt=" " /></a></li>
<li class="tab5"><a href="../tl_files/XXX/ajax_tabs/external5.htm" rel="flowerdivcontainer"><img src="../tl_files/XXX/ajax_tabs/images/images/freigabe_blank.png" alt=" " /></a></li>
<li class="tab6"><a href="../tl_files/XXX/ajax_tabs/external6.htm" rel="flowerdivcontainer"><img src="../tl_files/XXX/ajax_tabs/images/images/beratungsservice_blank.png" alt=" " /></a></li>
</ul>
</div>
<div id="tab_next">
<a href="javascript:myflowers.cycleit('next')">
<img src="../tl_files/XXX/ajax_tabs/images/button_blank.png" alt=" " /></a>
</div>
</div>
<!-- indexer::continue -->
3. Das Modul als Inhaltselement in folgende Seite eingebunden: Bitte hier klicken.
Warum funktioniert das einfach nicht?
Die Tabs werden einfach nicht angezeigt. Sie werden sogar im Firebug ausgegraut dargestellt, als wären sie der Klasse "invisible" zugeordnet, was sie nicht sind. :(
Ich versteh das einfach nicht. :o
Ich denke es liegt an der CSS, irgendwie, ich weiss eben nur nicht wie und warum.
Aber mir kommt folgendes komisch vor:
Code:
.modernbricksmenu2{
padding: 0;
width: 660px;
border-top: 5px solid #ff9000;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
"voice-family"? Ich kannte das bis dato gar nicht, habe danach gegooglet und herausgefunden dass es tatsächlich was mit der "Stimme" zutun hat und die Attribute "male, female, child und inherit" haben kann. Aber "\"}\"" ??
Wenn ich das ganz weg mache, zeigt es mir gar nix mehr an :eek:. So wie es im Original deklariert wird, ist es auch nicht W3C-Konform, daher habe ich es auf "\" gekürzt, dann meckert W3C nicht mehr und es wird wenigstens etwas angezeigt.
Könnt ihr mir da irgendwie weiterhelfen? :o
Ich bin echt noch totaler Anfänger und mit sowas eeeetwas überfordert :o
Ich freue mich auf jede Hilfestellung.
Vielen Dank im Voraus.
Liebe Grüße,
pyretta
Edit: Ich benutze die Contao Version 2.9.0.
Ich habe zwar im Extension Repository eine Erweiterung namens "tabcontrol" gefunden, aber diese scheint nur bis zu einer Version 2.7.2 kompatibel zu sein und wird mir auch im Contao eigenen Erweiterungskatalog nicht angezeigt. Ich habe es aber trotzdem versucht manuell zu installieren, nur leider ohne Erfolg. Deshalb versuche ich mich an eben diesem oben beschriebenen Code.
