Из Википедии, свободной энциклопедии
Перейти к навигации Перейти к поиску

jQuery Mobile
JQuery mobile logo.svg
Разработчики)Команда jQuery
Начальная версия16 октября 2010 г. [1] ( 2010-10-16 )
Стабильный выпуск
1.4.5 / 31 октября 2014 г. (2014-10-31)
Предварительный выпуск
1.5.0-rc1 / 10 сентября 2018 г. (2018-09-10)
Репозиторий
Отредактируйте это в Викиданных
Написано вJavaScript
ПлатформаСм. Раздел Поддержка мобильного браузера.
Размер351 КБ / 142 КБ (минимизированный) / 40 КБ (минимизированный, сжатый с помощью gzip)
ТипФреймворк мобильных приложений
ЛицензияМассачусетский технологический институт [2]
Веб-сайтjquerymobile .com

jQuery Mobile - это оптимизированная для сенсорного управления веб-платформа (также известная как мобильная платформа), в частности библиотека JavaScript , разработанная командой проекта jQuery . Разработка направлена на создание основы , совместимые с широким спектром смартфонов и планшетных компьютеров , [3] сделали необходимым рост , но неоднородные таблетки и рынок смартфонов. [4] Платформа jQuery Mobile совместима с другими платформами мобильных приложений [5] и такими платформами, как PhoneGap , Worklight [6] и другими.

Особенности [ править ]

  • Совместимость со всеми основными настольными браузерами, а также со всеми основными мобильными платформами, включая Android , iOS , Windows Phone , Blackberry , WebOS , Symbian .
  • Построен на основе ядра jQuery, поэтому он требует минимального обучения для людей, уже знакомых с синтаксисом jQuery.
  • Тематический фреймворк, позволяющий создавать собственные темы.
  • Ограниченные зависимости и легкий вес для оптимизации скорости.
  • Та же базовая кодовая база автоматически масштабируется для любого экрана.
  • Конфигурация на основе HTML5 для компоновки страниц с минимальным написанием скриптов.
  • Навигация на основе AJAX с анимированными переходами между страницами, которая предоставляет возможность создавать семантические URL-адреса через pushState.
  • Виджеты пользовательского интерфейса, оптимизированные для сенсорного управления и не зависящие от платформы.

(Источник: с веб-сайта jQuery Mobile) [3]

Пример использования [ править ]

$ ( 'div' ). on ( 'нажатие' ,  функция ( событие ) {  alert ( 'элемент нажат' ); });
$ ( документ ). ready ( function () {  $ ( '.myList li' ). on ( 'click touchstart' ,  function ()  {  $ ( '.myDiv' ). slideDown ( '500' );  }); }

Базовый пример [ править ]

Далее следует базовый проект jQuery Mobile, использующий семантические элементы HTML5 . Важно установить ссылку на библиотеки JavaScript jQuery и jQuery Mobile и таблицу стилей (файлы можно загружать и размещать локально, но рекомендуется ссылаться на файлы, размещенные в jQuery CDN ).

Экран проекта определяется sectionэлементом HTML5, а data-roleиз page. Обратите внимание, что data-roleэто пример dataатрибута HTML5 , в данном случае определяемого jQuery Mobile. Страница может иметь headerи footerэлементы с data-roleиз headerи footer, соответственно. Между ними может быть articleэлемент с a roleof mainи a classof ui-content. Наконец, может присутствовать navэлемент с data-roleof navbar.

Один документ HTML может содержать более одного sectionэлемента и, следовательно, более одного экрана, заполненного содержимым . Таким образом, необходимо загрузить только один файл, который включает несколько страниц содержимого. Одна страница может ссылаться на другую страницу в том же файле, ссылаясь на атрибут id страницы (например, href="#second").

В приведенном ниже примере используются два других атрибута данных. data-themeАтрибут сообщает браузеру , что тема для визуализации. data-add-back-btnАтрибут добавляет кнопку возврата на страницу , если установлено true.

Наконец, значки могут быть добавлены к элементам с помощью data-iconатрибута. В jQuery Mobile встроено пятьдесят часто используемых значков.

Краткое объяснение атрибутов данных, используемых в этом примере:

data-role - определяет роль элемента, например заголовок, содержимое, нижний колонтитул и т. д.

data-theme - указывает, какую тему дизайна использовать для элементов в контейнере. Может иметь значение: a или b.

data-position - указывает, следует ли зафиксировать элемент, и в этом случае он будет отображаться вверху (для заголовка) или внизу (для нижнего колонтитула).

data-transition - определяет одну из десяти встроенных анимаций для использования при загрузке новых страниц.

data-icon - указывает один из пятидесяти встроенных значков, которые можно добавить к элементу.

<! doctype html>< html > < голова >< meta  charset = "utf-8" >< title > Пример jQuery Mobile </ title >< meta  name = "viewport"  content = "initial-scale = 1, user-scalable = no, width = device-width" >< link  rel = "stylesheet"  href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" > </ голова >  < тело > < section  data-role = "page"  id = "first"  data-theme = "a" > < header  data-role = "header"  data-position = "fixed" > < h1 > Заголовок страницы 1 </ h1 > </ заголовок >  < article  role = "main"  class = "ui-content" > < h2 > Привет, мир! </ h2 > < HREF = « # Секунда» данные роль = «Кнопка» данные рядного = «истина» данные переход = «поток» данные-значок = «Караты-R» данные-iconpos = «вправо» > Перейти на страницу- </ а >       </ article >  < footer  data-role = "footer"  data-position = "fixed" > < h4 > Нижний колонтитул страницы 1 </ h4 > </ нижний колонтитул > </ section >  < section  data-role = "page"  id = "second"  data-theme = "b" > < header  data-role = "header"  data-position = "fixed"  data-add-back-btn = "true" > < h1 > Заголовок страницы 2 </ h1 > </ заголовок >  < article  role = "main"  class = "ui-content" > < h2 > Пример страницы </ h2 > </ article >  < footer  data-role = "footer"  data-position = "fixed" > < h4 > Нижний колонтитул страницы 2 </ h4 > </ нижний колонтитул > </ section >< script  src = "https://code.jquery.com/jquery-1.11.1.min.js" > </ script >< script  src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" > </ script > </ body ></ html >

Тематика [ править ]

jQuery Mobile предоставляет структуру тем, которая позволяет разработчикам настраивать цветовые схемы и определенные аспекты CSS функций пользовательского интерфейса. Разработчики могут использовать приложение jQuery Mobile ThemeRoller [7] для настройки внешнего вида и создания фирменного интерфейса. После разработки темы в приложении ThemeRoller программисты могут загрузить настраиваемый файл CSS и включить его в свой проект, чтобы использовать свою настраиваемую тему. [8]

Каждая тема может содержать до 26 уникальных цветовых «образцов», каждый из которых состоит из строки заголовка, тела содержимого и состояний кнопок. Комбинирование различных образцов позволяет разработчикам создавать более широкий спектр визуальных эффектов, чем они могли бы сделать с помощью всего одного образца для каждой темы. Переключение между различными образцами в теме так же просто, как добавление атрибута, называемого «тема данных», к элементам HTML.

Тема jQuery Mobile по умолчанию поставляется с двумя разными цветными образцами, названными «a» и «b». Вот пример того, как создать панель инструментов с образцом «b»:

< div  data-role = "header"  data-theme = "b" >  < h1 > Заголовок страницы </ h1 >  </ div >

(Источник: с веб-сайта jQuery Mobile) [3]

Уже существует несколько тем в стиле с открытым исходным кодом, которые разрабатываются и поддерживаются сторонними организациями. Одной из таких тем стиля с открытым исходным кодом является тема стиля Metro, которая была разработана и выпущена Microsoft Open Technologies, Inc. [9] Тема стиля Metro предназначена для имитации пользовательского интерфейса Metro (языка дизайна), который Microsoft использует в своих мобильных операциях. системы.

Поддержка мобильного браузера [ править ]

ПлатформаВерсияРодныеТелефонный разрывOpera Mobileопера миниФенекОзонЧистый фронт
0,98,5, 8,659,5104.05.01.01.1 *0,94.0
iOSv2.2.1АА
v3.1.3, v3.2ААА
v4-7.0ААА
Symbian S60v3.1, v3.2АААААCC
v5.0CCCАCА
Symbian UIQv3.0, v3.1С
8,65		C
v3.2CC
Платформа Symbianv.3.0А
ОС BlackBerryv4.5CCC
v4.6, v4.7CCCB
v5.0BАCА
v6.0ААА
Androidv1.5, v1.6АА
v2.1АА
v2.2ААА *C *А *
Windows Mobilev6.1CCCCBCBC
v6.5.1CCCААCА
v7.0ААCА
WebOS1.4.1АА
бада1.0А
Maemo5.0BBCB *
MeeGo1.1 *А *А *А *

Ключ:

  • A - Высокое качество. Браузер, способный как минимум использовать медиа-запросы (требование для jQuery Mobile). Эти браузеры будут активно тестироваться, но могут не получить все возможности jQuery Mobile.
  • B - Среднее качество. Функциональный браузер, не имеющий достаточной доли рынка для повседневного тестирования. Исправления ошибок будут по-прежнему применяться, чтобы помочь этим браузерам.
  • C - Низкое качество. Браузер, который не может использовать медиа-запросы. Им не будут предоставлены сценарии jQuery Mobile или CSS (возврат к обычному HTML и простому CSS).
  • * - Ближайший браузер. Этот браузер еще не выпущен, но проходит альфа / бета-тестирование.

(Источник: с веб-сайта jQuery Mobile) [3]

История выпусков [ править ]

Дата выпускаНомер версии
16 октября 2010 г.1.0.0 Альфа 1
12 ноября 2010 г.1.0.0 Альфа 2
4 февраля 2011 г.1.0.0 Альфа 3
31 марта 2011 г.1.0.0 Альфа 4
7 апреля 2011 г.1.0.0 Альфа 4.1
20 июня 2011 г.1.0.0 Бета 1
3 августа 2011 г.1.0.0 Бета 2
8 сентября 20111.0.0 Бета 3
29 сентября 2011 г.1.0.0 RC1
19 октября 2011 г.1.0.0 RC2
13 ноября 20111.0.0 RC3
16 ноября 2011 г.1.0.0
26 января 20121.0.1
28 февраля 2012 г.1.1.0 RC1
6 апреля 2012 г.1.1.0 RC2
13 апреля 2012 г.1.1.0
28 июня 2012 г.1.1.1 RC1
12 июля 2012 г.1.1.1
1 августа 2012 г.1.2.0 Альфа
5 сентября 2012 г.1.2.0 Бета
14 сентября 2012 г.1.2.0 RC1
21 сентября 2012 г.1.2.0 RC2
2 октября 2012 г.1.2.0
14 января 2013 г.1.3.0 Бета
4 февраля 2013 г.1.3.0 RC1
20 февраля 2013 г.1.3.0
19 марта 2013 г.1.1.2
22 марта 2013 г.1.2.1
10 апреля 2013 г.1.3.1
19 июля 2013 г.1.3.2
25 июля 2013 г.1.4.0 Альфа 1
15 августа 2013 г.1.4.0 Альфа 2
24 сентября 2013 г.1.4.0 Бета 1
24 октября 2013 г.1.4.0 RC 1
23 декабря 2013 г.1.4.0
12 февраля 2014 г.1.4.1
28 февраля 2014 г.1.4.2
1 июля 2014 г.1.4.3
12 сентября 2014 г.1.4.4
31 октября 2014 г.1.4.5 (Последняя стабильная версия)
3 января 2017 г.1.5.0-alpha.1

См. Также [ править ]

  • jQTouch
  • jQuery
  • Адаптация контента
  • Студия Да Винчи
  • iUI
  • PhoneGap
  • Tizen
  • ViziApps
  • Бутстрап

Ссылки [ править ]

  1. ^ jQuery Foundation - jquerymobile.com (2010-10-16). «Выпущен jQuery Mobile Alpha 1» . blog.jquerymobile.com . Проверено 22 мая 2014 .
  2. ^ jQuery Foundation - jquery.org (10.09.2012). «Изменения в лицензировании jQuery» . Blog.jquery.com . Проверено 9 октября 2013 .
  3. ^ a b c d «Поддержка мобильных браузеров» .
  4. ^ «Глобальный рост смартфонов» .
  5. ^ «Разъясняет, почему jQuery Mobile подходит для разработки мобильных веб-приложений» .
  6. ^ «IBM Worklight - Соединенные Штаты» . Worklight.com . Проверено 9 октября 2013 .
  7. ^ "ThemeRoller" .
  8. ^ "Обзор мобильных тем JQuery" .
  9. ^ «Другие новости от MS Open Tech: анонс темы в стиле Metro с открытым исходным кодом для jQuery Mobile» .

Дальнейшее чтение [ править ]

  • Дойл, Мэтт (18 марта 2014 г.). Освойте мобильные веб-приложения с помощью jQuery Mobile (4-е изд.). Восторженные книги. п. 567. ISBN 978-0-9873115-3-5.
  • Пеллетье, Джефф (25 апреля 2013 г.). Руководство по мобильному приложению: The Blueprint (1-е изд.). Издательство Withinsight . п. 96. ISBN 978-0989072106.
  • Бай, Джулио (23 июня 2011 г.). jQuery Mobile First Look (1-е изд.). Packt Publishing . п. 216. ISBN. 1-84951-590-5.
  • Рид, Джон (7 июля 2011 г.). jQuery Mobile (1-е изд.). O'Reilly Media . п. 130 . ISBN 1-4493-0668-3.
  • Дэвид, Мэтью (21 сентября 2011 г.). Мобильные веб-сайты HTML5: ускорение HTML5 с помощью jQuery Mobile, Sencha Touch и других платформ (1-е изд.). Focal Press . п. 250 . ISBN 0-240-81813-X.
  • Броулик, Брэд (30 ноября 2011 г.). Pro jQuery Mobile (1-е изд.). Апресс . п. 350. ISBN 1-4302-3966-2.
  • Хольцнер, Стивен Э. (2 января 2012 г.). Sams научитесь jQuery Mobile за 10 минут (1-е изд.). Sams . п. 240. ISBN 0-672-33557-3.
  • Фиртман, Максимилиано (31 января 2012 г.). jQuery Mobile: все готово (1-е изд.). O'Reilly Media . п. 250. ISBN 1-4493-9765-4.
  • Датсон, Фил (13 июля 2012 г.). Sams научитесь jQuery Mobile за 24 часа (1-е изд.). Sams . п. 475. ISBN 0-672-33594-8.
  • де Йонге, Адриан, Датсон, Филипп (2 ноября 2012 г.). jQuery, jQuery UI и jQuery Mobile: рецепты и примеры (1-е изд.). Эддисон-Уэсли Профессионал . п. 400. ISBN 978-0-321-82208-6.

Внешние ссылки [ править ]

  • Официальный сайт
  • Проект jQuery
  • Документация и демонстрация jQuery Mobile
  • jQuery Mobile Framework: меньше пиши, больше делай
  • jQuery Mobile C # ASP.NET Мэтью Дэвид Элгерт
  • PropertyCross, Помощь в выборе кроссплатформенной мобильной платформы: jQuery Mobile