Просто въведение в jQuery Mobile Framework

Когато светът откри мрежата, нещата бяха невъзбуждащи и безжизнени. Например, изграждането на просто приложение за пренасочване на изображението изисква няколко реда код и не може да работи на някои платформи.

Но нещата се подобриха, когато jQuery беше въведен, тъй като позволява на разработчиците да създават зашеметяващи JavaScript приложения, които могат да работят удобно на различни места.

След това екипът на jQuery вдигна нещата много по-високо, като разработи потребителски интерфейс на jQuery, което даде възможност на разработчиците да създават красиви уеб приложения на съществуващото ядро ​​на jQuery.

Още по-добре, през 2010 г. беше представен jQuery Mobile, който направи развитието много по-добро и по-ефективно.

Изграден с отклонение към мобилните телефони, jQuery Mobile е ефективна, унифицирана рамка, която предлага потребителски интерфейси, преходи на данни и други вълнуващи функции.

jQuery Mobile използва функционалностите на HTML5, CSS3, jQuery, както и jQuery UI в една рамка, която позволява на разработчиците да постигнат последователност между различни платформи и устройства.

Основни характеристики на jQuery Mobile

1. Голяма простота и използваемост

Рамката jQuery Mobile е несложна и гъвкава. Тъй като конфигурационният интерфейс на рамката е управляван от надценка, разработчиците могат лесно да изградят своите пълни основни интерфейси на приложения в HTML, с минимален или никакъв JavaScript код.

Сложните задачи, изискващи няколко реда JavaScript код, като Ajax повиквания и DOM манипулация, могат лесно да бъдат реализирани с няколко реда код в мобилния jQuery.

Например, ако искаме потребител да щракне и да скрие някакъв текст, след като в DOM е създадена страница, но преди приключването на подобрението, можем просто да използваме манипулатора на събитията pagecreate . Това е нещо, което ще изисква няколко реда код, за да се изпълни без jQuery Mobile.

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

В горния код параметърът #mypagetest се отнася до идентификатора на страницата, който определя събитието на страницата. Също така методът on () се използва за прикачване на манипулаторите на събития.

Освен това, нейната простота позволява на разработчиците да разбиват своите приложения на множество страници. С рамката разработчиците могат да „пишат по-малко и да правят повече“.

2. Прогресивно подобрение и грациозна деградация

Прогресивното подобрение и грациозната деградация са ключови характеристики, които задвижват гъвкавостта на jQuery Mobile. Те му позволяват да поддържа както устройства от висок клас, така и по-малко способни устройства (например тези, на които липсва поддръжка на JavaScript).

Рамката позволява на разработчиците да създават приложения, които могат да бъдат достъпни от най-голям брой браузъри и устройства, независимо дали става въпрос за Internet Explorer 6 или най-новия Android или iPhone.

Mobile jQuery също така дава възможност на разработчиците да изобразяват основно съдържание (както е вградено) на основни устройства. А по-сложните платформи и браузъри ще се обогатяват все повече, използвайки допълнителни, външно свързани JavaScript и CSS.

3. Поддръжка за удобни за потребителя входове

По време на разработката на jQuery за мобилни устройства, разработчиците могат да включат неусложнен API за поддържане на функционалности за въвеждане на потребител, базирани на докосване, мишка и курсор. Няколко вида лесно оформени и лесни за докосване елементи от формата също са включени в рамката.

Примерите включват квадратче за отметка и радиостанции, плъзгач, филтриране на търсене и елементи за избор на меню. Също така, всеки от елементите на формуляра включва алтернативна „мини“ версия, която може лесно да бъде включена в мобилните уеб страници.

Например, ето как да създадете бутон за отметка с помощта на jQuery Mobile. Забележете, че атрибутът data-mini = "true" е добавен за създаване на мини версия на бутона.

  Click here to agree 

Освен всичко това, за да се гарантира оптимизиране на потребителското изживяване на мобилни устройства, рамката разполага с богата навигационна система, управлявана от Ajax, която позволява анимираните преходи на страници да се извършват безпроблемно.

С jQuery Mobile преходни събития можете да анимирате прехода от текущата активна страница към новата страница.

Например можете да използвате събитието pagebeforeshow (задействано на страницата „до“) и събитието pagebeforehide (задействано на страницата „от“) при преминаване от една страница към следващата. И двете събития се задействат преди началото на анимацията на прехода.

Нека да видим как те могат да бъдат приложени:

$(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. Достъпност

Освен възможностите си за различни платформи, jQuery за мобилни устройствае създаден със силна грижа за достъпността.

Рамката се предлага с поддръжка за достъпни богати интернет приложения (WAI-ARIA) за подпомагане на хората с увреждания, използващи екранни четци и други помощни технологии, за лесен достъп до уеб страници.

5. Лек размер

Лекият размер на мобилния jQuery (около 40KB, когато е умален) добавя към неговата бързина. Освен това фактът, че използва минимални зависимости на изображението, също значително ускорява неговите възможности.

6. Приспособления за тематизиране и потребителски интерфейс

jQuery Mobile има вградена тематична система, която позволява на разработчиците да определят собствения си стил на приложението. С jQuery Mobile Themeroller разработчиците могат ефективно да персонализират своите приложения, така че да отговарят на техния цвят, вкус и предпочитания.

Рамката се предлага и с различни иновативни приспособления за различни платформи, които позволяват на разработчиците да създават приложения, които са по-добре персонализирани.

Някои от наличните приспособления са постоянни ленти с инструменти, бутони, диалогови прозорци и често използваното изскачащо приспособление.

7. Отзивчивост

Пълната отзивчивост на рамката позволява едни и същи базови кодови бази да се поберат удобно в различни видове екрани, от мобилни устройства до екрани с размер на настолни компютри.

Основна структура на страниците на jQuery Mobile

Структурата на jQuery Mobile има всички компоненти и атрибути на потребителския интерфейс, необходими за създаването на лесни за употреба и богати на функции мобилни уеб приложения и уебсайтове от всякакъв вид - независимо дали са основни или разширени.

Можете да използвате jQuery mobile за създаване на уеб страници, различни видове изгледи на списъци, ленти с инструменти, широк спектър от елементи на формуляри и бутони, диалогови прозорци, както и други функции.

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?