jQuery Mobile: (fără) tranziţii şi (cu) preîncărcare


După primul şi al doilea material aş dori să vă prezint mai jos două elemente care ajută muuult vizavi de jQuery Mobile (apropo, în paranteză fie spus, un articol ceva mai vechi dar încă util e 10 handy jQuery Mobile tips and snippets to get you started; precum şi 50 jQuery Mobile Development Tips). Să începem deci. Prima problemă ţine de redarea tranziţiilor între pagini pe smartphone-uri (se pare că problema e generală, dincolo de Android sau iOS). Până când problema va fi rezolvată, codul care ne salvează este următorul:

$(document).bind("mobileinit", function(){
	$.extend($.mobile,{
		defaultPageTransition: "none"
	});
});

Acesta pus într-un fişier .js şi inclus între biblioteca jQuery şi biblioteca jQuery Mobile va rezolva problema. Desigur, tranziţiile ar fi în principiu frumoase, dar dacă acum încurcă… ce să-i faci? Personal nici pentru webaplicaţii nu aş opta pentru actuala implementare a tranziţiilor. Oricum, problema sper să fie de scurtă durată. Vedeţi aici discuţiile generate, iar unul dintre autorii jQuery Mobile promite: “Getting things like transitions and fixed toolbars sorted is our primary focus for 1.1 for sure.” Bun. Acum să mergem mai departe cu a doua observaţie: dacă aveţi o webaplicaţie făcută cu jQuery Mobile folosiţi preîncărcarea paginilor spre care se face trimitere: navigarea devine sesizabil mai lină şi mai plăcută. Şi nu e greu: tot ce trebuie este să scrieţi data-prefetch între atributele tagului A pentru linkuri. Atât! Procesul va decurge apoi astfel: se încarcă pagina principală, iar după ea, în fundal, adică invizibil, se face şi încărcarea tuturor linkurilor ce au atributul data-prefetch. Atunci când navigatorul (omul) dă click pe un astfel de link, noua pagină se va încărca aproape instant, deci aproape zero timpi de aşteptare.

Mai jos puteţi vedea o webaplicaţie scrisă cu jQuery Mobile. Am lăsat aici doar lunile ianuarie, februarie, martie şi aprilie, restul nu vor merge, intenţionat. Puteţi studia şi extern webaplicaţia, privind prin sursă. Veţi vedea acel data-prefetch, precum şi  data-position="fixed" la header şi footer, pentru ca la luni să stea mereu în partea vizibilă. O apăsare şi permanenţa e anulată; încă o apăsare şi merge (verificaţi derulând în mijlocul unei luni şi apoi dând un click, derulând puţin pagina, apoi dând iarăşi click şi derulând). Ei bine, această webaplicaţie calendar am transformat-o în aplicaţie pentru Android şi se găseşte pe Android Market. Cum am făcut aceasta? Vom vedea în alt articol (sau poate în două).


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 *