Nu de alta, dar atunci când apăs pe el îmi cere parola.

So… Explicați-mi și mie, haterul absolut, ce căcat face norișorul sufletului! (Și mai ales cum ai aflat că face asta!)

Norișorul arată că o aplicație a mai fost instalată, iar apăsarea lui reinstalează acea aplicație.

Încep să cred că cei ce prind contracte babane cu statul în domeniul it au ca angajați niște monkey code ce au ca slogan: noi muncim, nu gândim. Ori asta ori pur și simplu se gândesc din răsputeri cum ar putea face un UX cât mai infect.

Dacă accesezi linkul de mai sus și încerci să completezi formularul unei firme ești pur și simplu copleșit de multitudinea de câmpuri. Asta după ce, în prealabil, ai completat un formular (pe hârtie) cu fix aceleași date și l-ai trimis firmei sus menționate!

Idee

Știu că cei ce sunt plătiți din banii noștri nu dau un scuipat pe ideea asta, dar ar fi cool de aplicat în alte domenii. De exemplu, magazine online.

CNP

Tot Andi zice că dintr-un CNP poți afla: data nașterii, sexul, și județul din care ești. N-ar fi interesant ca atunci când completezi cnp pe undeva să se facă autofill la treburile astea? Sau invers, când completezi data nașterii, sexul etc să îți facă autofill (parțial, ce-i drept) la CNP?

CUI

Pentru firme, la CUI e și mai drăguț. Afli tot. De ce este nevoie să introduc toată povestea (inclusiv adresă, nr.reg.com. etc) când totul se poate face automat?

Utopie?

Va fi vreodată ceva de genul implementat în România la scară largă? Mă îndoiesc. Dar e frumos să visez…

1) Dacă ai email-ul meu și m-am autentificat cu contul de twitter, de ce nu îmi arăți avatarul? De ce este nevoie să fac upload la o imagine când ai două surse din care îmi poți lua imaginea? (Digg)

2) De când nu mai e la modă paginarea așa cum o știam eu? (adică aia cu « 1 2 3 4 ..... 999 ») Cât am dormit? Înțeleg că se actualizează totul atât de repede încât o paginare clasică nu se pretează, dar gândește-te ce se întâmplă când – după 30 de pagini încărcate – îți crapă browserul? E greu să faci o paginare în funcție de id-ul curent? Twitter și Digg fac treaba asta.

3) Video playerul de pe ipad (și bănuiesc că pe iphone e la fel) arată progress bar în partea de sus când e full screen și în partea de jos când nu e full screen?

1. Ce face bifa din dreptul săgeții portocalii?
2. Ce reprezintă săgetuțele din dreptul săgeților roșii?

Așa așa, că tot Apple este cel mai user friendly…

Treaba stă în felul următor: am făcut upgrade la Foobar (de la 0.9x la 1.x). Rezultatul? Toate setările s-au dus. Hotkeys, playlist-uri, tot. A apărut o versiune nouă de Foobar, să-i zicem 1.x+1. Ce s-a întâmplat după instalare? Desigur, s-au pierdut setările…

Apoi vine și rândul Adobe. Am avut CS. Am făcut upgrade la CS2. Apoi la CS3. Apoi la CS4. Absolut nicio versiune nu te întreabă dacă vrei să importe setările.

Mie, unul, îmi vine greu să cred că nimeni de la Adobe nu s-a lovit de problema asta…

Și stau și mă gândesc: cât de greu este să faci un „importator” (?!) pentru setări? Ok, setările au alt format acum, dar TU ești cel ce a făcut formatul precedent! Înțeleg că nu ești în stare să păstrezi același format ( json anyone? ), dar măcar fă dracului un import funcțional.

Fix în aceeași categorie intră programele de back-up. Eu folosesc Acronis True Image și își face treaba excelent. Singura problemă este că… Habar n-am cum să salvez setările!!! Dacă sunt nevoit să reinstalez Windows, trebuie să trec iar prin setările Acronis…

Atentie! Acest post contine elemente video sau javascript ce nu sunt vizibile în feed-ul RSS.
Apasă AICI pentru a vedea versiunea integrală

Via.

De ce tooltips cu javascript? Primele motive ce-mi vin în cap sunt:

1. Știi sigur că sunt afișate cum trebuie în toate browserele. Oricât de ciudat pare, atributul responsabil cu tooltips în browsere nu prea își face treaba. Sau cel puțin nu cum trebuie. Ba textul e trunchiat (dacă e prea lung), ba nu este afișat suficient de mult timp pentru a fi citit, ba e fontul prea mic, atributul title (căci despre el e vorba) se dovedește de multe ori insuficient pentru nevoile de zi cu zi.
2. Le poți stiliza fix cum vrei tu. Le vrei negre, cu fundal semtransparent, și un glow subtil? Crezi că le poți face fără javascript? Mult succes!

Alternative

Înainte de a vedea cum poți face tooltips (într-un mod simplu, așa cum am făcut și până acum), hai să-ți prezit câteva alternative (în cazul în care chiar ți-e extrem de lene sau ești în criză de timp, sunt bune și astea):

• Bassistance.de jQuery tooltip
• jTip
• Bubble tooltips

Și alte câteva (zeci). Totul e să ai răbdare să le cauți. Oricum, cât timp ai pierde căutând și configurând un script pentru tooltip care habar n-ai cum funcționează și îți mănâncă și inutil de mult bandwidth-ul, ai putea sta cinci minute să încerci acest tutorial (care are o introducere mult prea mare )

Poţi stiliza elementul în funcţie de ce ai nevoie. De obicei, am folosit tooltips la mesaje scurte de ajutor (în pagină), prin urmare le stilizam fie cu o imagine cu litera „i” fie cu un semn al întrebării, tot imagine. De ce imagine? Simplu, pentru că arată mai bine

Tooltips statice

Varianta cea mai simplă este cea în care afişezi un tooltip în funcţie de atributul title (sau alt, depinde ce preferi). Asta presupune un element cu o clasă şi un titlu:

<a href="#" class="nTip" title="Tooltip de test">?</a>

Ca să fiu băiat bun, îţi arăt cum poţi face tot script sub forma unui mic plugin de jQuery. Da, e atât de simplu!

jQuery.fn.nTip = function() {
	$(document.createElement('div')).attr('id', 'nTipWrapper').appendTo('body');
	$(this).each(function(){
		var tooltipEl=$(this);
		tooltipEl.data('title', tooltipEl.attr('title')).removeAttr('title');
		tooltipEl.hover(function(e){
			$('#nTipWrapper').empty().html(tooltipEl.data('title')).css({
				left:e.pageX+20,
				top:e.pageY+20
			}).show();
			tooltipEl.bind('mousemove.nTip', function(el){
				if( Math.round($(window).width()/2) > el.pageX ) {
					$('#nTipWrapper').css({
						marginLeft:0
					});
				} else {
					$('#nTipWrapper').css({
						marginLeft:-$('#nTipWrapper').outerWidth()-20
					})
				}
				$('#nTipWrapper').css({
					left:el.pageX+20,
					top:el.pageY+20
				})
			});
		}, function(){
			tooltipEl.unbind('mousemove.nTip');
			$('#nTipWrapper').empty().hide();
		});
	});
};
$('.nTip').nTip();

Ce se întâmplă?

1. jQuery.fn.nTip iniţiază plugin-ul. nTip este numele pluginului (şi îl poţi schimba dacă nu îţi place)
2. Facem un div şi îl inserăm în body. Aşa cum am mai zis şi în alt articol, această variantă e mai rapidă, dar se pare că în jQuery 1.4 va fi la fel de rapidă ca $('<div>')
3. Iterăm fiecare element şi îl atribuim variabilei tooltipEl
4. Pentru a scoate tooltip-ul ce apare implicit, setăm .data('title') să aibe valoarea atributului title, după care ştergem atributul title
5. La hover golim #nTipWrapper, îl poziţionăm lângă elementul „victimă” (cel pentru care afişăm tooltip) şi îl afişăm
6. Acum urmează o treabă tare deşteaptă ce va mişca tooltip-ul după mouse şi va poziţiona tooltip-ul în partea stângă, în cazul în care elementul este prea în margine. Se numeşte namespaced events şi ne permite să îi dăm un nume bindului. Astfel, dacă mai ai şi alte event-uri pe elementul respectiv, nu va fi niciun conflict la unbind (citeşte mai jos).
7. el.pageX şi el.pageY reprezintă poziţia cursorului la mousemove. În funcţie de mousemove se schimbă şi pageX, respectiv pageY. Aceeaşi metodă e folosită şi la hover, un pic mai sus.
8. La mouseout (a doua funcţie din hover) ascundem şi golim #nTipWrapper, după care facem unbind la eventul mousemove. De ce facem asta? Să evităm probleme de genul re-re-re-re-bind pentru un element
9. Iniţializăm plugin-ul pentru toţi selectorii cu clasa .nTip.

Tooltips + ajax = Love

O variantă la tooltips statice sunt cele dinamice, preluate cu ajax. Asta înseamnă că poţi afişa text formatat şi stilizat după cum ai nevoie. În plus, poţi avea un panou de control în care poţi schimba fiecare tooltip într-un mod foarte simplu deoarece fiecărui tooltip îi este atribuit un ID din baza de date:

<a href="tooltip.php?id=1" class="nTip">?</a>

Observi acum că atributul title a dispărut iar href are o valoare reală, de care ne folosim. Parametrul trimis către tooltip.php este ID-ul menţionat un pic mai sus. Codul javascript suferă mici modificări:

jQuery.fn.nTip = function() {
	if(!$('#nTipWrapper').length) {$(document.createElement('div')).attr('id', 'nTipWrapper').appendTo('body');}
	$(this).filter(function(){return $(this).data('hasTooltip') === true ? this : '';}).each(function(){
		var tooltipEl=$(this);
		tooltipEl.data('hasTooltip', true);
		tooltipEl.hover(function(e){
			$('#nTipWrapper').addClass('busy').empty().css({
				left:e.pageX+20,
				top:e.pageY+20
			}).show();
			if(typeof(tooltipEl.data('tooltip'))==='undefined') {
				$('#nTipWrapper').addClass('busy');
				$.ajax({
					type: "GET",
					url: tooltipEl.attr('href'),
					cache: false,
					success: function(data){
						tooltipEl.data('tooltip', data);
						$('#nTipWrapper').removeClass('busy').html(data);
					}
				});
			}else {
				$('#nTipWrapper').removeClass('busy').html(tooltipEl.data('tooltip'));
			}
			tooltipEl.bind('mousemove.nTip', function(el){
				if( Math.round($(window).width()/2) > el.pageX ) {
					$('#nTipWrapper').css({
						marginLeft:0
					});
				} else {
					$('#nTipWrapper').css({
						marginLeft:-$('#nTipWrapper').outerWidth()-20
					})
				}
				$('#nTipWrapper').css({
					left:el.pageX+20,
					top:el.pageY+20
				})
			});
		}, function(){
			tooltipEl.unbind('mousemove.nTip');
			$('#nTipWrapper').empty().hide();
		});
	});
};
$('.nTip').nTip();

Ce se întâmplă?

1. La hover peste fiecare element, golim, poziţionăm şi afişăm #nTipWrapper. De asemenea îi adăugăm o clasă busy. Aceasta ne permite să stilizăm tooltip-ul pentru momentele în care se face request spre server. Spunem utilizatorului ce se întâmplă şi, în plus, arată bine
2. Dacă .data('tooltip') este nedefinit, facem un request ajax iar rezultatul îl introducem în tooltip şi în .data('tooltip'). De ce se întâmplă asta? Pentru a evita câte un request la fiecare hover. Prin acest sistem de caching mărim viteza de răspuns a scriptului. Practic, după primul hover, tooltipul va funcţiona fix ca cel static.
3. Continuarea codului este explicată mai sus, la tooltip-urile statice (este folosit acelaşi cod)

Avantaje/dezavantaje/Când le foloseşti?

Metoda statică

Avantaje

• Avantajul acestei metode: textul e disponibil imediat (metoda cu cererea AJAX implică şi un timp de aşteptare ce variază în funcţie de server dar şi de conexiunea utilizatorului);
• Dacă – din varii motive – javascript-ul nu s-a încărcat, aceste tooltips funcţionează în continuare fără probleme (desigur, nestilizate).

Dezavantaje

• Textul va fi destul de sec, neputând să-i pui formatare (decât cu BBcode, dar asta e altă poveste);
• Poţi folosi doar texte scurte, pentru a nu încărca inutil pagina.

Când le foloseşti?

Când ai texte mici sau când target-ul site-ului sunt fie utilizatori cu conexiune slabă, fie cei cu dizabilităţi vizuale (deci cu js dezactivat)

Metoda dinamică (cu ajax)

Avantaje

• Poţi formata textul folosind taguri html;
• Poţi folosi texte oricât de lungi. Desigur, asta nu înseamnă să scrii un roman într-un tooltip
• Poţi administra toate tooltips dintr-un site într-un mod destul de uşor.

Dezavantaje

• Fiecare tooltip înseamnă un request spre server. Fiecare request spre server înseamnă timp în plus;
• Poţi pune tooltip doar pe elemente de tip a (prin atributul href) sau img (prin atributul longdesc);
• Fără javascript nu există niciun fel de tooltip.

Când le foloseşti?

1. Când ai titluri mai lungi şi nu vrei să încarci sursa paginii cu text aiurea;
2. Când vrei să formatezi textul afişat în tooltip.

Concluzie

Ţi-am arătat cum poţi afişa tooltips ceva mai arătoase decât cele standard într-un mod extrem de simplu şi foarte rapid. Dacă stau să mă gândesc şi să fac o comparaţie între plugin-urile existente şi ce am făcut eu, scriptul meu câştigă detaşat la viteză şi dimensiune. Desigur, sunt mult mai puţine opţiuni, dar în momentul când lucrezi la un proiect trebuie să decizi ce primează: dimensiunea în kb sau opţiunile (de multe ori nefolosite!).

Poţi să „go crazy” şi stiliza fiecare tooltip în mod diferit, adăugând elementului #nTipWrapper câte o clasă diferită în funcţie de elementul pentru care se afişează. De asemenea poţi afişa tooltip-urile astfel încât să nu se „plimbe” după mouse. Cu puţină răbdare, desigur.

Revenind. EiP înseamnă doar că îi oferi utilizatorului opţiunea de a edita un text fără a fi nevoie să părăsească pagina curentă. Desigur, EiP îl oferi doar unui utilizator înregistrat. Păi dacă e înregistrat, de ce să-ţi mai baţi capul? Că de plecat din site nu pleacă, nu? Păi el nu pleacă, dar asta nu înseamnă să-i facem în ciudă, nu? Câteva linii de cod se transferă mai repede faţă de o pagină întreagă. Sau cel puţin după matematica mea.

Markup

Dacă la sistemul de votare spuneam că avem un markup simplu, am cam minţit. Sunt deja două taguri, e stil inline, ce mai? E prea mult de scris! La EiP, markup-ul constă într-un SINGUR tag:

<h1 id="eip-102" class="editable">Edit in place demo</h1>

Cam asta e tot. Ăsta cred că e singurul tutorial unde voi folosi UN tag.

Explicaţii (da, e nevoie!)

1. ID este folosit pentru a fi trimis spre server. Cum XHTML nu prea permite să avem ID-uri numerice, punem o literă/secvenţă de litere;
2. class este folosit ca selector pentru jQuery. Putem folosi orice clasă, fără nicio restricţie, cât timp nu există niciun conflict;
3. TAG-ul nu este important. Poate fi h1, poate fi div sau doar un simplu paragraf, este irelevant, codul funcţionând la fel. Exemplul final va conţine mai multe elemente editabile. De asemenea, CSS-ul nu este important în momentul de faţă.

Javascript

$('.editable').click(function(){
var t=$(this);
	if(parseInt(t.css('line-height'), 10) < t.height()) {
		replaceField('textarea', t);
	}else {
		replaceField('input', t);
	}
});

Explicaţii

1. La fiecare click pe elmentul cu clasa editable, calculăm dacă elementul are un rând de text sau mai multe.
2. În funcţie de câte rânduri are, apelăm o funcţie care injectează un input type="text" sau un textarea

Funcţia replaceField()

function replaceField(type, e) {
	$(document.createElement(type))
		.css({
			position:'absolute',
			left:e.offset().left,
			top:e.offset().top,
			width:e.innerWidth(),
			height:e.innerHeight(),
			fontSize:e.css('font-size')
		}).addClass('editInPlaceField')
		.val(e.html())
		.appendTo('body').focus().blur(function(){
			var t=$(this);
			t.addClass('saving');
			$.ajax({
				type: "GET",
				url: "save.php",
				data: {id:e.attr('id'), data:t.val()},
				cache: false,
				success: function(data){
					e.html(data);
					t.remove();
				}
			});
		});
};//replaceField

Explicaţii

1. Creăm un element textarea sau input. Aşa cum am mai zis, metoda document.create() este mai rapidă. În plus, faptul că folosim argumentul type ne scuteşte de o condiţie
2. Îl poziţionăm absolut şi îi setăm dimensiunile conform cu elementul editabil
3. Îi adăugăm o clasă pentru o stilizare ulterioară
4. Îl adăugăm la body şi îi facem focus
5. La eventu-ul blur() trimitem datele spre server.
6. Dacă totul este ok, textul vechi este înlocuit iar field-ul este şters

save.php

În save.php, doar ca exemplu, curăţăm textul editat. Desigur, urmează şi partea cu inserarea în baza de date şamd:

<?php
	echo strip_tags($_REQUEST['data'], '<a>');
?>

Gata

Cam asta a fost tot. Ca şi până acum, am făcut o treabă ce ar fi „costat” o grămadă de kb dacă foloseai un plugin existent în doar câteva linii de cod.

Având în vedere că de câţiva ani se tot încearcă o migrare a aplicaţiilor desktop spre online (într-o măsură mai mare sau mai mică), taburile nu puteau lipsi. Fie că sunt cât se poate de seci, încărcând fiecare pagină în parte (cu un refresh al browserului), fie că sunt bazate pe AJAX, încărcând doar conţinutul tabului, fie că pur şi simplu se află în sursa paginii ascunse iar utilizatorul le vede după ce face un click, taburile există şi pe online.

Ca utilizator, taburile sunt foarte simplu de folosit. Dar ca programator, oare cât de simplu sunt de implementat?

Partea uşoară (şi nu neapărat cea mai bună)

Cea mai uşoară metodă de a implementa într-un proiect taburi ar reprezenta-o folosirea unei librării gen jQuery UI. Desigur, dacă nu te deranjează să încarci 20kb jQuery şi încă vreo 20kb UI (tabs), plus ceva CSS (nu neapărat necesare). Dar hei, ai o grămadă de opţiuni, events şi metode pe care oricum nu le vei folosi decât foarte rar (spre deloc, îţi spun din experienţă).

Partea un pic mai… „grea”

Ce-ar fi dacă… Îţi scrii singur o funcţie pentru taburi (desigur, nu cu atât de multe opţiuni cum are UI)? Nu sună prea tentant, nu? Dar dacă ţi-aş spune că poţi face asta în câteva linii de cod scrise răsfirat ? Deja ţi-am stârnit interesul! Pentru că, aşa cum ştie toată lumea, mai puţini KB înseamnă o factură mai mică (la hosting) şi un utilizator ceva mai fericit că se încarcă site-ul mai repede. Desigur, la 2-3000 unici/lună nu e mare brânză, dar ia gândeşte-te la un site cu peste 100.000 unici/lună, ar însemna o economie de vreo 2gb (cel puţin!).

Mark-up

Să vedem cu ce ne murdărim pe mâini. Începem cu puţin html:

<ul class="tabs clearfix">
	<li class="s"><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>
	<li><a href="#">Tab 4</a></li>
</ul>

Ca structură, e o simplă listă dezordonată (ce tare sună în română ). Clasa clearfix este o metodă inteligentă (mulţi mă vor contrazice) de a evita problemele cu elementele ce au un floataplicat. De ce am zis că mulţi mă vor contrazice? Pentru că mulţi preferă metoda overflow:hidden, dar din păcate, oricât de curat ar părea, aduce câteva probleme în anumite situaţii. Dacă vrei să foloseşti overflow:hidden, nimic nu te opreşte. Clearfix este o preferinţă personală

Câteva cuvinte despre clearfix am scris în urmă cu câteva luni aici.

Primul element din listă are clasa s (selectat) deoarece arată un pic diferit, astfel încât utilizatorul să ştie ce tab este selectat. Această clasă se va schimba în funcţie de tabul selectat.

CSS

Dacă am pus clearfix la lista de mai sus, înseamnă că elementele listei vor pluti (hmmm… cred că trebuie să renunţ la a mai traduce chestii). Aşadar:

.tabs {
	border-bottom:1px solid #ccc;
}
	.tabs li {
		float:left;
		margin-left:10px;
		border: 1px solid #ccc;
		position:relative;
		top:1px;
		background:#fff;
		-moz-border-radius:5px 5px 0 0;
		-webkit-border-radius: 5px 5px 0 0;
		border-radius:5px 5px 0 0;
	}
		.tabs li a {
			display:block;
			line-height:24px;
			padding:0 10px;
			color:#444;
		}
			.tabs li a:hover,
			.tabs li a:focus,
			.tabs li.s a {
				color:#000;
			}
			.tabs li.s {
				top:2px;
				border-bottom:none;
				background-color:#fefefe
			}

În acest moment, aceste taburi pot fi folosite oriunde, fără pic de javascript. Pe browserele adevărate (FF, Chrome, Safari), taburile au colţurile rotunjite, ceea ce le face mult mai arătoase Desigur, poţi folosi sliding doors pentru a face taburile, dar asta ţine strict de designer. Iar eu vreau să-ţi arăt o tehnică ce ţine mai mult de jquery decât de design.

Mici lămuriri despre .tabs li

• float:left aranjează toate elementele listei unul lângă celălalt
• position:relative şi top:1px ne permit să mutăm puţin mai jos elementul listei, astfel încât linia de jos să fie întreruptă în dreptul tabului selectat
• border-radius (şi toate combinaţiile) rotunjesc colţurile (pe browserele ce suportă CSS 3, desigur). ATENŢIE! Dacă eşti genul care vrea cu orice preţ un fişier valid CSS 2.1, atunci NU ar trebui să foloseşti astfel de proprietăţi (ce ţin, aşa cum am mai zis, de CSS 3)

The magic

Aşa cum am spus mai sus, în momentul acesta ai taburi făcute strict cu CSS. Sunt acele taburi seci, de care am scris la începutul acestui articol. Hai să vedem cum să le facem să nu fie atât de seci. Pentru început, facem o mică modificare asupra codului HTML iniţial:

<div class="tabWrapper">
	<ul class="tabs clearfix">
		<li class="s"><a href="#tabId1">Tab 1</a></li>
		<li><a href="#tabId2">Tab 2</a></li>
		<li><a href="#tabId3">Tab 3</a></li>
		<li><a href="#tabId4">Tab 4</a></li>
	</ul>

	<div class="tab" id="tabId1">
		<h3>Ut enim ad minim veniam</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisic [...]</p>
	</div><!-- /.tab-->

	<div class="tab" id="tabId2">
		<h3>eiusmod tempor incididunt ut </h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisic [...]</p>
	</div><!-- /.tab-->

	<div class="tab" id="tabId3">
		<h3>consectetur adipisicing elit</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisic [...]</p>
	</div><!-- /.tab-->

	<div class="tab" id="tabId4">
		<h3>Lorem ipsum dolor sit amet</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisic [...]</p>
	</div><!-- /.tab-->
</div><!--/.tabWrapper-->

Ce s-a schimbat? Am inclus taburile şi conţinutul acestora ( .tab ) într-un div mare, din două motive: 1) o organizare mai bună şi 2) în cazul în care ai mai multe zone cu taburi într-o pagină, îţi permite sa le stilizezi individual. În al doilea rând, fiecare link din taburi are un atribut href acesta corespunde cu id-ul fiecărui div cu conţinutul tabului. Îţi voi arăta un pic mai jos cum poţi face acelaşi lucru FĂRĂ a folosi niciun ID

Dacă nu vrei să te complici cu request-uri ajax iar utilizatorul să beneficieze instant de informaţia din taburi, aceasta e cea mai la îndemână soluţie. Ce trebuie să faci pentru asta? În primul rând, trebuie să ascundem conţinutul tuturor taburilor, mai puţin cel selectat. Pentru asta avem două metode (sau, dacă adăugăm puţin markup, avem trei metode):

1. Ascundem conţinutul taburilor cu CSS iar când se încarcă scripturile afişăm doar conţinutul tabului selectat
2. Ascundem conţinutul taburilor cu JS, ceea ce presupune că vor exista câteva secunde (sau fracţiuni de secundă, depinde de conexiunea utilizatorului) în care conţinutul tuturor taburilor va fi vizibil
3. Adăugăm o clasă (gen s) unui div.tab, după care ascundem din CSS totul în afară de acesta. Această metodă mi se pare prea intruzivă pentru a o folosi. Oricum, dacă nu îţi place niciuna din primele două metode, asta e soluţia finală

Asta e o alegere ce poate varia de la proiect la proiect, dar de cele mai multe ori prefer să ascund conţinutul cu javascript dintr-un motiv foarte simplu: în cazul în care (din varii motive) nu se încarcă toată pagina, conţinutul este vizibil utilizatorului. Simplu şi eficient.

Varianta pe bază de ID

$('.tabWrapper').each(function(){
	var t=$(this);
	t.find('.tab').hide();
	t.find('.tabs a').click(function(){
		var th=$(this);
		t.find('.tab').hide(); // ascundem toate taburile
		$(th.attr('href')).show(); // în fucţie de atributul href (care aşa cum am spus mai sus corespunde cu ID-ul pe care îl are conţinutul tabului)
		t.find('.tabs .s').removeClass('s');
		th.parent().addClass('s'); // adăugăm clasa s pentru tabul selectat
		return false;
	});
	t.find('.tabs li.s a').click(); // păcălim browserul să facă un click pe tabul selectat
});

Varianta curată (mai simplă şi mai neintruzivă)

Aşa cum am spus mai sus, sunt două variante pentru a ascunde şi a arăta conţinutul taburilor: fie pe bază de ID (aşa cum am arătat mai sus) fie pe baza succesiunii din cod. A doua variantă este un pic mai inflexibilă deoarece ordinea taburilor în cod trebuie să corespundă cu ordinea elmentelor .tab. Unii consideră o problemă, alţii nu (eu fac parte din alţii). Astfel, din codul HTML de mai sus eliminăm toate id-urile şi referinţele spre ele:

<ul class="tabs clearfix">
	<li class="s"><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>
	<li><a href="#">Tab 4</a></li>
</ul>
	<div class="tab">
		<h3>Ut enim ad minim veniam</h3>
		<p>Lorem ipsum dolor sit amet, consectetur [...]</p>
	</div><!-- /.tab-->
	<div class="tab">
		<h3>Ut enim ad minim veniam</h3>
		<p>Lorem ipsum dolor sit amet, consectetur [...]</p>
	</div><!-- /.tab-->
	<div class="tab">
		<h3>Ut enim ad minim veniam</h3>
		<p>Lorem ipsum dolor sit amet, consectetur [...]</p>
	</div><!-- /.tab-->
	<div class="tab">
		<h3>Ut enim ad minim veniam</h3>
		<p>Lorem ipsum dolor sit amet, consectetur [...]</p>
	</div><!-- /.tab-->

$('.tabWrapper').each(function(){
	var t=$(this);
	t.find('.tab').hide();
	t.find('.tabs a').click(function(){
		var th=$(this);
		var index = t.find('.tabs a').index(this); // vedem al câtelea tab e selectat (numărătoarea începe de la 0
		t.find('.tab').hide().eq(index).show(); // ascundem toate taburile şi îl afişăm pe cel ce corespunde cu indexul setat mai sus
		t.find('.tabs .s').removeClass('s');
		th.parent().addClass('s');
		return false;
	});
	t.find('.tabs li.s a').click();
});

GATA!

În zece linii de cod ai o soluţie rapidă (şi foarte simplă, ce-i drept) pentru taburi. Probabil într-un viitor nu foarte îndepărtat (în funcţie de reacţiile pe care le va genera acest articol) voi pune un al doilea episod în care îţi voi arăta cum poţi face taburi folosind AJAX, callback-uri (foarte utile!) şi taburi bookmark-able (în funcţie de tabul selectat se schimbă şi url-ul paginii FĂRĂ refresh) sau alte bunătăţuri.