Când lumea a descoperit rețeaua, lucrurile erau incitante și lipsite de viață. De exemplu, crearea unei aplicații simple de trecere cu mouse-ul pentru imagine a necesitat mai multe linii de cod și nu a putut funcționa pe unele platforme.

Dar lucrurile s-au îmbunătățit când a fost introdus jQuery, deoarece a permis dezvoltatorilor să creeze aplicații JavaScript uimitoare care să poată rula confortabil în diferite locuri.

După aceea, echipa jQuery a îmbunătățit lucrurile prin dezvoltarea jQuery UI, ceea ce a făcut posibilă dezvoltatorilor să creeze aplicații web frumoase pe nucleul jQuery existent.

Mai bine, în 2010 a fost introdus jQuery Mobile, ceea ce a făcut dezvoltarea mult mai bună și mai eficientă.

Construită cu o părtinire a telefoanelor mobile, jQuery Mobile este un cadru eficient, unificat, care oferă componente UI, tranziții de date și alte caracteristici interesante.

jQuery Mobile valorifică funcționalitățile HTML5, CSS3, jQuery, precum și jQuery UI într-un singur cadru care permite dezvoltatorilor să obțină consistență pe diferite platforme și dispozitive.

Caracteristici de bază ale jQuery Mobile

1. Mare simplitate și utilizare

Cadrul jQuery Mobile este simplu și flexibil. Deoarece interfața de configurare a cadrului este bazată pe majorare, dezvoltatorii își pot construi cu ușurință interfețele de aplicații de bază complete în HTML, cu un cod JavaScript minim sau deloc.

Sarcinile complexe care necesită mai multe linii de cod JavaScript, cum ar fi apelurile Ajax și manipularea DOM, pot fi realizate cu ușurință cu câteva linii de cod în jQuery mobil.

De exemplu, dacă vrem ca un utilizator să facă clic și să ascundă text după ce a fost creată o pagină în DOM, dar înainte ca îmbunătățirea să fie finalizată, putem folosi pur și simplu pagecreate organizatorul evenimentului. Acest lucru ar necesita mai multe linii de cod pentru a realiza fără jQuery Mobile.

$(document).on("pagecreate","#mypagetest",function(){
  $("span").on("click",function(){
    $(this).hide();
  });                       
});

În codul de mai sus, #pagetestul meu parametrul se referă la ID-ul paginii care specifică evenimentul paginii. De asemenea pe() metoda este utilizată pentru a atașa gestionarele de evenimente.

Mai mult, simplitatea sa permite dezvoltatorilor să-și împartă aplicațiile în mai multe pagini. Cu cadrul, dezvoltatorii pot „scrie mai puțin și pot face mai mult”.

2. Îmbunătățirea progresivă și degradarea grațioasă

Îmbunătățire progresivă și degradarea grațioasă sunt caracteristici cheie care propulsează agilitatea jQuery Mobile. Acestea îi permit să accepte atât dispozitive de ultimă generație, cât și dispozitive mai puțin capabile (de exemplu, cele care nu au suport JavaScript).

Cadrul permite dezvoltatorilor să construiască aplicații care pot fi accesate de cel mai mare număr de browsere și dispozitive, indiferent dacă este Internet Explorer 6 sau cel mai nou Android sau iPhone.

De asemenea, jQuery mobil oferă dezvoltatorilor posibilitatea de a reda conținut de bază (așa cum este construit) pe dispozitive de bază. Iar platformele și browserele mai sofisticate vor fi din ce în ce mai îmbogățite folosind JavaScript și CSS suplimentare, conectate extern.

3. Suport pentru intrări ușor de utilizat

În timpul dezvoltării jQuery mobile, dezvoltatorii pot include o aplicație simplă API pentru a susține funcționalitățile de introducere a utilizatorului bazate pe focalizare la atingere, mouse și cursor. Mai multe tipuri de elemente de formă ușor stilizate și ușor de atins sunt, de asemenea, incluse în cadru.

Exemple includ casete de selectare și seturi radio, glisor, filtrare căutare și elemente de selectare a meniului. De asemenea, fiecare dintre elementele formularului include o versiune alternativă „mini”, care poate fi ușor încorporată în paginile web mobile.

De exemplu, iată cum să creați un buton casetă de selectare folosind jQuery Mobile. Observați că data-mini = “adevărat” atributul este adăugat pentru a crea o versiune mini a butonului.

<form>
    <input type="checkbox" name="checkbox-mini-0" id="my-checkbox" data-mini="true">
    <label for="checkbox-mini-0">Click here to agree</label>
</form>

Dincolo de toate acestea, pentru a se asigura că experiența utilizatorului este optimizată pe dispozitivele mobile, cadrul are un bogat sistem de navigație bazat pe Ajax, care permite tranzițiile de pagini animate să aibă loc fără probleme.

Cu evenimentele de tranziție jQuery Mobile, puteți anima trecerea de la pagina activă curentă la pagina nouă.

De exemplu, puteți utiliza fișierul pagebeforeshow eveniment (declanșat pe pagina „către”) și pagebeforehide eveniment (declanșat pe pagina „de la”) la trecerea de la o pagină la alta. Ambele evenimente sunt declanșate înainte de începerea animației de tranziție.

Să vedem cum pot fi aplicate:

$(document).on("pagebeforeshow","#myfirstpage",function(){ 
    
    // When entering myfirstpage
    
  alert("myfirstpage is about to appear");
    
});

$(document).on("pagebeforehide","#myfirstpage",function(){ 
    
    // When leaving myfirstpage
    
  alert("myfirstpage is about to disappear");
});

4. Accesibilitate

Pe lângă capabilitățile sale multiplataforme, jQuery pentru mobil a fost creat cu o considerare puternică pentru accesibilitate.

Cadrul vine cu suport pentru aplicații de Internet bogat accesibil (WAI-ARIA) pentru a ajuta persoanele cu dizabilități să utilizeze cititoare de ecran și alte tehnologii de asistență să acceseze cu ușurință paginile web.

5. Dimensiune ușoară

Dimensiunea ușoară a jQuery Mobile (aproximativ 40 KB când este minimizată) se adaugă rapidității sale. În plus, faptul că folosește dependențe minime de imagine, de asemenea, accelerează foarte mult capacitățile sale.

6. Widgeturi Theming și UI

jQuery Mobile are un sistem tematic încorporat care permite dezvoltatorilor să-și determine propriul stil de aplicație. Cu jQuery Mobile Themeroller, dezvoltatorii își pot personaliza în mod eficient aplicațiile pentru a se potrivi culorilor, gusturilor și preferințelor lor.

Cadrul vine, de asemenea, cu diverse widget-uri inovatoare, cross-platform, care permit dezvoltatorilor să creeze aplicații care sunt mai bine personalizate.

Unele dintre widgeturile disponibile sunt bare de instrumente persistente, butoane, dialoguri și widgetul pop-up utilizat în mod obișnuit.

7. Sensibilitate

Răspunsul complet al cadrului permite ca aceleași baze de cod de bază să se încadreze confortabil în diferite tipuri de ecrane, de la dispozitive mobile până la ecrane de dimensiuni desktop.

Structura de bază a paginii jQuery Mobile

Structura jQuery Mobile conține toate componentele și atributele UI necesare pentru crearea de aplicații web mobile și site-uri web de orice fel, ușor de utilizat și bogate în funcții – indiferent dacă sunt de bază sau avansate.

Puteți utiliza jQuery mobile pentru a crea pagini web, diverse tipuri de vizualizări ale listelor, bare de instrumente, o gamă largă de elemente și butoane de formular, dialoguri, precum și alte funcționalități.

Important, deoarece jQuery Mobile este creat pe partea de sus a jQuery, permite dezvoltatorilor să folosească codul UI jQuery și să acceseze facilități cheie. Acestea includ animație robustă și efecte de imagine pentru paginile web, manipularea DOM, gestionarea evenimentelor și Ajax pentru comunicarea serverului.

Să vedem cum arată codul de dezvoltare mobil jQuery.

De exemplu, în acest moment al pandemiei COVID-19, când majoritatea oamenilor lucrează de acasă sau de la spații de lucru în comun, să creăm o pagină web simplă care să demonstreze unele greșeli de gestionare a echipei pe care oamenii le fac.

Iată codul:

<!DOCTYPE html>
<html>

<head>
  <title>jQuery Mobile Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
  <div data-role="page" date-theme="c">
    <div data-role="header">
      <h1>fCC jQuery Mobile Sample</h1>
    </div>
    <div data-role="content">
      <p>COVID-19 Work-From-Home Team Management Mistakes To Avoid</p>
    </div>
    <p>
    <ul data-role="listview" data-inset="true" data-filter="true"></ul>
    </p>
    <p>
    <ul>
      <li><a href="#">Using Unnecessary Tools</a></li>
      <li><a href="#">Foregoing Team Evaluations</a></li>
      <li><a href="#">Micromanaging</a></li>
      <li><a href="#">Hiring Too Quickly</a></li>
      <li><a href="#">Not Having Contingencies</a></li>
    </ul>
    </p>
    <div data-role="footer">
      <h4>alfrickopidi.com, 2020 - Copyright</h4>
    </div>
  </div>
</body>

</html>

Iată rezultatul când liniile de cod jQuery mobile de mai sus sunt deschise pe un browser:

O introducere simpla la jQuery Mobile Framework

În special, atunci când browserul este micșorat sau mărit, dimensiunea elementelor din listă se ajustează, de asemenea, în mod corespunzător. Prin urmare, pagina web poate fi accesată cu ușurință pe diferite dispozitive cu rezoluții diferite ale ecranului, fără a vă face griji cu privire la lipsa de consistență. Dimensiunea articolelor se va modifica corespunzător pentru a se potrivi tipului de dispozitiv.

După cum puteți vedea în exemplul de cod de mai sus, documentul este un HTML5 simplu care include următoarele trei lucruri:

  • Fișiere din jQuery Mobile CSS (jquery.mobile-1.4.5.min.css)
  • Fișiere din depozitul jQuery (jquery-1.11.1.min.js)
  • Fișiere din depozitul jQuery Mobile (jquery.mobile-1.4.5.min.js)

Aceste fișiere sunt direct conectate la jQuery CDN. O altă alternativă este să te îndrepți spre pagina de descărcare pentru a obține aceste fișiere și a le găzdui pe un server privat.

Important, inclusiv metatagul “viewport” în timpul dezvoltării jQuery mobile informează dispozitivele că lățimea paginii și lățimea ecranului dispozitivului sunt echivalente (lățimea = lățimea dispozitivului).

Eticheta instruiește, de asemenea, browserul să mărească la 100% (scară = 1). Dacă scala este schimbată la 2, de exemplu, browserul va mări pagina web cu 50%.

O examinare mai atentă a codului relevă unele „ciudate”date-“atribute împrăștiate prin ea. Aceasta este o caracteristică îmbunătățită a HTML5 care permite dezvoltatorilor să transmită date organizate într-o aplicație – de exemplu, data-role = “antet” atributul definește secțiunea principală a paginii web.

Exemplul de mai sus doar zgârie suprafața lucrurilor pe care dezvoltatorii le pot realiza folosind jQuery Mobile. Cadrul documentație este ușor de urmărit și descrie numeroasele sale caracteristici, inclusiv legarea paginilor, încorporarea tranzițiilor de pagini animate și proiectarea butoanelor.

Concluzie

jQuery pentru mobil este un cadru bogat în resurse construit cu capabilități jQuery, HTML5 și CSS pentru a gestiona în mod eficient anumite probleme de compatibilitate între platforme, cross-device și cross-browser.

Cadrul oferă oportunități excelente pentru crearea de aplicații mobile și web care sunt puternice, complet receptive și pregătite pentru viitor.

O să încerci?