Jednostavan uvod u jQuery Mobile Framework

Kad je svijet otkrio mrežu, stvari su bile neuzbudljive i beživotne. Na primjer, za izradu jednostavne aplikacije za prelazak mišem za sliku bilo je potrebno nekoliko redaka koda i nije moglo raditi na nekim platformama.

No stvari su se popravile kada je predstavljen jQuery, jer je programerima omogućio stvaranje zapanjujućih JavaScript aplikacija koje se mogu ugodno pokretati na raznim mjestima.

Nakon toga, tim jQuerya podigao je stvari nekoliko više razvijajući jQuery UI, što je omogućilo programerima da kreiraju lijepe web aplikacije na postojećoj jezgri jQuery.

Još bolje, 2010. predstavljen je jQuery Mobile koji je razvoj učinio mnogo boljim i učinkovitijim.

Izgrađen s predrasudama prema mobilnim telefonima, jQuery Mobile učinkovit je, objedinjeni okvir koji nudi komponente korisničkog sučelja, prijelaze podataka i druge uzbudljive značajke.

jQuery Mobile koristi funkcionalnosti HTML5, CSS3, jQuery, kao i jQuery UI u jedinstveni okvir koji omogućava programerima da postignu dosljednost na različitim platformama i uređajima.

Osnovne značajke jQuery Mobile

1. Velika jednostavnost i upotrebljivost

Okvir jQuery Mobile je jednostavan i fleksibilan. Budući da je konfiguracijsko sučelje okvira vođeno mark-up, programeri mogu lako izgraditi svoja cjelovita osnovna sučelja aplikacija u HTML-u, s minimalnim ili nikakvim JavaScript kodom.

Složeni zadaci koji zahtijevaju nekoliko redaka JavaScript koda, poput Ajax poziva i DOM manipulacije, lako se mogu realizirati s nekoliko redaka koda u mobilnom jQueryju.

Na primjer, ako želimo da korisnik klikne i sakrije neki tekst nakon što je stranica kreirana u DOM-u, ali prije dovršetka poboljšanja, jednostavno možemo koristiti rukovatelj događajima pagecreate . To je nešto što bi zahtijevalo nekoliko redaka da bi se postiglo bez jQuery Mobile.

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

U gornjem kodu parametar #mypagetest odnosi se na id stranice koji određuje događaj stranice. Također, metoda on () koristi se za pričvršćivanje obrađivača događaja.

Nadalje, njegova jednostavnost omogućuje programerima razbijanje njihovih aplikacija na više stranica. Pomoću okvira programeri mogu "manje pisati, a više raditi".

2. Progresivno poboljšanje i graciozna degradacija

Progresivno poboljšanje i graciozna degradacija ključne su značajke koje pokreću okretnost jQuery Mobile. Omogućuju mu da podržava i vrhunske i manje sposobne uređaje (na primjer, one kojima nedostaje podrška za JavaScript).

Okvir omogućuje programerima izradu aplikacija kojima može pristupiti najveći broj preglednika i uređaja, bilo da se radi o Internet Exploreru 6 ili najnovijem Androidu ili iPhoneu.

Mobilni jQuery također pruža programerima mogućnost prikazivanja osnovnog sadržaja (kako je izgrađen) na osnovnim uređajima. I sofisticiranije platforme i preglednici bit će sve više obogaćeni korištenjem dodatnih, vanjski povezanih JavaScript i CSS-a.

3. Podrška za korisničke unose

Tijekom jQuery mobilnog razvoja, programeri mogu uključiti nekomplicirani API za podršku funkcionalnosti unosa zasnovanih na dodiru, mišu i kurzoru. Nekoliko vrsta lako oblikovanih i dodirnih elemenata oblika također je uključeno u okvir.

Primjeri uključuju potvrdni okvir i radio prijemnike, klizač, filtriranje pretraživanja i elemente odabira izbornika. Također, svaki od elemenata obrasca uključuje zamjensku 'mini' verziju, koja se lako može uklopiti u mobilne web stranice.

Na primjer, evo kako stvoriti gumb za potvrdu pomoću jQuery Mobile. Primijetite da je atribut data-mini = "true" dodan za stvaranje mini verzije gumba.

  Click here to agree 

Osim svega toga, kako bi se osiguralo optimiziranje korisničkog iskustva na mobilnim uređajima, okvir ima bogati navigacijski sustav koji pokreće Ajax koji omogućuje animirani prijelaz stranica da se odvija bez zastoja.

Pomoću događaja prijelaza jQuery Mobile možete animirati prijelaz s trenutačno aktivne stranice na novu stranicu.

Na primjer, možete koristiti događaj pagebeforeshow (pokrenut na stranici "do") i događaj pagebeforehide (pokrenut na stranici "od") pri prijelazu s jedne stranice na sljedeću. Oba događaja aktiviraju se prije početka prijelazne animacije.

Pogledajmo kako se mogu primijeniti:

$(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. Pristupačnost

Uz mogućnosti više platformi, jQuery za mobilne uređajestvoren je s velikim razmatranjem pristupačnosti.

Okvir dolazi s podrškom za pristupačne bogate internetske aplikacije (WAI-ARIA) za pomoć invalidnim osobama koje koriste čitače zaslona i druge pomoćne tehnologije da lako pristupe web stranicama.

5. Lagana veličina

Lagana veličina mobilnog jQueryja (oko 40 KB kad se umanji) dodaje mu brzinu. Uz to, činjenica da koristi minimalne ovisnosti o slici također znatno ubrzava njegove mogućnosti.

6. Dodaci za tematiku i korisničko sučelje

jQuery Mobile ima ugrađeni sustav tema koji programerima omogućuje određivanje vlastitog stila aplikacije. Pomoću jQuery Mobile Themerollera programeri mogu učinkovito prilagoditi svoje programe tako da odgovaraju njihovoj boji, ukusu i preferencijama.

Okvir također dolazi s raznim inovativnim dodacima na više platformi koji programerima omogućuju stvaranje aplikacija koje su bolje prilagođene.

Neki od dostupnih widgeta su trajne alatne trake, gumbi, dijaloški okviri i najčešće korišteni skočni widget.

7. Odzivnost

Puna reakcija okvira omogućuje istim osnovnim kodnim bazama da se udobno uklope u različite vrste zaslona, ​​od mobilnih uređaja do zaslona veličine radne površine.

Osnovna struktura stranice jQuery Mobile

Struktura jQuery Mobile ima sve komponente korisničkog sučelja i atribute potrebne za stvaranje korisničkih i značajki bogatih mobilnih web aplikacija i web stranica svih vrsta - bilo osnovnih ili naprednih.

Pomoću jQuery mobile možete izrađivati ​​web stranice, razne vrste prikaza popisa, alatne trake, širok raspon elemenata i gumba obrasca, dijaloške okvire, kao i druge funkcije.

Importantly, since jQuery Mobile is created on top of jQuery core, it lets developers leverage jQuery UI code and access key facilities. These include robust animation and image effects for web pages, DOM manipulation, event handling, and Ajax for server communication.

Let's get a feel for how jQuery mobile development code looks.

For example, in this time of the COVID-19 pandemic when most people are working from home or from co-working spaces, let's create a simple web page that demonstrates some team management mistakes that people make.

Here is the code:

   jQuery Mobile Example 

fCC jQuery Mobile Sample

COVID-19 Work-From-Home Team Management Mistakes To Avoid

    • Using Unnecessary Tools
    • Foregoing Team Evaluations
    • Micromanaging
    • Hiring Too Quickly
    • Not Having Contingencies

    alfrickopidi.com, 2020 - Copyright

    Here is the output when the above mobile jQuery lines of code are opened on a browser:

    Notably, when the browser is decreased or increased, the size of the items in the list also adjusts appropriately. Therefore, the web page can be easily accessed in various devices with different screen resolutions without worrying about lack of consistency. The size of the items will change accordingly to suit the type of device.

    As you can see in the above code sample, the document is a simple HTML5 that includes the following three things:

    • Files from the jQuery Mobile CSS (jquery.mobile-1.4.5.min.css)
    • Files from the jQuery repository (jquery-1.11.1.min.js)
    • Files from the jQuery Mobile repository (jquery.mobile-1.4.5.min.js)

    These files are directly linked to the jQuery CDN. Another alternative is to head over to the download page to get these files and host them on a private server.

    Importantly, including the "viewport" metatag during jQuery mobile developmentinstructs devices that the page width and the device screen width are equivalent (width=device-width).

    The tag also instructs the browser to zoom in to 100 per cent (scale=1). If the scale is changed to 2, for instance, the browser will zoom the web page by 50 per cent.

    A closer examination of the code reveals some strange "data-"attributes scattered throughout it. This is an improved feature of HTML5 that enables developers to pass organized data across an application – for example, the data-role="header" attribute defines the head section of the web page.

    The above example just scratches the surface of the things developers can achieve using jQuery Mobile. The framework's documentation is easy to follow and describes its many features, including linking pages, incorporating animated page transitions, and designing buttons.

    Conclusion

    jQuery for mobile is a resource-rich framework built with jQuery, HTML5, and CSS capabilities to handle certain cross-platform, cross-device and cross-browser compatibility issues effectively.

    The framework offers great opportunities for creating mobile and web applications that are powerful, fully responsive, and future-ready.

    Will you give it a try?