Простий вступ до 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 (близько 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?