Scenariul este simplu: ai o pagină web, sau poate chiar o webaplicaţie, în care vrei să fructifici timpii morţi. Poate cât timp pagina nu este folosită vrei să preîncarci nişte informaţii… sau să provoci periodic o reîncărcare… sau, ceea ce m-a interesat pe mine de fapt, să de-loghezi (de-autentifici) utilizatorul din webaplicaţie. Codul de mai jos nu îmi aparţine ci l-am găsit aici – eu doar îl semnalez. Şi am să vă spun după cod limitele lui.

var idleTime = 0;
$(document).ready(function () {
//Creste numaratorul la fiecare minut
var idleInterval = setInterval(timerIncrement, 60000); // 1 minut

//Pune pe zero numaratorul la miscarea mouse-ului.
$(this).mousemove(function (e) {
idleTime = 0;
});

//Pune pe zero numaratorul la apasarea vreunei taste.
$(this).keypress(function (e) {
…

Ei bine, după vreo 5 ani îmi permit să revin la pluginul DataTables, bucuros să văd că proiectul este încă activ şi… îmi foloseşte intens într-un nou proiect la care lucrez. Nu ştiu voi, dar pe mine tabelele mă cam exasperează: în special integrarea lor în design şi capacitatea de adaptare după rezoluţie, dar şi problema funcţionalităţii. Din fericire pluginul îşi face cu brio datoria. Am mai scris de vreo două ori despre acest plugin în trecut, dar la atâţia ani o iau ca de la zero: pluginul cere includerea unui fişier CSS pentru partea de aspect, a unuia JS pentru funcţionalitate (atenţie: depinde de jQuery deci mai vine fişierul JS pentru jQuery) şi o linie gen $(‘#tabelul-meu’).DataTable(); ca să aveţi un start nemaipomenit.

Am luat de pe Wikipedia tabelul de mai jos ca să am ce să demonstrez şi dacă veţi privi în sursă veţi vedea că …

În proiectele Dvs web s-ar putea să vă întâlniţi cu situaţii în care doriţi să „prindeţi” click-ul mouse-ului, fie el click stânga, mijloc sau dreapta. Desigur, jQuery oferă instrumentele necesare şi vom încerca să vedem mai jos cum putem face şi ceea ce jQuery nu oferă nativ. Dacă vrem click normal pe un element (link, div, imagine…) atunci desigur putem folosim $(„#element”).click(), dar ca să trecem toate cele trei scenarii în revistă ne vom folosi de mousedown.

Astfel, următorul cod ne permite să aflăm ce fel de click am dat. Simplu… normal că este simplu.

$(document).mousedown(function(e) {
    if(e.which == 1) $("#foo").html("Click stânga!");
    if(e.which == 2) $("#foo").html("Click mijloc!");
    if(e.which == 3) $("#foo").html("Click dreapta!");
});

Dacă dorim …

Un articol recent de pe WebResourceDepot, 10 Useful jQuery plugins from Github, mi-a atras atenţia asupra unor pluginuri. Unele le ştiam deja, ba chiar le folosesc, altele nu. Lista celor zece o veţi găsi în articol, eu mă limitez la patru dintre ele. Şi am să încep cu jQuery Cookie, un plugin simplu de folosit pentru un management mai uşor al cookie-urilor. Merge sub navigatoarele tradiţionale, dar şi sub Android şi iOS. Acum vreo lună am scris despre Amplify.js: un plugin jQuery pentru salvarea datelor. Îl prefer în continuare, dar de reţinut şi jQuery Cookie.

Notabil şi jQuery Waypoints, care permite să facem ceva (să apelăm o funcţie adică) atunci când un anumit element …

Webmasterii ştiu că uneori te alegi cu dureri de cap atunci când încerci se centrezi, în special vertical anumite elemente dintr-o pagină. Dacă vrei să meargă şi responsive, adică pe orice rezoluţie şi/sau la schimbarea dimensiunii ferestrei, atunci o soluţie simplă este Midway.js. Nu am folosit-o încă în proiecte (voi pune la final ce cod folosesc eu) şi recomandarea mea e de aceea cu mici rezerve. În primul rând nu scrie că depinde de jQuery… dar depinde. Apoi nici dacă merge pentru a centra un element în cadrul unui alt element (în testele mele a mers şi nu a mers, după caz).

Folosirea e în teorie simplă: la div-ul (sau elementul dorit) pui clasele midway-horizontal şi midway-vertical după nevoie.  Dacă vrei să …

De fapt Ion nu e un român. E un rus pe numele lui Denis Ineshin, chiar din Moscova. De ce îşi prefixează munca cu Ion mă depăşeşte (chiar nu am stat să aflu). Important este că are nişte pluginuri jQuery remarcabile şi m-am gândit că poate vreţi să ştiţi de ele. Chiar dacă jQuery UI include unele dintre ofertele lui Denis, vorbim de alt design şi uneori de un control mai bun. Le găsiţi catalogate aici. Eu doar le voi enumera pe scurt. Ion.RangeSlider ne oferă evident un slider cu „skin” configurabil (3 la pachet). Poate fi folosit pentru indicarea unei valori sau a unui interval.

Ion.Tabs e pentru taburi şi are două skin-uri, arătând – depinde de …

„Dialogs for the 21st century” ar duce cu gândul la ceva iniţiativă scriitoricească, dar este vorba de o bibliotecă pentru jQuery ce permite un sistem flexibil de ferestre (pentru dialoguri). Desigur, secolul XXI nu înseamnă alb şi negru, chiar şi cu simplitatea de design a la Windows 8. În fapt aspectul rudimentar cu care eşti întâmpinat în pagina demonstrativă a lui Vex este o invitaţie la a ne imagina noi ce putem face, dat fiind că suntem în control la capitolul design.

După ce aţi trecut de demo-ul poate nu foarte sugestiv, vă recomand să studiaţi Vex de aici. Veţi vedea că cu Vex se pot implementa cele trei tipuri comune de dialog: tip alertă (un mesaj cu un buton), …

La un proiect la care am lucrat recent am avut o frustrare legată de un câmp/control textarea pe care l-aş fi vrut şi mare… dar şi mic. Adică cumva imposibil: să nu ocupe prea mult spaţiu, că mai erau şi alte informaţii de cerut, dar totuşi cine lucrează să poată să scrie rezonabil în acel textarea. Desigur, ştiu soluţiile care lungesc textarea pe măsură ce este nevoie, dar nu era ce îmi doream eu. Atunci mi-am amintit că există nişte soluţii de mărit textarea pe tot ecranul. Cât de cool! Ceva cam ca la WordPress (dar eu nu folosesc, că scriu articolele din Windows Live Writer).

Ei bine, am găsit două soluţii. Una simplă: WideArea. Poate după gustul unora prea simplă, neexistând …