Різниця між jQuery та jQuery Mobile?

Question 1

Я новачок у розробці мобільних веб-сайтів, і я щойно створив мобільний додаток за допомогою PhoneGap, використовуючи часте використання jQuery.

Але природно було кілька збоїв, пов’язаних з тим, як я форматував речі та тим, як вони насправді з’являлися на екранах мобільних пристроїв, з якими я тестував, і намагаючись їх розробити, я натрапив на багато пропозицій, щоб полегшити собі роботу за допомогою jQuery для мобільних.

Тепер мене це бентежить - jQuery не мав жодного переходу до форматування. Це було лише знання мого початкового рівня про мобільний CSS, що спричинило проблеми.

Отже, що саме робить jQuery mobile і чим він відрізняється від звичайного jQuery? Якщо я вже знаю jQuery, що для мене буде новим?

Question 2

jQuery призначений виключно для спрощення та стандартизації сценаріїв у браузерах. Він зосереджений на матеріалах низького рівня: створенні елементів, маніпулюванні DOM, керуванні атрибутами, виконанні HTTP-запитів тощо.

jQueryUI - це набір компонентів та функцій користувальницького інтерфейсу, побудованих поверх jQuery (тобто для його роботи потрібен jQuery): кнопки, діалогові вікна, повзунки, вкладки, більш розширені анімації, функція перетягування / перетягування.

jQuery та jQueryUI розроблені для додавання на ваш сайт (настільний чи мобільний) - якщо ви хочете додати певну функцію, jQuery або jQueryUI можуть допомогти.

Однак jQuery Mobile є повною структурою. Це має стати вашою відправною точкою для мобільного сайту. Він вимагає jQuery і використовує функції як jQuery, так і jQueryUI, щоб забезпечити як компоненти інтерфейсу, так і функції API для створення мобільних сайтів. Ви все ще можете використовувати його скільки завгодно або якнайменше, але jQuery Mobile може керувати всією областью перегляду зручним для мобільних пристроїв способом.

Інша важлива відмінність полягає в тому, що jQuery та jQueryUI прагнуть бути шаром поверх вашого HTML та CSS. Ви можете просто залишити свою розмітку в спокої та покращити її за допомогою jQuery. Однак jQuery Mobile надає способи визначити, де ви хочете, щоб компоненти відображались, використовуючи лише HTML, наприклад (з веб-сайту jQuery Mobile):

<ul data-role="listview" data-inset="true" data-filter="true">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

data-roleАтрибут повідомляє JQuery Mobile , щоб перетворити цей список в мобільний дружній компонент для користувача інтерфейсу і data-insetта data-filterатрибути набору властивостей , які - без написання єдиної рядки JavaScript. З іншого боку, компоненти jQueryUI зазвичай створюються шляхом написання декількох рядків JavaScript для створення екземпляра компонента в DOM.

Question 3

Що таке jQuery mobile

JQM (jQuery mobile) - це система інтерфейсу користувача для мобільних телефонів, яка побудована поверх jQuery. Для роботи JQM потрібен jQuery. На відміну від інших подібних платформ для мобільних телефонів, JQM націлена на підтримку всіх основних платформ для мобільних пристроїв, планшетів, електронних читачів та настільних ПК, а не лише мобільних браузерів webkit. Однією з найбільш помітних особливостей фреймворку є навігаційна система Ajax, яка використовує анімовані переходи сторінок (дуже круто).

Що може бути для вас новим

Одна річ про JQM, яка кидає кривим кулям нових користувачів, - це навігація ajax. Виходячи з jquery, ви, мабуть, звикли включати свій javascript на кожну сторінку, а потім використовувати dom ready ( $(function(){ ... }або $(document).ready(function(){ .... }), щоб запустити всі ваші веселі дії з javascript. Але оскільки JQM використовує навігацію ajax, система буде перетягувати інші сторінки в той самий домен, що і перша сторінка, і не завантажує ваші сценарії, що містяться в <head>. Коли наступну сторінку буде завантажено через ajax, ви помітите, що ваші речі всередині $(function(){ ...}не працюватимуть на другій сторінці. Рішенням цього є прив'язка до події pageinit. Ці наступні приклади допоможуть вам на початку вашої подорожі:

$(document).on('pageinit', function(){ // this fires for each new page

});

Для націлювання на певну сторінку ви додаєте ідентифікатор сторінки:

$(document).on('pageinit','#page2', function(){ // this fires for #page2 only 

});

Розуміння подій на новій сторінці допоможе вам багато, починаючи з JQM. http://jquerymobile.com/demos/1.1.0/docs/api/events.html Удачі!

Question 4

jQuery - це DOM-маніпулятор / траверс та AJAX JavaScript. Це автоматично абстрагує велику кількість складностей між різними браузерами. Існує незліченна кількість плагінів jQuery, які спрощують багато завдань.

jQuery Mobile - це інтерфейс користувача, призначений для мобільних додатків, який побудований на jQuery. Він має компоненти тематизації та інтерфейсу користувача.

Загалом вони безкоштовні. Вам не потрібно використовувати jQuery Mobile, щоб використовувати jQuery. Але щоб використовувати jQuery Mobile, ви повинні використовувати jQuery.

Question 5

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

Я вважаю, що ви шукаєте тут: jQuery Mobile Demo

<!DOCTYPE html> 
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-    [version].min.css" />
    <script src="http://code.jquery.com/jquery-[version].min.js"></script>
    <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>

<body>
    ...content goes here...
</body>
</html>