DIV zu Tab jQuery

hoctar

Erfahrenes Mitglied
Hallo :)
ich brauche hilfe bei folgender Problematik.
Wenn man auf "->" klickt, soll das DIV ausgeblendet werden und als Tab im TAB holder erscheinen.

Folgendes Bild zeigt mein Forhaben genauer:
Bild

So minimiere ich den Container:
Code:
$(".toggle").toggle(function(){

        $(this).parent().fadeOut("fast", function() {


                $(this).fadeIn("fast").addClass("tab");

        });
        
}, function () {

        $(this).parent().fadeOut("fast", function() {

                $(this).fadeIn("fast").removeClass("tab");

        });
});
HTML:
.tab {

        float: right;
        height: 100px;
        width: 28px;
        clear: both;

}
HTML:
<div>
        <div class="toggle">-></div>
        TEXT
</div>
<div>
        <div class="toggle">-></div>
        TEXT
</div>
<div>
        <div class="toggle">-></div>
        TEXT
</div>

Nun leider steht der Tab dann mitten in der Luft, dieser soll aber in den TAB holder.

Nach dem klick auf den Tab, soll der DIV genau wieder an seine ursprüngliche Position in der DIV Ordnung, also wenn ich zuerst Tab 2 schließe, soll dieser nach anschließenden öffnen wieder an der Position 2 stehen.

Ich habe mir überlegt das div zu verstecken und im Tab holder ein stellvertretendes Element auftauchen zu lassen, aber leider habe ich keine Vorstellung wie ich das machen kann ..

ich hoffe mir kann mir jemand helfen. :)
 
Zuletzt bearbeitet:
Hi,

ich verwende das Dojo Toolkit, dort muss man dem Tab-Container eine ID geben und dann den neuen Tab mit "addChild" hinzufügen.

jQuery ist mir zu lauwarm, da muss man sich erst stundenlang einarbeiten und dann erhält man am Ende doch nur ein gutes Ergebnis. Dojo ist kurz einarbeiten und geniale Ergebnisse erhalten. :)
 
Danke für den Tip. :)
Dojo sieht sehr interessant aus.

Ich möchte sehr gern die Sache mit jQuery machen, da ich es bereits oft verwende.
 
Hi,

ich verwende das Dojo Toolkit, dort muss man dem Tab-Container eine ID geben und dann den neuen Tab mit "addChild" hinzufügen.

jQuery ist mir zu lauwarm, da muss man sich erst stundenlang einarbeiten und dann erhält man am Ende doch nur ein gutes Ergebnis. Dojo ist kurz einarbeiten und geniale Ergebnisse erhalten. :)

Naja...ist ja nicht so, dass JQuery dafür nichts parat hat;)

http://docs.jquery.com/UI/Tabs
 
Zurück