Разница между 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 необязательно использовать jQuery Mobile. Но чтобы использовать jQuery Mobile, вы должны использовать jQuery.

Question 5

Недостаточно моментов для комментариев выше, поэтому добавляем в тему, чтобы ответить на второй вопрос Энди о зависимостях.

Я считаю, что то, что вы ищете, находится здесь: демонстрация jQuery Mobile

<!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>