A jQuery Mobile Framework egyszerű bemutatása

Amikor a világ felfedezte az internetet, a dolgok izgalmatlanok és élettelenek voltak. Például egy egyszerű kép egérmutató alkalmazás létrehozásához több kódsor szükséges, és egyes platformokon nem működhetett.

De a dolgok jobbak lettek a jQuery bevezetésekor, mivel ez lehetővé tette a fejlesztők számára, hogy lenyűgöző JavaScript alkalmazásokat hozzanak létre, amelyek kényelmesen futtathatók különböző helyeken.

Ezt követően a jQuery csapata egy lépéssel magasabbra vitte a dolgokat a jQuery UI fejlesztésével, ami lehetővé tette a fejlesztők számára, hogy szép megjelenésű webalkalmazásokat hozzanak létre a meglévő jQuery magon.

Még jobb: 2010-ben bemutatták a jQuery Mobile alkalmazást, amely sokkal jobbá és hatékonyabbá tette a fejlesztést.

A mobiltelefonok elfogultságával épített jQuery Mobile hatékony, egységes keret, amely felhasználói felület összetevőket, adatátviteleket és egyéb izgalmas szolgáltatásokat kínál.

A jQuery Mobile a HTML5, a CSS3, a jQuery, valamint a jQuery felhasználói felület funkcióit egyetlen keretrendszerben hasznosítja, amely lehetővé teszi a fejlesztők számára, hogy különböző platformokon és eszközökön konzisztenciát érjenek el.

A jQuery Mobile alapvető jellemzői

1. Nagy egyszerűség és használhatóság

A jQuery Mobile keretrendszer bonyolult és rugalmas. Mivel a keretrendszer konfigurációs felülete felár-vezérelt, a fejlesztők könnyen elkészíthetik a teljes alapvető alkalmazás-interfészeket HTML-ben, minimális JavaScript-kóddal vagy anélkül.

A több JavaScript-kódot igénylő összetett feladatok, például az Ajax hívások és a DOM manipuláció, könnyen megvalósíthatók néhány kódsorral a mobil jQuery-ben.

Például, ha azt akarjuk, hogy a felhasználó kattintjon és elrejtsen egy szöveget, miután egy oldal létrejött a DOM-ban, de a fejlesztés befejezése előtt egyszerűen használhatjuk a pagecreate eseménykezelőt. Ez olyan dolog, amihez a jQuery Mobile nélkül több soros kód szükséges.

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

A fenti kódban a #mypagetest paraméter az oldal eseményére vonatkozó oldal azonosítójára utal. Az on () metódust használják az eseménykezelők csatolására is.

Továbbá egyszerűsége lehetővé teszi a fejlesztők számára, hogy alkalmazásukat több oldalra bontsák. A keretrendszer segítségével a fejlesztők "kevesebbet írhatnak és többet is megtehetnek".

2. Fokozatos fejlesztés és kecses degradáció

A progresszív fejlesztés és a kecses lebontás kulcsfontosságú jellemzők, amelyek elősegítik a jQuery Mobile mozgékonyságát. Lehetővé teszik mind a csúcskategóriás, mind a kevésbé képes eszközök támogatását (például azokat, amelyek nem rendelkeznek JavaScript támogatással).

A keretrendszer lehetővé teszi a fejlesztők számára, hogy olyan alkalmazásokat készítsenek, amelyekhez a lehető legtöbb böngésző és eszköz fér hozzá, legyen szó Internet Explorer 6-ról vagy a legújabb Android-ról vagy iPhone-ról.

A mobil jQuery lehetőséget nyújt a fejlesztőknek arra is, hogy az alapvető tartalmakat (a beépített formában) rendereljék az alapvető eszközökön. A kifinomultabb platformok és böngészők pedig egyre jobban gazdagodnak további, külsőleg összekapcsolt JavaScript és CSS használatával.

3. Felhasználóbarát bemenetek támogatása

A jQuery mobil fejlesztése során a fejlesztők beépíthetnek egy bonyolult API-t az érintéses, egéres és kurzor-fókusz alapú felhasználói beviteli funkciók támogatására. Többféle könnyen stílusos és érintésbarát formaelem is szerepel a keretben.

Ilyenek például a jelölőnégyzet és a rádiókészletek, a csúszka, a keresés szűrése és a menü kiválasztásának elemei. Ezenkívül az űrlapelemek mindegyike tartalmaz egy alternatív „mini” verziót, amely könnyen beépíthető a mobil weboldalakba.

Például, hogyan hozhat létre jelölőnégyzet gombot a jQuery Mobile használatával. Figyelje meg, hogy a data-mini = "true" attribútum hozzáadódik a gomb mini verziójának létrehozásához.

  Click here to agree 

Mindezeken túl, a felhasználói élmény optimalizálása érdekében a mobileszközökön, a keret gazdag Ajax-vezérelt navigációs rendszerrel rendelkezik, amely lehetővé teszi az animált oldalátmeneteket zökkenőmentesen.

A jQuery Mobile átmeneti eseményekkel animálhatja az aktuális aktív oldalról az új oldalra való átmenetet.

Például használhatja a pagebeforeshow eseményt (kiváltva a "to" oldalon) és a pagebeforehide eseményt (kiváltva a "from" oldalon), amikor egyik oldalról a másikra vált. Mindkét esemény az átmeneti animáció megkezdése előtt indul.

Nézzük meg, hogyan lehet őket alkalmazni:

$(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. Hozzáférhetőség

A platformokon átívelő képességei mellett a jQuery for mobileaz akadálymentesítés alapos figyelembevételével jött létre.

A keretrendszer az Accessible Rich Internet Applications (WAI-ARIA) támogatásával érkezik, hogy a képernyõolvasókat és más segédeszközöket használó fogyatékkal élõ személyek könnyebben elérhessék a weboldalakat.

5. Könnyű méret

A mobil jQuery könnyű mérete (kb. 40 KB, ha aprításra kerül) növeli gyorsaságát. Ezenkívül az a tény, hogy minimális képfüggőségeket alkalmaz, jelentősen felgyorsítja képességeit.

6. Theming és UI kütyü

A jQuery Mobile beépített témarendszerrel rendelkezik, amely lehetővé teszi a fejlesztők számára, hogy meghatározzák saját alkalmazásstílusukat. A jQuery Mobile Themeroller segítségével a fejlesztők hatékonyan testre szabhatják alkalmazásaikat, hogy azok illeszkedjenek színükhöz, ízlésükhöz és preferenciáikhoz.

A keretrendszer különféle innovatív, platformokon felüli widgetekkel is rendelkezik, amelyek lehetővé teszik a fejlesztők számára, hogy jobban testreszabható alkalmazásokat hozzanak létre.

Az elérhető widgetek közül néhány állandó eszköztár, gomb, párbeszédpanel és a gyakran használt előugró widget.

7. Válaszkészség

A keretrendszer teljes válaszkészsége lehetővé teszi, hogy ugyanazok az alapul szolgáló kódbázisok kényelmesen elférjenek a különböző típusú képernyőkön, a mobileszközöktől kezdve az asztali méretű képernyőkig.

A jQuery Mobile alapvető oldalszerkezete

A jQuery Mobile felépítése tartalmazza az összes felhasználói felület összetevőt és attribútumot, amelyek szükségesek a felhasználóbarát és funkciókban gazdag mobil webalkalmazások és mindenféle weboldal létrehozásához - legyen az alap vagy haladó.

A jQuery mobile segítségével weboldalakat, különféle típusú listanézeteket, eszköztárakat, űrlapelemek és gombok széles választékát, párbeszédpaneleket, valamint egyéb funkciókat készíthet.

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?