En simpel introduktion til jQuery Mobile Framework

Da verden opdagede Internettet, var tingene spændende og livløse. For eksempel krævede flere linjer kode at opbygge et simpelt billedoverførselsprogram og kunne ikke fungere på nogle platforme.

Men tingene blev bedre, da jQuery blev introduceret, da det tillod udviklere at oprette fantastiske JavaScript-applikationer, der kunne køre komfortabelt forskellige steder.

Derefter tog jQuery-teamet tingene et hak højere ved at udvikle jQuery UI, hvilket gjorde det muligt for udviklere at oprette flotte webapplikationer på den eksisterende jQuery-kerne.

Endnu bedre, i 2010 blev jQuery Mobile introduceret, hvilket har gjort udviklingen meget bedre og mere effektiv.

Bygget med en bias til mobiltelefoner, jQuery Mobile er en effektiv, samlet ramme, der tilbyder UI-komponenter, dataovergange og andre spændende funktioner.

jQuery Mobile udnytter funktionerne i HTML5, CSS3, jQuery såvel som jQuery UI i en enkelt ramme, der giver udviklere mulighed for at opnå konsistens på tværs af forskellige platforme og enheder.

Grundlæggende funktioner i jQuery Mobile

1. Stor enkelhed og brugervenlighed

JQuery Mobile-rammen er ukompliceret og fleksibel. Da rammens konfigurationsgrænseflade er mark-up drevet, kan udviklere nemt opbygge deres komplette basale applikationsgrænseflader i HTML med minimal eller ingen JavaScript-kode.

Komplekse opgaver, der kræver flere linjer JavaScript-kode, såsom Ajax-opkald og DOM-manipulation, kan let realiseres med få kodelinjer i mobil jQuery.

For eksempel, hvis vi ønsker, at en bruger skal klikke og skjule noget tekst, efter at en side er oprettet i DOM, men før forbedringen er færdig, kan vi simpelthen bruge sidehåndteringshåndteringsprogrammet . Dette er noget, der kræver flere linjekoder at udføre uden jQuery Mobile.

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

I ovenstående kode henviser parameteren #mypagetest til id'et på den side, der specificerer sidehændelsen . Også den på () er metode til at fastgøre hændelseshåndteringsfunktioner.

Desuden giver dets enkelhed udviklere mulighed for at opdele deres applikationer på flere sider. Med rammen kan udviklere "skrive mindre og gøre mere."

2. Progressiv forbedring og yndefuld nedbrydning

Progressiv forbedring og yndefuld nedbrydning er nøglefunktioner, der fremmer jQuery Mobile's smidighed. De gør det muligt at understøtte både avancerede og mindre kapable enheder (for eksempel dem, der mangler JavaScript-understøttelse).

Rammen giver udviklere mulighed for at opbygge applikationer, der er tilgængelige med det bredeste antal browsere og enheder, uanset om det er Internet Explorer 6 eller den nyeste Android eller iPhone.

Mobile jQuery giver også udviklere mulighed for at gengive grundlæggende indhold (som bygget) på basale enheder. Og de mere sofistikerede platforme og browsere vil i stigende grad blive beriget ved hjælp af yderligere, eksternt knyttet JavaScript og CSS.

3. Support til brugervenlige input

Under jQuery-mobiludvikling kan udviklere inkludere en ukompliceret API til understøttelse af berørings-, mus- og markørfokusbaserede brugerinputfunktioner. Adskillige typer let formede og berøringsvenlige formelementer er også inkluderet i rammen.

Eksempler inkluderer afkrydsningsfelt og radiosæt, skyderen, søgefiltrering og menuvalgselementer. Hvert af formelementerne inkluderer også en alternativ 'mini' version, som let kan integreres i mobile websider.

For eksempel kan du her oprette en afkrydsningsfeltknap ved hjælp af jQuery Mobile. Bemærk, at attributten data-mini = "true" tilføjes for at oprette en mini-version af knappen.

  Click here to agree 

Ud over alt dette, for at sikre, at brugeroplevelsen er optimeret på mobile enheder, har rammen et rigt Ajax-drevet navigationssystem, der tillader animerede sideovergange at finde problemfrit.

Med jQuery Mobile overgangshændelser kan du animere overgangen fra den aktuelle aktive side til den nye side.

For eksempel kan du bruge begivenheden pagebeforeshow (udløst på siden "til") og begivenheden pageborehide (udløst på siden "fra"), når du skifter fra en side til den næste. Begge begivenheder udløses inden overgangsanimationen begynder.

Lad os se, hvordan de kan anvendes:

$(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. Tilgængelighed

Udover dets tværgående platforme, jQuery til mobilblev skabt med en stærk overvejelse for tilgængelighed.

Rammen leveres med understøttelse af WAI-ARIA (Accessible Rich Internet Applications), der hjælper handicappede ved hjælp af skærmlæsere og andre hjælpemidler med let adgang til websider.

5. Let størrelse

Mobile jQuerys lette størrelse (ca. 40 KB når den er minificeret) tilføjer sin hurtighed. Derudover fremskynder det faktum, at det anvender minimale billedafhængigheder, også dets muligheder.

6. Tema- og UI-widgets

jQuery Mobile har et indbygget temasystem, der gør det muligt for udviklere at bestemme deres egen applikationsstyling. Med jQuery Mobile Themeroller kan udviklere effektivt tilpasse deres applikationer, så de passer til deres farve, smag og præferencer.

Rammen leveres også med forskellige innovative widget-platforme, der gør det muligt for udviklere at oprette applikationer, der er bedre tilpasset.

Nogle af de tilgængelige widgets er vedvarende værktøjslinjer, knapper, dialoger og den almindeligt anvendte popup-widget.

7. Responsivitet

Rammens fulde lydhørhed gør det muligt for de samme underliggende kodebaser at passe komfortabelt i forskellige typer skærme, fra mobile enheder til desktop-størrelse skærme.

Grundlæggende sidestruktur af jQuery Mobile

jQuery Mobile's struktur har alle UI-komponenter og attributter, der kræves til oprettelse af brugervenlige og funktionsrige mobile webapplikationer og websteder af enhver art - hvad enten det er grundlæggende eller avanceret.

Du kan bruge jQuery mobile til at oprette websider, forskellige typer listevisninger, værktøjslinjer, en bred vifte af formelementer og knapper, dialoger samt andre funktioner.

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.

    Ovenstående eksempel skraber bare overfladen af ​​de ting, som udviklere kan opnå ved hjælp af jQuery Mobile. Rammedokumentationen er let at følge og beskriver dens mange funktioner, herunder linkning af sider, inkorporering af animerede sideovergange og design af knapper.

    Konklusion

    jQuery til mobil er en ressourcerig ramme bygget med jQuery-, HTML5- og CSS-kapaciteter til effektivt at håndtere kompatibilitetsproblemer på tværs af platforme, på tværs af enheder og på tværs af browsere.

    Rammen giver store muligheder for at oprette mobil- og webapplikationer, der er kraftfulde, fuldt responsive og fremtidsklare.

    Vil du prøve det?