În primul rând o să fac o listă cu necesitățile pentru a face chestia să funcționeze:

• ultimul release jQuery (in acest moment v1.3.2)
• vreo 20minute libere

Bun, acum trebuie să facem o simplă listă neordonată. Asta ar arăta în felul următor:

 
<ul id="unordered_list">
<li class="current">Item 0</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
 

ID-ul listei si clasa primului element din listă ne vor folosi puțin mai târziu când ne vom "plimba" prin listă cu Javascript, așa că luați-le "as is". Și dacă tot ne vom juca prin elemente ar fi bine să definim o clasă de CSS pentru elementul curent. Eu am fost puțin mai interesat de subiect decât de felul în care arată așa că am făcut următoarea clasă:

.current { background: yellow; }

Bun, acum nu ne mai trebuie decât 4 butoane: pentru a adăuga elemente, pentru a șterge elemente, pentru a trece la elementul următor și la cel precedent. Asta s-ar traduce prin:

 
<input id="add" type="button" value="Add new item" />
<input id="remove" type="button" value="Remove item" />
<input id="prev" type="button" value="Previous item" />
<input id="next" type="button" value="Next item" />

În acest moment suntem gata să scriem Javascript. Două funcții importante pe care le vom folosi în exemplul de mai jos sunt cele care îmi vor întoarce numarul elementelor din listă și poziția elementului curent.

function ul_size()
{
	var size = $("#unordered_list").children('li').size();
	$(".size").text('Size: '+size);
 
	return size;
}
 
function ul_pos()
{
	var current_pos = $(".current").prevAll().length;
	$(".current_pos").text('Current: '+current_pos);
 
	return current_pos;
}

Puteți ignora momentan metoda .text(). Pe scurt, funcția ul_size() numără elementele de tip li din lista noastră, iar funcția ul_pos() numără toate elementele dinaintea celui curent. Acum mai trebuie doar să adăugăm acțiuni pe cele 4 butoane de care vorbeam mai sus.

$("#add").click(function ()
{
	var size = $("#unordered_list").children('li').size();
	$("#unordered_list").append('
<li>Item '+size+'</li>
 
');
 
	ul_size();
});
 
$("#remove").click(function ()
{
	if(ul_size() != 1)
	{
		$("#unordered_list li:last").remove();
		ul_size();
	}
});
 
$("#prev").click(function ()
{
	if(ul_pos() != 0)
	{
		$(".current").removeClass('current').prev('li')
                     .addClass('current');
		ul_pos();
	}
});
 
$("#next").click(function ()
{
	if(ul_size() &gt; ($(".current").prevAll().length)+1)
	{
		$(".current").removeClass('current').next('li')
                     .addClass('current');
		ul_pos();
	}
});

Am pregătit și un exemplu pe care îl puteți vedea aici.

Dacă aveți întrebări, comentarii sau sugestii, folosiți formularul de mai jos.

Acestea fiind zise, astăzi o să facem următoarele:

• o să stilizăm un tabel obişnuit (CSS aplicat cu jQuery)
• o să-i dăm o notă mai accentuată rândului pe care ne poziţionăm mouseul
• o să-i adăugăm un selector

Bun, să începem cu tabelul. Eu am făcut un tabel obişnuit cu nişte valori random. Rezultatul îl puteţi vedea mai jos.

 
<table>
<tbody>
<tr>
<th>first name</th>
<th>last name</th>
<th>city</th>
</tr>
<tr>
<td>john</td>
<td>doe</td>
<td>the "big apple"</td>
</tr>
<tr>
<td>anne</td>
<td>robinson</td>
<td>the city of angels</td>
</tr>
</tbody>
</table>
 

Bun. Acum o să facem câteva clase CSS pentru tabelul nostru. În primul rând ne trebuie o clasă pentru rândurile pare şi una pentru rândurile impare ca să-i dăm un mic contrast să poată fi citit cu uşurinţă. ( Ca sugestie, încercaţi să faceţi abstracţie de culori pentru că nu prea sunt "pe domeniul meu" )

.odd { background: #D1E6E7; }
.even { background: #94d1e6; }

Acum să facem ceva ca să dăm o notă mai accentuată rândului peste care ţinem mouseul. Voi denumi această clasă mouseover.

.mouseover { background: #fff395; }

Şi suntem aproape gata...ne mai trebuie totuşi o ultimă clasă care să ne permită "selectarea" rândului dorit. O să-i spunem click.

.click { background: #feb40c; font-weight: bold; }

Ok, acum deţinem tot CSS-ul de care avem nevoie, urmează să-l convingem pe jQuery să facă treaba în locul nostru În principiu azi o să folosim funcţiile addClass(), removeClass(), mouseover(), mouseout() şi toggle(). Documentaţie pentru ele găsiţi pe documentaţia jQuery.

Să ne gândim cam ce ar trebui să facem noi cu jQuery...în primul rând să asociem clasele odd şi even rândurilor de care aparţin (în speţă, cele impare şi cele pare), să punem clasa mouseover pe aceste rânduri când trece mouseul, şi s-o scoatem când nu mai e mouseul deasupra. Acest lucru se face cam aşa:

$("tr:even").addClass("even")
.mouseover(function () { $(this).addClass("mouseover"); })
.mouseout(function () { $(this).removeClass("mouseover"); });
 
$("tr:odd").addClass("odd")
.mouseover(function () { $(this).addClass("mouseover"); })
.mouseout(function () { $(this).removeClass("mouseover"); });

Ne mai rămâne să facem "selectorul". Ideea e simplă: când dai click pe un rând îşi schimbă culoarea, iar când faci al doilea click pe acelaşi rând revine la normal. jQuery are implementată o funcţie care se cheamă toggle() şi care face exact ce ne trebuie! Haideţi să vedem cum arată...

$("tr").toggle(
function ()
{
	$(this).addClass("click");
},
function ()
{
	$(this).removeClass("click");
}
);

Şi cam asta a fost tot! Nu-mi spuneţi că vă aşteptaţi să fie mai complicat E destul de simplu când foloseşti o librărie care-şi uşurează munca.

Ok, acum haideţi să vă arăt şi rezultatul final. Pentru a vedea mai multe detalii nu vă rămâne decât să vă uitaţi peste sursă. Pentru alte detalii, formularul de jos vă aşteaptă să-l folosiţi!

Prima dintre ele îi aparţine lui @extraordinaire care a propus clasicul `window.open`. Din păcate problema e că arată urâţel un onclick care conţine un `window.open` şi presupun că va fi tratat ca pop-up de majoritatea adblock-urilor. O altă soluţie primită am înţeles că a fost clasicul `rel="external"` tratat cu Javascript.

Eu vreau să vă arat cea mai simplă şi curată soluţie folosind jQuery. Respectând zicala jQuery, `let's write less and do more`

$(document).ready(
   function ()
   {
       $("a[@rel*=external]").attr( { target: "_blank" });
   }
);

Ne mai rămâne doar să includem libraria jQuery şi să punem acest script între <head> şi </head> şi totul e gata. Orice link care va avea `rel="external"` va fi deschis într-o pagină nouă. Simplu şi curat!

Cu un pas mai aproape de `Javascript Rockstar`

În unul din comentarii Brayn sugera ca tooltip-ul să funcţioneze în felul următor:

• textul din alt să fie înlocuit cu un id
• tooltip-ul va afişa în final textul dinamic (în cazul nostru îl vom scoate dintr-o bază de date MySQL)

În consecinţă am aflat că avem nevoie de câteva lucruri...

• o bază de date MySQL
• un fişier care interacţionează cu serverul MySQL
• o funcţie Javascript care face cererea către acest fişier

1. Baza de date

Bun, haideţi să facem o bază de date nouă şi s-o populăm cu nişte informaţii (textele pe care le vom afişa mai apoi în tooltip).

 CREATE DATABASE `tooltip` ;

Acum vom face şi o tabelă pe care eu am numit-o definition. Pe scurt este vorba de 2 câmpuri: uid - "unique id" (în care se va afla id-ul pe care noi îl vom citi din proprietatea alt a imaginii) şi text - "informaţia ce se va afişa în tooltip".

 CREATE TABLE `tooltip`.`definition` (
`uid` INT NOT NULL AUTO_INCREMENT ,
`text` TEXT NOT NULL ,
PRIMARY KEY ( `uid` )
) ENGINE = MYISAM

Dacă aveţi vreo nelamurire despre SQL puteţi consulta nişte manuale online. OK, acum mai trebuie să populăm baza de date proaspăt creată...

INSERT INTO `definition` (`uid`, `text`) VALUES
(1, 'First tooltip information coming from a mysql database.'),
(2, 'We also have a second database entry
for showing you the text you were looking for!'),
(3, 'And some more information. You like it, huh? <img src='http://www.bogdanconstantinescu.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> '),
(4, 'Showing possible thanks to jQuery ajax httprequest <img src='http://www.bogdanconstantinescu.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> ');

Acestea fiind făcute nu ne rămâne decât să trecem la urmatorul pas, realizarea fişierului care va face legătura cu serverul MySQL.

2. Scriptul server-side

Această etapă o puteţi face utilizând orice limbaj de programare server-side care vă place. Personal o să aleg php pentru că pe el îl stăpânesc cel mai bine. Pe scurt ceea ce trebuie să realizăm va arăta cam aşa:

• aşteptăm sa fie transmis un parametru la chemarea fişierului
• ne conectăm la serverul MySQL
• facem interogarea şi afişăm rezultatul.

Treabă simplă. În consecinţă ajungem la un rezultat asemănător cu cel de mai jos.

/* ne conectam la serverul mysql si
selectam baza de date pe care vom lucra */
$dbh = mysql_connect("localhost", "user", "parola");
mysql_select_db("tooltip");
 
/* verificam sa fie curat inputul si ii
scoatem spatiile goale din jurul sau */
$request = strip_tags(trim($_POST['uid']));
 
/* facem select-ul in functie de ID */
$qry = mysql_query("
		SELECT
			text
		FROM
			`definition`
		WHERE
			uid='". $request ."'");
 
/* afisam textul pentru tooltip aferent ID-ului cerut;
daca ID-ul cerut nu exista ii spunem acest lucru*/
if(mysql_num_rows($qry) != 0)
	echo mysql_result($qry, 0);
else
	echo "Sorry, that does not exist!";
 
/* si in final inchidem conexiunea la server */
mysql_close($dbh);

Fişierul în cauză eu l-am denumit tooltip.php (ne va fi de folos în ultimul pas)

3. Let's do some Javascript magic

Bun, deci avem baza de date, avem fişierul care face output în funcţie de parametrul care îi este trimis (în cazul nostru metoda este POST) şi ne rămâne de făcut doar o funcţie nouă în script şi nişte mici modificări.

function request(id)
{
	/* realizam pachetul de optiuni pentru functie */
	var data = {
			type: "POST",
			url: "tooltip.php",
			data: "uid="+id,
			async: false
		}
 
	/* chemam functia si ii preluam raspunsul */
	var response = $.ajax(data).responseText;
 
	/* si il intoarcem */
	return response;
}

Ne mai rămâne ca în funcţia din eventul mouseover să schimbăm valoarea variabilei text cu urmatoarea secvenţă.

var text = request(parseInt(this.alt));

În principu dacă am ajuns aici totul ar trebui să fie în regulă. Pentru a vă demonstra ceea ce tocmai am realizat puteţi vedea un exemplu sau puteţi downloada scriptul Javascript si scriptul php.

Pentru orice nelămurire, sugestie sau "reclamaţie" foloseşte formularul de mai jos!

Despre jQuery în câteva cuvinte

• jQuery este o librarie de Javascript redusă ca mărime ( 15kb )
• una din primele librării de Javascript crossbrowser (IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+)
• compatibilă cu toate versiunile de CSS

Ce fel de tooltip ne dorim?

Mi-am propus să realizez un tooltip simplu şi eficient pentru lamuriri adiţionale în completarea unui formular. În principiu am 2 soluţii de a realiza apariţia tooltip-ului:

1. tooltip-ul apare la click (în situaţia în care userul simte nevoia unor explicaţii suplimentare dă un click pe icon-ul de help)
2. tooltip-ul apare la mouseover

Dintre cele 2 opţiuni eu am ales-o pe cea de-a doua pentru ca îmi place să nu pun userul să facă acţiuni în plus pentru a vedea nişte informaţii pe care le doreşte (doar de-asta trăim în vremurile în care cuvântul de ordine în webdevelopment este uzabilitate). Ne dorim ca user-ului să-i fie cât mai uşor să utilizeze toate funcţiile site-ului.

Realizarea tooltipului cu ajutorul jQuery

În primul rând trebuie să ne punem scriptul să ruleze după încărcarea completă a paginii.

        $(document).ready(function ()
	{ });

Pentru realizarea apariţiei tooltip-ului la mouseover vom folosi proprietatea obiectului object.mouseover(); iar selecţia o vom face după un pattern simplu: "selectează-mi toate imaginile care au clasa 'tooltip' ". În consecinţă codul nostru va arăta în felul următor.

 $("img.tooltip").mouseover(
/* $("img.tooltip") este selectorul nostru care face
selectia imaginilor care au clasa 'tooltip' */
function (event)
{
});

În pasul următor vom lua de pe imaginea noastră atributul alt a cărui valoare o vom afişa cu ajutorul tooltip-ului. Pentru asta va trebui să facem un <div> în care să afişăm informaţia explicativă. Vom avea nevoie şi de cunoştinţe de CSS pentru a putea stiliza obiectul şi pentru a-l putea duce în poziţia dorită de afişare. În cazul meu, CSS-ul este aşa:

#tooltip {
	position: absolute;
	font-family: Verdana, sans-serif;
	font-size: 10px;
	max-width: 150px;
	border: 1px solid #91C2DC;
	z-index: 10000;
	color: #333333;
	background:
 url('information.png') center left no-repeat #FFFFFF;
	margin: 10px 5px 5px 10px;
	padding: 20px 3px 3px 3px;
}

Să vedem cum arată Javascriptul pentru cele descrise mai sus:

$("img.tooltip").mouseover(
function (event)
{
   var text = this.alt;
/* tinem continutul proprietatii
alt in variabila 'text' */
   x = event.pageX+10;
/* sa mutam tooltipul putin mai la dreapta
 ca sa nu fie acoperit de cursor */
   y = event.pageY+10;
/* si putin mai jos... */
   $("body").append("
<div id='tooltip'>"+text+"</div>
 
");
/* mai intai facem un div [asta reprezentand
alternativa jQuery la DOM] */
   $("#tooltip").css("left", x).css("top", y);
/* si ne mai ramane doar sa-l mutam langa cursor */
}
);

OK, am făcut tooltip-ul, dar va trebui să-l distrugem la acţiunea object.mouseout(); şi cu asta suntem aproape gata.

$("img.tooltip").mouseout(
function (event)
{
  $("#tooltip").remove();
/* cand se intampla mouseout distrugem div-ul */
}
);

În funcţie de preferinţe mai rămâne doar să aranjăm totul într-o funcţie şi s-o folosim. Pentru asta eu am făcut un exemplu si de aici puteţi downloada scriptul complet.

Ceea ce tocmai am realizat e o variantă simplă şi nu se vrea în nici un caz o concurenţă la scripturile de tooltip existente, ci o aplicaţie a unor simple cunoştinţe de jQuery.

Orice părere, sugestie sau "reclamaţie" e bine-venită (folosiţi formularul din josul paginii)!