Arhiva pentru tagul “jQuery”

Ce ne va aduce jQuery Mobile 1.3.0

Acum vreo săptămână jQuery Mobile anunţa versiunea 1.3.0 beta, iar ea vine fără îndoială cu unele noutăţi bine venite. De exemplu apariţia panourilor (panels) care pot să apară în stânga sau în dreapta paginii, peste conţinutul central (overlay), dezvăluindu-se de sub conţinutul central (reveal) sau împingând conţinutul central (push). Puteţi vedea exemple mergând aici. Desigur, noul panou poate să includă un meniu, să fie apelat dintr-un buton din header şi atunci avem un sistem de navigare mereu la îndemână, dar care nu încarcă vizual pagina. Minunat!

imagine

Tot extraordinară găsesc şi noutatea despre tabele, care sunt şi ele fluide dar avem şi posibilitatea de a controla care coloane să fie arătate… eventual care să fie ascunde atunci când …


jQueryMobile şi localStorage (II)

Mergem înainte cu dorinţa de a avea o mică webaplicaţie care să salveze date cu localStorage (vezi aici) şi care să poată fi “împachetată” ca aplicaţie pentru mobile. În articolul anterior am văzut structura cu jQuery Mobile dar nu dezvoltasem partea funcţională cu JavaScript. Faţă de sursa HTML de atunci sunt unele mici-mici schimbări, dar privind sursa se poate vedea. Drept urmare mă voi concentra pe partea JavaScript, pusă integral mai jos.

imagine

Funcţia compune() nu cere explicaţii, ea pur şi simplu construind textul de afişat. Se apelează de două ori: la iniţializarea paginii #afisare (adică prima pagină), dacă sunt date memorate local, respectiv de fiecare dată când se salvează datele din formular, pentru ca atunci când se …


jQueryMobile şi localStorage (I)

Am avut curiozitatea de a vedea dacă se poate folosi localStorage pentru o webaplicaţie transformată în aplicaţie de mobil. Ei bine, se poate. Nu a fost doar curiozitatea ci chiar am avut nevoie pentru o webaplicaţie la care i-am făcut o pagină de setări. Opţiunile se salvează, aşa că atunci când omul redeschide aplicaţia Android îşi va regăsi configuraţia dorită de el. Cool! Spre ilustrare vă propun ceva simplu: o aplicaţie cu două pagini – prima afişează datele, care pot fi introduse din a doua pagină.

imagine

Amintesc că un ABC despre jQuery Mobile am făcut, mai exact vă invit să citiţi jQuery Mobile: de la pagină la pagini dacă reprezintă o problemă structura unei pagini (pentru strict o pagină …


Cookies cu jQuery

Aplicaţiile sunt diverse, dar ca să pornim de undeva iată un scenariu destul de comun: avem un formular şi dorim ca datele să fie salvate pe măsură ce sunt completate. Sunt multe soluţii, unele mai automate decât altele, dar vom încerca să rezolvăm folosindu-ne de jQuery. Din păcate nu e ceva “încorporat” în jQuery, aşa că folosim pluginul jQuery Cookier. Vedeţi acolo fişierul README pentru informaţii despre utilizarea lui. Pe scurt cu ceva de genul:

$.cookie('prajiturica', 'diplomat');

scriem în cookie-ul numit „prajiturica” valoarea „diplomat”. Şi dacă vrem să o folosim, pur şi simplu nu scriem al doilea parametru:

alert($.cookie('prajiturica');

Desigur, mai sunt diverse fineţuri, despre valabilitatea cookie-urilor ca timp şi ca „spaţiu” (adică doar în pagina unde au fost create sau în tot domeniul). Dar citiţi în README. Eu mă limitez la un exemplu scurt. Am făcut un formular cu două câmpuri input (pot fi oricâte) – vedeţi …


jQuery 1.9.1: acum e folosibil

Nu, nu am să scriu despre salturi minore de versiuni. Ştiu că acum câteva săptămâni am scris despre jQuery UI 1.9, care era tocmai lansat. Ei bine, nu e bine să te grăbeşti, decât dacă chiar ştii ce faci. Dacă aţi dorit să adoptaţi jQuery UI 1.9 acum e timpul pentru că a apărut prima tură de reparaţii… şi practic conform anunţului cam toate componentele au avut buguri (mici). Găsiţi aici changelog-ul complet. Dar mai este ceva ce mă bucură mult: în sfârşit s-a făcut integrarea cu Theme Roller.

imagine

Da, la început nici widgetul Spinner, nici Menu şi nici Tooltip nu apăreau în Theme Roller. Poate că temele aveau şi atunci influenţă, nu …


jQuery a ajuns la versiunea 1.9!

În drumul spre jQuery UI 2.0 am ajuns la versiunea 1.9 şi vestea e minunată! Se face exact un an de când am scris La ce să ne aşteptăm de la jQuery UI 1.9, şi cele descrise acolo s-au întâmplat. Într-adevăr, acum avem trei widgeturi noi: menu, spinner şi tooltip. Şi… acum şi situl are o interfaţă nouă. Nu ştiu dacă vă place (eu simt nevoia să treacă ceva timp să mă obişnuiesc înainte să mă pronunţ), dar cert face mai rapid accesibile “suratele” din proiectul jQuery, aşa după cum vedeţi din captură.

imagine

Dincolo de widgeturile noi (sau relativ noi, căci de exemplu meniul era inclus dar nedocumentat şi până acum), au apărut …


Tooltipster: plugin jQuery pentru tooltip-uri

Există ceva pluginuri jQuery pentru tooltip-uri, nu ne putem plânge. Printre cele simpluţe – şi poate tocmai de aceea pentru unii atrăgător – este pluginul Tooltipster. Autorul se laudă că l-a făcut în sub 24 de ore, dar aceea a fost versiunea iniţială. Între timp sigur a mai lucrat pentru că a corectat diverse erori. Ce îmi place el este că 1) este foarte simplu de folosit, practic, dincolo de includerile de rigoare trebuie doar să specifici o clasă; 2) îţi permite cu o oarecare uşurinţă să aplici teme noi sau să îţi creezi teme noi; şi 3) poţi avea chiar şi HTML în tooltip.

imagine

Dacă veţi deschide unica pagină a pluginului veţi avea servite toate informaţiile de bază. …


Preluarea datei cu jQuery UI

Continuăm mica serie de articole dedicate unor elemente oferite de minunata bibliotecă jQuery UI. Vă propun astăzi să ne oprim la facilitatea de preluare a unei date, utile în diverse contexte. Dacă o fac este pentru că aici apare o problemă de localizare: într-un sit românesc ne-am dori desigur ca zilele şi lunile să fie scrise în română, nu în engleză. Ei bine, în timp ce se oferă oficial posibilitatea de a schimba limba, alegând una dintre limbile suportate, în testele mele am reuşit doar incluzând manual traducerea. Când spun manual mă refer la copy and paste, cum veţi putea şi Dvs face. E vorba de liniile de la 1 la 18. Evident, puteţi modifica după bunul plac (ex: să nu înceapă cu majusculă).

Să trecem la lucru. În forma cea mai simplă calendarul presupune un câmp input şi via ID o „aplicare” a calendarului cu o linie simplă …


Slidere cu jQuery UI

Era să scriu „slide-uri cu jQuery UI”, dar slide e una (gândiţi-vă la PowerPoint), slider e alta (e o bară cu un „mâner” de tras, pentru a fixa o valoare). jQuery UI oferă aşa ceva şi este foarte simplu de folosit. În esenţă tot ce ne trebuie este un div cu un ID pe care vom „aplica”, via jQuery UI, sliderul. Doar că, desigur, în această formă foarte simplă (primul slider din codul de mai jos), sliderul nu e foarte util.

La al doilea deja lucrurile prin contur. Putem să îi indicăm o valoare minimă şi o valoare maximă, precum şi valoarea iniţială. Observaţi că am pus pentru range valoarea min: aceasta înseamnă că va evidenţia partea din slider de la început (stânga) la poziţia curentă. Evident că max va evidenţia zona de la poziţia curentă la sfârşit (dreapta). Dar să observăm cum afişăm valoarea: interceptăm mişcarea sliderului şi apelăm …


Taburi cu jQuery UI (III)

În două articole am pus nişte baze, cu exemple simpluţe. De fapt nici acum nu vom face ceva teribil de complicat, dar totuşi cunoştinţele de jQuery devin vitale. Mai întâi două butoane banale: unul care ne spune al câtelea tab e deschis (e important să reţinem că jQuery UI le numără de la 0, deci primul tab e cu indicele 0, al doilea cu indicele 1 ş.a.m.d.), respectiv unul deschide (activează) tabul al doilea (adică cel cu indicele 1). Sunt chestii simple, veţi vedea în cod. Lucrurile se complică puţin dacă dorim să adăugăm dinamic taburi.

imagine

Pentru a adăuga noi taburi evident trebuie să creăm nişte div-uri (de fapt unul per tab), după care folosim funcţia pusă …