Taburi cu jQuery UI (II)


Încercăm să mergem mai departe şi am să mă folosesc de exemplele oferite oficial de jQuery UI – vedeţi aici – dar mai pe scurt. În al doilea exemplu vom avea trei seturi de taburi (pentru că da, putem avea mai multe în aceeaşi pagină) cu trei efecte diferite. Astfel la primul set cu o singură linie de cod am schimbat comportamentul: taburile se schimbă când trecem cu mouse-ul pe deasupra, nu la click. În al doilea set iarăşi avem o schimbare de comportament: un click pe un tab îl deschide (activează), iar al doilea click minimizează (ascunde) conţinutul. În fine, al treilea set are taburile… sortabile: pot fi trase cu mouse-ul şi rearanjate. Tot ce am descris se face cu următoarele linii de cod.

$(function(){
    $( "#taburi1").tabs({
        event: "mouseover"
    });
    $( "#taburi2").tabs({
        collapsible: true
    });
    $( "#taburi3").tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" });;
});

Puteţi vedea codul în acţiune mai jos sau deschizând acest link.

În fine, mai tratăm rapid încă un caz. Am dori ca taburile să fie persistente, adică la o reîncărcare să apară deschis cel care a fost ultima oară deschis. Pentru aceasta revenim la arhiva descărcată (vezi articolul anterior) şi din folderul development-bundle, subfolderul external, copiem jquery.cookie.js în folderul js şi evident îl includem. În partea JavaScript trebuie să folosim ceva de genul:

$( "#taburi").tabs({
    cookie: {
        expires: 30 //30 de zile adica
    }
});

Puteţi vedea codul în acţiune mai jos sau deschizând acest link.


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 *