[QUOTE=racoon;10430]Also es ist folgendermaßen: Es geht nun, aber natürlich mit nem ganz üblen css. Kommt aus der jquery-css datei. egal. ist schon ein erfolgserlebnis, auch wenn es echt übel aussieht. aktuell noch alles hard-gecodet.
Ich muss in der _details.tpl dies stehen haben:
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$('#example').tabs();</code></pre>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
in der _header.tpl muss jedoch auch die funktion drin stehen. Es funktioniert nicht, dass sie in der oxid.js steht. Obwohl es ja so sein sollte.
_header.tpl
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
</script>
Das ganze ist natürlich absolut überladen und es dauert ewig bis alles geladen ist.
Werde die tage rausfinden, was ich tatsächlich brauche und warum ich die funktionen nicht in die oxid.js auslagern kann.
genauso wenig funktioniert es in der _header.tpl die script-librarys zu laden. dies wird im body benötigt. Ich versteh das wirlich nicht!!!
Kann jmd von oxid mal was dazu sagen…wäre sehr dankbar. Natürlich ist morgen der große Event es reicht ja auch noch am Montag ;)[/QUOTE]
Für so ein paar lausige Tabs JQUERY zu verwenden ist der [B]totale [/B]Overkill.
Mit minimalstem “handgeklöppeltem” Javascript machst Du das auch…
In obigem Besipiel:
Die “
One” bekommen ein “onclick” verpasst.
“
One”
usw…
Dann ein wenig Javascript:
var active_tab=1;
function switch_tabs(tab_nr)
{
//Hide active tab
var element=document.getElementById('fragment-'+active_tab);
if (element)
{
element.style.display='none';
}
//Show new tab
active_tab=tab_nr;
element=document.getElementById('fragment-'+tab_nr);
if (element)
{
element.style.display='block';
}
}
Dann ein wenig CSS:
#fragment-2,
#fragment-3 {
display:none;
}
und schon ist das Grundgerüst fertig.
Man kann natürlich die Tabs mit Grafiken für aktiv/inaktiv hinterlegen, die man beim “hovern” oder nach der Auswahl auf den aktiven Zustand setzt, bzw. auf den inaktiven zurück setzt.
Sind auch nur ein paar Zeilen Javascript und CSS mehr…
