Multi tab ajax forma

[pedjamil]

Imam jedno pitanje, ako neko moze da pomogne.

Da li je moguce napraviti multi tab formu u kojoj se tabovi ucitavaju ajax-om (jedna stranica, jedan tab).

Problem je ovde kako sacuvati sadrzaj jednog taba, pri otvaranju nekog drugog.

 

[AlexxandarYo]

Nije to problem ne moras da obrises sadrzaj taba kada hoces da se drugi ucita samo upotrebis css.
Znaci svaki tab bude jedan div trenutno aktivan tab ima display: block; ostali skriveni display: none;

 

[pedjamil]

Tako je trenutno uradjeno i to je veliki problem, jer je stranica obimna i ima 3000 linija (ne pitaj kako i zasto).

 

[kraft]

Naravno da je moguce, klikom na svaki tab pozoves js funkciju koja ti radi ajax request i rezultat upise u polje koje ti hoces.

 

[IgorHW]

A zasto je problem sto stranica ima 3000 linija? Usporava browser?

 

[rushko]

Probaj jQuery UI tabs ako ti treba gotovo resenje.

 

[pedjamil]

A zasto je problem sto stranica ima 3000 linija? Usporava browser?

To je malo duza prica. Problem je sto se ne zna ko pije ko placa, jer je na tome radilo nekoliko ljudi do sad, a i eclipse recimo ume da zakuca.

 

[markoc]

Ako ovo nije reseno da pripomognem. 🙂 Ako jeste, mozda posluzi nekom drugom. Ustvari je vrlo jednostavno, i ne moras da ih pozivas preko Ajaxa.

Ovako:
Napravis tabove, mogu biti <ul><li> tagovi, <a> ili sta vec, napravis boxeve sa <div> tagovima i prikazujes ih na klik na odredjeni tab.

Primer:

HTML:

<ul class="tabs>
    <li><a class="tab1" href="#">Tab 1</a></li>
    <li><a class="tab2" href="#">Tab 2</a></li>
    <li><a class="tab3" href="#">Tab 3</a></li>
</ul>

<div id="tab1">Sadrzaj prvog taba</div>
<div id="tab2">Sadrzaj drugog taba</div>
<div id="tab3">Sadrzaj treceg taba</div>

CSS:

ul.tabs li {
    float: left;
}

#tab1, #tab2, #tab3 {
    clear: left;
    display: none;
}

jQuery:

$(document).ready(function() {

    $("#tab1").show(); // ovo ce prikazati samo prvi tab, moze i preko css-a

    $("ul.tabs li a.tab1").click(function() {
        $("#tab1").show();
        $("#tab2").hide();
        $("#tab3").hide();
    });

    $("ul.tabs li a.tab2").click(function() {
        $("#tab1").hide();
        $("#tab2").show();
        $("#tab3").hide();
    });

    $("ul.tabs li a.tab3").click(function() {
        $("#tab1").hide();
        $("#tab2").hide();
        $("#tab3").show();
    });

});

Nisam testirao ali trebalo bi da radi. 😀 Naravno include-uj jquery na stranicu ako vec nisi. 🙂