Taburi cu jQuery UI (III)


În două articole am pus nişte baze, cu exemple simpluţe. De fapt nici acum nu vom face ceva teribil de complicat, dar totuşi cunoştinţele de jQuery devin vitale. Mai întâi două butoane banale: unul care ne spune al câtelea tab e deschis (e important să reţinem că jQuery UI le numără de la 0, deci primul tab e cu indicele 0, al doilea cu indicele 1 ş.a.m.d.), respectiv unul deschide (activează) tabul al doilea (adică cel cu indicele 1). Sunt chestii simple, veţi vedea în cod. Lucrurile se complică puţin dacă dorim să adăugăm dinamic taburi.

imagine

Pentru a adăuga noi taburi evident trebuie să creăm nişte div-uri (de fapt unul per tab), după care folosim funcţia pusă la dispoziţie de jQuery UI. Sunt variaţii dacă ce punem în tab preluăm cu Ajax, dar rămânem la exemplu nostru, care poate fi văzut live aici. Nu am pierdut timp cu verificări, aşa că asiguraţi-vă Dvs că scrieţi un titlu în căsuţa input şi un conţinut în textarea, care să fie adăugate ca taburi 😉 – altfel adaugă un tab fără titlu şi cu conţinut vid, ceea ce nu e prea simpatic. Evident, scriind cod poţi face şi ştergere de taburi, fără să fie mare filosofie. Mai jos pun doar partea de JavaScript (dar în sursă puteţi vedea totul).

nrtaburi=3;
$("#taburi").tabs();
$("#cetab").click(function(){
    alert("Tabul numarul "+($("#taburi").tabs('option', 'selected')+1)+"!");
});
$("#desch2").click(function(){
    $("#taburi").tabs('select',1);
});
$("#adauga").click(function(){
    nrtaburi+=1;
    $("#taburi").append("<div id='tabulnou"+nrtaburi+"'>"+$("#continut").val()+"</div>")
    $("#taburi").tabs('add','#tabulnou'+nrtaburi,$("#titlu").val());
});
$("button").button();

A! În codul de mai sus am folosit deja şi butoanele puse la dispoziţie de jQuery (se pot aplica şi de butoanele de submitere a formularelor, de exemplu… chiar şi pe linkuri).

Şi în fine, mai avem şi o variantă 5 care aduce nişte x-uri pentru a închide taburile deschise. Studiaţi sursa deschizând linkul dat, iar mai jos se vede cu un iframe.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *