$.get( 'ajax.php?foo=' + bar + '&baz=' + baz + '&par=' + param' , callback );

Sau, varianta mai lungă:

$.ajax({
	url : 'ajax.php?foo=' + bar + '&baz=' + baz + '&par=' + param',
	success : callback
});

Dragii moșului, varianta de mai sus, dincolo de faptul că arată oribil, este foarte greu de citit (respectiv făcut debug). Iată o variantă mult mai simplă:

$.get( 'ajax.php', {
	foo:bar,
	baz:baz,
	par:param
}, callback );

Respectiv:

$.ajax({
	url : 'ajax.php',
	data: {
		foo:bar,
		baz:baz,
		par:param
	},
	success : callback
});

Funcțiile $.get(), $.post() și $.getJSON() acceptă, contrar credinței populare, minim trei parametri: primul este URL, al doilea NU este callback, cum mulți bănuiesc, ci este un obiect și abia al treilea este callback.

Eh, nu-i așa că arată mai bine?

Despre procesarea pe server a request-urilor ajax

Am văzut foarte mulți – chiar și eu obișnuiam până acum vreo doi ani – să trimit cu fiecare request AJAX și un parametru extra, de genul ajax:1 (mai ales dacă implementam și o urmă de graceful degradation).

Eh, următoarea treabă nu știu dacă e specifică jQuery sau au adoptat-o toate bibliotecile, dar jQuery trimite și povestea asta cu fiecare request:

X-Requested-With	XMLHttpRequest

Ce înseamnă asta? Că în PHP poți face asta:

$is_ajax = ( strtolower( $_SERVER['HTTP_X_REQUESTED_WITH'] ) === 'xmlhttprequest' ? true : false );

Și, de exemplu, poți face o funcție să întoarcă un string JSON dacă este true sau o pagină întreagă dacă este false.

Enjoy!

Markup

Mark-ul simplu: o listă.

<div id="infinity">
	<ul>
		<?php for( $i = 1; $i <= 5; $i++ ){ ?>
		<li><img alt="" src="http://flickholdr.com/251/146/nature/<?php echo $i; ?>"></li>
		<?php } ?>
	</ul>
</div>

CSS

CSS este la fel de basic. Specificăm width pentru ambele elemente pentru a evita flicker și jump la încărcarea paginii:

#infinity,
.ntz_infiniteCarouselWrap {
	width:842px;
}
.ntz_infiniteCarouselWrap {
	overflow:hidden;
	margin:50px auto;
	position:relative;
}
	#infinity li,
	.ntz_infiniteCarouselWrap li {
	    float: left;
	    overflow: hidden;
	    position: relative;
	    height: 158px;
	    margin: 0 11px;
	    width: 263px;
	}
	.ntz_infiniteCarouselWrap .nav {
		position:absolute;
		left:0px;
		width:15px;
		height:14px;
		background:#ccc;
		top:50%;
		margin-top:-7px;
	}
.ntz_infiniteCarouselWrap .nav.next {left:auto;right:0px;}

JavaScript

Simplu și eficient (cred):

(function( $ ){
	$.fn.ntz_infiniteCarousel = function() {
		return this.each(function(){
			var carousel = $(this),
					etalon = $('li:first', carousel);

			carousel.wrap('<div class="ntz_infiniteCarouselWrap"></div>');

			var w = carousel.closest('.ntz_infiniteCarouselWrap'), //the wrap
					n = $('<a href="#" class="nav prev"/><a href="#" class="nav next"/>'), // the navigation
					inc = etalon.outerWidth(true), // increment - the width of an element ( is the same amount of px to be scrolled )
					ul = $('ul', carousel),
					perPage = Math.ceil( w.width()/inc ), // how many elements are displayed per page
					fX = $('li:lt(' + perPage + ')', ul).clone(), // first and last X elements ( x = perPage)
					lX = $('li:gt('+ ( $('li', ul).length - perPage-1 ) +')', ul).clone(),
					s = $('li.s', carousel); // selected
			w.addClass( carousel.attr('id') );

			ul.append(fX).prepend(lX); // adding elemnts on begining and the end for infinite loop

			var	ulW = $('li', ul).length * inc, // width for ul
					maxPos = -1*(ulW - inc*perPage - perPage); // max position
			ul.width( ulW ).css({marginLeft:-inc*perPage}); 

			n.click(function(){
				var t = $(this),
						curPos = parseInt(ul.css('marginLeft'), 10);

				if( ul.is(':animated') ) {return false;} // we don't need multiple scrolls

				if( t.hasClass('prev') ){ // scroll left
					if( curPos >= 0 ){
						ul.css({ marginLeft: -( ulW - inc * perPage*2 ) }); // infinite loop
					}
					ul.animate({ marginLeft:'+='+inc })
				}

				if ( t.hasClass('next') ) { //scroll right
					if( maxPos >= curPos ){
						ul.css({ marginLeft: - inc * perPage }); // infinite loop
					}
					ul.animate({ marginLeft:'-='+inc });
				}
				return false;
			});
			n.appendTo(w);

		});
	}; // ntz_infiniteCarousel
})( jQuery );

$('#infinity').ntz_infiniteCarousel();

Enjoy!

Păi asta se poate întâmpla din cel puțin două motive: ori chiar faci tu request-ul respectiv de două ori (bind-uri puse aiurea?) ori… uiți un slash.

Eu fac request-urile astfel încât url-urile au următoarea formă:

$.get('http://localhost/?ntz_do=get_uptades');

Totul merge ok. Dar dacă se schimbă codul în:

$.get('http://localhost?ntz_do=get_uptades');

Treaba se schimbă. Se fac două request-uri: primul, cel corect, în care se întâmplă ce vrei tu. Al doilea încearcă să adauge slash-ul lipsă.

E o chestie pe care tocmai am aflat-o, când jQuery a decis să-mi tragă partea lui de păcăleală de 1 Aprilie.

Mixt

Poți folosi jQuery (pentru selectarea elementelor) împreună cu JS chior pentru această traversare, astfel încât, folosindu-te astfel de funcțiile native ale browserului (ceea ce înseamnă viteză).

var elemente = $('div'), totalElemente = elemente.length;
for(var i=0; i<totalElemente;i++){
 var element = elemente.eq(i);
 element.hide();
}

jQuery

Pentru aceasta folosești funcția $.each();. Treaba stă în felul următor:

var elemente = $('div');
elemente.each(function(i, element){ // `i` este index-ul; `element` este elementul curent
 element.hide();
});

Elementul curent

În ambele cazuri însă, se pune problema selectării unui child (copil sună aiurea; element ce se află în elementul curent). Și aici avem tot două variante. Ambele implică jQuery (se poate și fără):

$.find();

În ambele situații descrise mai sus, pentru a găsi toate span-urile, se poate utiliza următoarea secvență de cod:

$(element).find('span');

Sigur, poți fi un pic mai explicit, putând folosi majoritatea (dacă nu toți) selectorii valizi:

$(element).find('span[title]'); // selectează span-urile ce au atributul `title`
$(element).find('li span'); // selectează span-urile ce au ca parent li

Folosind contextul

Această metodă este „furată” direct din sursa jQuery și cred că s-a omis când s-a scris documentația. Treaba stă cam așa:

$('span', element);

Din nou, poți fi la fel de explicit ca mai sus:

$('span[title]', element); // selectează span-urile ce au atributul `title`
('li span', element); // selectează span-urile ce au ca parent li

Performanța

Diferența de performanță este destul de mică, dar există, fiind în favoarea metodei .find() (la o pagină cu 30 div-uri este o diferență de ~0.252ms între metode). Pe de altă parte, dacă folosești .find() de câteva zeci de ori, te pricopsești cu câțiva kb în plus. Sigur, vorbesc de scripturi mari, nu 10-20 linii de cod.

Resurse

1. .each()
2. .find()

La o listă de forma:

<ol>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ol>

Bagi CSS-ul ăsta:

li {
	width:50%;
	float:left
}

De ce în teorie? Pentru că lista nu va arăta – cum e normal, de altfel – ca o listă pe două coloane ci ca una în zig-zag:

1 - 2
3 - 4
5

Ceea ce, între noi fie vorba, e cam nasol. Mai ales când vrei să afișezi o listă ordonată.

Soluția

jQuery, desigur!

$('li').slice(0, Math.ceil($('li').length/2)).addClass('leftside'); // selectăm prima jumătate de listă și îi adăugăm o clasă

Și puțin CSS:

li {
	width:50%;
	margin-left:50%;
}
li.leftside {
	float:left;
	clear:left;
	margin-left:0;
}

Și gata. Avem o listă cu două coloane.

De ce Peach Slider? În principiu pentru că… Aveam trei piersici pe birou. Iar altceva nu prea mi-a venit în cap

Așadar… Impresii? Sugestii?

Update

• Problema cu link-urile suprapuse s-a rezolvat;
• Merge și pe iPhone

jQuery Essentials

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

10 Things I learned from jQuery source

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

Da, știu că sunt lungi, că e mult de vizionat și de citit, dar merită

Prin urmare, dacă ai deja inclus jQuery în pagină (sau orice altă librărie), poți încropi un astfel de widget în câteva linii de cod. Să vedem despre ce este vorba!

Codul html

Codul HTML este foarte simplu: o listă:

<ul id="twitterUpdates">
	<li>Loading...</li>
</ul>

Acel li este necesar din două motive: 1) un ul gol nu ar fi valid; 2) trebuie să înștiințăm utilizatorul cumva că se întâmplă… ceva

Următoarele bucăți de cod sunt furate de undeva, dar… Nu prea mai știu de unde. Deși am vaga bănuială că direct de la twitter.

Funcția următoare transformă data din forma „Thu Jun 10 12:00:33 +0000 2010” în ceva mult mai drăguț, de genul „X hours ago”

function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var parsed_date = Date.parse(time_value);
  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  delta = delta + (relative_to.getTimezoneOffset() * 60);

  if (delta < 60) {
    return 'less than a minute ago';
  } else if(delta < 120) {
    return 'about a minute ago';
  } else if(delta < (60*60)) {
    return (parseInt(delta / 60)).toString() + ' minutes ago';
  } else if(delta < (120*60)) {
    return 'about an hour ago';
  } else if(delta < (24*60*60)) {
    return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
  } else if(delta < (48*60*60)) {
    return '1 day ago';
  } else {
    return (parseInt(delta / 86400)).toString() + ' days ago';
  }
}

Funcția următoare prelucrează răspunsul JSON venit de la twitter și îl injectează în lista de care am pomenit puțin mai sus.

function twitterCallback2(twitters) {
  var statusHTML = [];
  for (var i=0, len=twitters.length; i<len; i++){
    var username = twitters[i].user.screen_name;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
      return '<a href="'+url+'">'+url+'</a>';
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });
    statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>');
  }
  document.getElementById('twitterUpdates').innerHTML = statusHTML.join('');
}

Nu uita să schimbi USER_ID cu user-ul tău de twitter. De asemenea, acel „3” din coadă reprezintă câte twit-uri vrei să afișezi.

$('#twitterUpdates').rdy(function() {
	$.getScript("http://twitter.com/statuses/user_timeline/USER_ID.json?callback=twitterCallback2&count=3");
});

Despre funcția rdy am povestit un pic aici.
Și gata.

Demo poți vedea în sidebar-ul blogului

De ce să execuți un script doar dacă un element este disponibil? Foarte simplu! Din motive de performanță. jQuery nu știe dacă un element este în DOM decât dacă traversează tot DOM-ul. Și dacă încerci să cauți mai multe elemente inexistente, poți avea probleme de performanță. Prin urmare am găsit următorul script:

jQuery.fn.rdy = function(func){
	this.length && func.apply(this);
	return this;
};

Și îl apelezi foarte simplu:

$('div#verifica').rdy(function(){
//do stuff;
});

Simplu și eficient!

$('<div id="busy">Loading...</div>')
.ajaxStart(function() {$(this).show();})
.ajaxStop(function() {$(this).hide();})
.appendTo('body');

Dezactivează toate animațiile:

$.fx.off = true;