Једноставан увод у јКуери Мобиле Фрамеворк

Када је свет открио мрежу, ствари су биле узбудљиве и беживотне. На пример, за изградњу једноставне апликације за прелазак мишем за слику било је потребно неколико редова кода и није могло радити на неким платформама.

Али ствари су се побољшале када је представљен јКуери, јер је омогућавао програмерима да креирају запањујуће ЈаваСцрипт апликације које могу удобно да раде на разним местима.

Након тога, тим јКуери-а подигао је ствари неколико више развијајући јКуери УИ, што је омогућило програмерима да креирају лепе веб апликације на постојећем јКуери језгру.

Још боље, 2010. представљен је јКуери Мобиле који је развој учинио много бољим и ефикаснијим.

Изграђен са пристрасношћу према мобилним телефонима, јКуери Мобиле је ефикасан, обједињени оквир који нуди компоненте корисничког интерфејса, прелазе података и друге узбудљиве функције.

јКуери Мобиле користи функционалности ХТМЛ5, ЦСС3, јКуери, као и јКуери УИ у јединствени оквир који омогућава програмерима да постигну доследност на различитим платформама и уређајима.

Основне карактеристике јКуери Мобиле

1. Велика једноставност и употребљивост

Оквир јКуери Мобиле је једноставан и флексибилан. Будући да је интерфејс за конфигурацију оквира вођен марком, програмери могу лако да изграде своје комплетне основне интерфејсе апликација у ХТМЛ-у, са минималним или никаквим ЈаваСцрипт кодом.

Сложени задаци који захтевају неколико редова ЈаваСцрипт кода, као што су Ајак позиви и ДОМ манипулација, лако се могу реализовати са неколико редова кода у мобилном јКуерију.

На пример, ако желимо да корисник кликне и сакрије неки текст након што је страница креирана у ДОМ-у, али пре него што је побољшање завршено, једноставно можемо користити руковалац догађајима пагецреате . То је нешто што би захтевало неколико линија кода да би се постигло без јКуери Мобиле.

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

У горњем коду, параметар # мипагетест односи се на ИД странице која одређује догађај странице. Такође, метода он () се користи за причвршћивање обрађивача догађаја.

Поред тога, његова једноставност омогућава програмерима да разбију своје апликације на више страница. Помоћу оквира програмери могу „писати мање, а радити више“.

2. Прогресивно побољшање и грациозна деградација

Прогресивно побољшање и грациозна деградација кључне су карактеристике које покрећу агилност јКуери Мобиле-а. Омогућавају му да подржава и врхунске и мање способне уређаје (на пример, оне којима недостаје подршка за ЈаваСцрипт).

Оквир омогућава програмерима да граде апликације којима може да приступи највећи број прегледача и уређаја, било да је Интернет Екплорер 6 или најновији Андроид или иПхоне.

Мобилни јКуери такође пружа програмерима могућност приказивања основног садржаја (како је изграђен) на основним уређајима. И софистицираније платформе и прегледачи биће све више обогаћени коришћењем додатних, споља повезаних ЈаваСцрипт-а и ЦСС-а.

3. Подршка за корисничке уносе

Током јКуери мобилног развоја, програмери могу да укључе некомпликовани АПИ који подржава функције уноса засноване на додиру, мишу и курзору. Неколико врста лако обликованих и додирних елемената облика такође је укључено у оквир.

Примери укључују поље за потврду и радио, клизач, филтрирање претраге и елементе за избор менија. Такође, сваки од елемената обрасца укључује алтернативну „мини“ верзију, која се лако може уградити у мобилне веб странице.

На пример, ево како да креирате дугме за потврду помоћу јКуери Мобиле. Приметите да је атрибут дата-мини = "труе" додат за стварање мини верзије дугмета.

  Click here to agree 

Поред свега овога, како би се осигурало да је корисничко искуство оптимизовано на мобилним уређајима, оквир има богати Ајак-ов навигациони систем који омогућава анимирани прелаз страница да се одвија неометано.

Помоћу догађаја транзиције јКуери Мобиле можете анимирати прелазак са тренутне активне странице на нову страницу.

На пример, приликом преласка са једне на следећу страницу можете да користите догађај пагебефоресхов (покренут на страници „до“) и догађај пагебефорехиде (покренути на страници „од“). Оба догађаја се покрећу пре почетка анимације преласка.

Погледајмо како се могу применити:

$(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. Приступачност

Поред могућности више платформи, јКуери за мобилне уређајеје створена са великим разматрањем приступачности.

Оквир долази са подршком за приступачне богате интернет апликације (ВАИ-АРИА) за помоћ инвалидним особама које користе читаче екрана и друге помоћне технологије да лако приступе веб страницама.

5. Лагана величина

Лагана величина мобилног јКуери-ја (око 40КБ када се умањи) додаје му брзину. Поред тога, чињеница да користи минималне зависности од слике такође знатно убрзава његове могућности.

6. Додаци за тематику и кориснички интерфејс

јКуери Мобиле има уграђени систем тема који омогућава програмерима да одреде сопствени стил апликације. Помоћу јКуери Мобиле Тхемероллер-а програмери могу ефикасно прилагодити своје апликације у складу са њиховом бојом, укусом и преференцама.

Оквир такође долази са разним иновативним, вишеплатформским додацима који омогућавају програмерима да креирају апликације које су боље прилагођене.

Неки од доступних виџета су трајне траке с алаткама, дугмад, дијалози и најчешће коришћени виџет.

7. Одзивност

Пуна реакција оквира омогућава истим основним кодним базама да се удобно уклопе у различите типове екрана, од мобилних уређаја до екрана величине радне површине.

Основна структура странице јКуери Мобиле

Структура јКуери Мобиле садржи све компоненте корисничког интерфејса и атрибуте потребне за креирање мобилних веб апликација и веб локација свих врста, прилагођених корисницима и карактеристикама, било основних или напредних.

Помоћу јКуери мобиле можете да правите веб странице, разне врсте приказа листе, траке са алаткама, широк спектар елемената и дугмади обрасца, дијалоге, као и друге функције.

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.

    Горњи пример само огреба површину ствари које програмери могу постићи помоћу јКуери Мобиле. Документацију оквира лако је пратити и описује многе његове функције, укључујући повезивање страница, укључивање анимираних прелаза страница и дугмад за дизајнирање.

    Закључак

    јКуери за мобилне уређаје је богат ресурсима, изграђен са могућностима јКуери, ХТМЛ5 и ЦСС за ефикасно решавање одређених проблема компатибилности на више платформи, на више уређаја и међу прегледачима.

    Оквир нуди велике могућности за стварање мобилних и веб апликација које су моћне, у потпуности одговарају и спремне су за будућност.

    Хоћете ли покушати?