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

Когда мир открыл для себя Интернет, все было неинтересно и безжизненно. Например, для создания простого приложения для наведения указателя мыши на изображение требовалось несколько строк кода и оно не могло работать на некоторых платформах.

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

После этого команда jQuery поднялась на ступеньку выше, разработав пользовательский интерфейс jQuery, который позволил разработчикам создавать красивые веб-приложения на существующем ядре jQuery.

Более того, в 2010 году был представлен jQuery Mobile, который сделал разработку намного лучше и эффективнее.

JQuery Mobile, ориентированный на мобильные телефоны, представляет собой эффективную унифицированную платформу, которая предлагает компоненты пользовательского интерфейса, переходы данных и другие интересные функции.

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

Основные возможности 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 (запускаемое на странице «to») и событие pagebeforehide (запускаемое на странице «from») при переходе с одной страницы на другую. Оба события запускаются до начала анимации перехода.

Посмотрим, как их можно применить:

$(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 (около 40 КБ в миниатюре) увеличивает его скорость. Кроме того, тот факт, что он использует минимальные зависимости изображений, также значительно ускоряет его возможности.

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?