Vezi un demo la http://bitesizebugs.com/lab/jquery/tabtoggle/

Sursa la: http://github.com/oslego/tabToggle/tree/master

Problema

Exista zeci de plugin-uri de jQuery prin care se obtine comportamentul JS de tab navigation, insa majoritatea developerilor au fost prea zelosi. Desi urmaresc acelasi behavior plugin-urile pe care le-am studiat vin la pachet cu multe alte functionalitati gen efecte vizuale, ajax calls, actiuni multiple pentru acelasi click sau impun o conventie de naming de tipul: “#tab_1″ declanseaza “#tab_content_1″.

Aceste workflow-uri fie iti fac munca enervanta (naming conventions) fie inseamna fisiere inutil de greoaie (12+ kb). Toate astea cand vrei doar un meniu de tip navigation.

Ideea

Am avut nevoie de un plugin simplu de tab navigation asa ca mi l-am scris: jquery.tabToggle.js.

Cand folosesti tabToggle iti selectezi prin jQuery un set de elemente care actioneaza drept triggers (tab-urile) si le atribui un alt set de elemente care joaca rolul contiutului corespunzator fiecarui tab (targets).

Atat! Fara conventii de nume, fara obligatia de a lucra doar cu UL-uri sau alte forme de ingradire a strucurii. Singura conditie este ca numarul de triggers sa fie egal cu numarul de targets – un aspect logic, de bun simt :)

Vezi exemplul de cod de pe pagina de demo pentru detalii tehnice.

Pentru moment singurul behavior este de visibility toggle a targetului atunci cand faci click pe trigger-ul corespunzator. Am vrut ca tabToggle sa fie simplu si la obiect.

Pentru flexibilitate intentionez sa expun public in JavaScript metodele care se ocupa de managementul elementelor ca sa iti poti defini orice efect sau behavior iti doresti.

Nu vreau sa iti limitez creativitatea cu tabToggle. Vreau doar sa iti ofer functionalitatea de baza pentru un meniu de tip tab navigation. Nu intentionez sa extind tabToggle cu support pentru AJAX calls sau sa definesc animatii intre tranzitii. Exista deja plugin-uri care fac asta.

Il aveam scris de mai demult dar in cursul weekend-ului l-am curatat, l-am documentat, l-am testat si l-am dat comunitatii sub forma de cod open source. In versiunea minified codul are sub 1kb deci va lasa o urma foarte mica asupra bandwidth-ului consumat.

Git – version control

Cu ocazia asta am invatat sa folosesc si git – un sistem de version control. Am cont pe github si mi-a placut ca mi-a dat version control, wiki, si bug tracker, gratuit, in acelasi pachet.

Partea cea mai gustoasa la git este considerata usurinta in operatiunile de fork si merge ale repository-ului – o componenta cheie in proiectele la care lucreaza mai multe persoane.

Mai mult open source

Dupa ce l-am facut public am primit mai multe aprecieri din partea prietenilor. Asta m-a incurajat sa pregatesc pentru publicare si alte bucati de cod JavaScript sub forma de jQuery plugins.

Daca ai ceva de spus esti binevenit sa lasi un comentariu.
Daca observi functionalitate gresita te rog sa deschizi un issue pe github ca sa il pot investiga si/sau repara.

Licenta?

Codul e open source deci il poti folosi fara obligatii in orice proiect. Nu ma pricep la licente asa ca poti folosi acest plugin atat in proiecte personale cat si comerciale fara obligatii.

Intentionez sa public viitoare plugin-uri sub licente MIT si GPL, la fel ca licentele pentru jQuery.

Intrebare pentru cei mai priceputi juridic: exista o alternativa de licenta mai potrivita pentru acest tip de cod?

$.get("feeds.opml", function(data){
	var count = $(data).find('outline[type="rss"]').length;
	console.log(count);
});

In exemplu feeds.opml reprezinta fisierul tau cu feed-uri.
Poti exporta un opml cu feed-urile tale din Netbvibes din meniul “Your profile” > “Feeds”.