Вопрос по jquery-mobile, jquery – Разница между jQuery и jQuery Mobile?

87

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

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

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

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

«Я не мог поверить, что никто раньше не спрашивал об этом». На самом деле они сделали:stackoverflow.com/q/6636388/368167 Tamer Shlash
Что такое мобильный CSS? Legends

Ваш Ответ

4   ответа
28

What jQuery mobile is

JQM (jQuery mobile) - это система пользовательского интерфейса для мобильных телефонов, построенная на основе jQuery. JQuery требуется для работы JQM. В отличие от других аналогичных каркасов для мобильных телефонов, JQM нацелена на поддержку всех основных мобильных платформ, планшетов, электронных книг и настольных компьютеров, а не только браузеров мобильных веб-наборов. Одной из наиболее заметных особенностей фреймворка является навигационная система Ajax, которая использует анимированные переходы страниц (очень круто).

What may be new to you

Одна вещь о 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 Удачи!

4

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

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

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

Так что вы могли бы сказать, чтоjQuery Mobile это мобильная версияjQuery UI?
@JeffHines - немного. это разные базы кода, но они достигают сходных целей разными способами.
Отличные комментарии, Даниэль А. Уайт. Вам не нужно использовать jQuery Mobile, чтобы использовать jQuery. Но чтобы использовать jQuery Mobile, вы должны использовать jQuery.
Альфа-версия сейчас в разработке.jquerymobile.com/changelog/1.5.0-alpha1
88

jQuery предназначен исключительно для упрощения и стандартизации сценариев в разных браузерах. Основное внимание уделяется низкоуровневым вещам: созданию элементов, управлению DOM, управлению атрибутами, выполнению HTTP-запросов и т. Д.

jQueryUI представляет собой набор компонентов пользовательского интерфейса & amp; функции, построенные на основе jQuery (т. е. для работы требуется jQuery): кнопки, диалоговые окна, ползунки, вкладки, более продвинутая анимация, функция перетаскивания.

jQuery и jQueryUI спроектированы так, чтобы быть «добавленными»; на ваш сайт (настольный или мобильный) - если вы хотите добавить определенную функцию, jQuery или jQueryUI могут помочь.

jQuery MobileОднако это полная структура. Он предназначен для того, чтобы стать отправной точкой для мобильного сайта. Он требует jQuery и использует функции jQuery и jQueryUI для предоставления как компонентов пользовательского интерфейса, так и функций API для создания мобильных сайтов. Вы все еще можете использовать столько, сколько хотите, но jQuery Mobilecan Контролируйте весь видовой экран мобильным способом, если позволите.

Другое существенное отличие состоит в том, что 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.

как кто-то только сейчас "движется дальше" от jQuery + UI на веб-сайтах на основе браузера до понимания jQuery Mobile для мобильных устройств, я должен сказать, что я изо всех сил пытаюсь понять, как этот конкретный ответ получил 41 ответ, но НИКАКИХ комментариев. В своей основной направленности он особо указывает на то, что в отличие от jQueryUI, который «построен поверх jQuery», jQuery Mobile, тем не менее, является «полной структурой». Это полностью расходится с другими ответами ниже, в которых говорится (довольно точно - я думаю!), Что jQuery Mobile также требует, чтобы jQuery запускался, и добавляет мое личное замешательство относительно того, что мне нужно .js и .css.
отличный материал, Стю, спасибо за настройку твоего ответа, который теперь имеет гораздо больше смысла. Вы можете быть удивлены, насколько сложно это сделать для мобильных пользователей jquery. для начала - даже веб-сайт jquerymobile не делает это очевидным! Это само по себе приводит к еще одной путанице - какая версия jquery требуется для jquerymobile? На момент написания статьи только jquerymobile.comimplies что 1.4.2 совместимо с jQuery 1.8 - 1.10 / 2.0 - но я не могу найти нигде, где версии & amp; js / css зависимости указаны конкретно!
Извините, вы правы, я не дал понять, что для jQuery Mobile также требуется jQuery & # x2013; Я обновлю его. Хотя обратите внимание, что мой ответ на самом деле не предназначен для того, чтобы рассказать вам, как начать работу с jQuery Mobile (это не то, чем был первоначальный вопрос), просто для того, чтобы дать общий обзор концептуальных различий.
2

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

Я считаю, что вы ищете здесь: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>

Похожие вопросы