Разница между 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>

Answer 1

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

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

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

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

Answer 2

2

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

Tamer Shlash

Answer 3

Что такое мобильный CSS?

Legends

Answer 4

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.

Answer 5

Поскольку кто-то только что «переходит» от jQuery + UI на веб-сайтах в браузере к пониманию jQuery Mobile для мобильных устройств, я должен сказать, что изо всех сил пытаюсь понять, как этот конкретный ответ получил 41 голос за, но БЕЗ комментариев. Он особо указывает в своей основной направленности, что в отличие от jQueryUI, который «построен на основе jQuery», jQuery Mobile, однако, является «полноценной структурой». Это полностью расходится с другими ответами ниже, в которых говорится (довольно точно - я думаю!), Что jQuery Mobile также требует запуска jQuery, и добавляет к моему личному замешательству о том, какие .js и .css мне нужны.

Энди Лоренц

Answer 6

3

Извините, вы правы, я не дал понять, что jQuery Mobile тоже требует jQuery - я обновлю его. Хотя обратите внимание, мой ответ на самом деле не предназначен для того, чтобы рассказать вам, как начать работу с jQuery Mobile (это не то, чем был исходный вопрос), просто чтобы дать общий обзор концептуальных различий.

Stu Cox

Answer 7

отличный материал, Стю, спасибо, что поправили свой ответ, который теперь имеет гораздо больше смысла. Вы можете быть удивлены, насколько сложно «новичкам в jquery mobile» начать работу - даже веб-сайт jquerymobile не делает этого очевидным! Это само по себе приводит к еще одному запутанному вопросу - какая версия jquery требуется jquerymobile? На момент написания jquerymobile.com только подразумевает, что 1.4.2 совместим с jQuery 1.8 - 1.10 / 2.0, но я не могу найти нигде, где конкретно указаны версии и зависимости js / css!

Энди Лоренц

Answer 8

Что такое 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 Удачи!

Answer 9

5

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

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

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

Дэниел А. Уайт
источник

Можно ли сказать, что jQuery Mobileэто мобильная версия jQuery UI?

Джефф Хайнс,

@JeffHines - немного. это разные кодовые базы, но они по-разному достигают схожих целей.

Дэниел А. Уайт

Отличные комментарии, Дэниел А. Уайт. Для использования jQuery необязательно использовать jQuery Mobile. Но чтобы использовать jQuery Mobile, вы должны использовать jQuery.

user3174782

Альфа-версия сейчас находится в разработке. jquerymobile.com/changelog/1.5.0-alpha1

Джексон Нг

Answer 10