Разница между jQuery и jQuery Mobile?

Я новичок в мобильной разработке веб-сайтов, и я просто сделал мобильное приложение с PhoneGap, используя частое использование jQuery.

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

Теперь это меня смущает... jQuery не форматировался. Это были только мои знания начального уровня о мобильных CSS, которые вызвали проблемы.

Так что же делает jQuery mobile и как он отличается от обычного jQuery? Если я уже знаю jQuery, что будет для меня новым?

Ответ 1

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.

Ответ 2

Что такое jQuery mobile

JQM (jQuery mobile) - это система пользовательского интерфейса для мобильных телефонов, которая построена поверх jQuery. Для JQM требуется jQuery. В отличие от других аналогичных инфраструктур мобильных телефонов, JQM нацелен на поддержку всех основных мобильных, планшетных, электронных и настольных платформ, а не только мобильных браузеров веб-браузера. Одной из наиболее заметных особенностей структуры является система навигации 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 Удачи!

Ответ 3

jQuery - это манипулирование/перемещение DOM и фреймворк JavaScript AJAX. Он абстрагирует большую сложность между различными браузерами автоматически. Существует множество плагинов jQuery, которые упрощают выполнение многих задач.

jQuery Mobile - это интерфейс пользовательского интерфейса, ориентированный на мобильные приложения, построенные на jQuery. Он имеет тематические и пользовательские компоненты.

В целом, они бесплатны. Вам не нужно использовать jQuery Mobile для использования jQuery. Но для использования jQuery Mobile вы должны использовать jQuery.

Ответ 4

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

Я верю, что вы ищете здесь: 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="#" onclick="location.href='http://code.jquery.com/mobile/[version]/jquery.mobile-    [version].min.css'; return false;" />
    <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>