jQuery Mobile - jQuery Mobile

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

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

Содержание
  • 1 Возможности
  • 2 Пример использования
  • 3 Базовый пример
  • 4 Тематика
  • 5 Поддержка мобильного браузера
  • 6 История выпусков
  • 7 См. Также
  • 8 Ссылки
  • 9 Дополнительная литература
  • 10 Внешние ссылки
Возможности
  • Совместимость со всеми основными настольными браузерами, а также со всеми основными мобильными платформами, включая Android, iOS, Windows Phone, Blackberry, WebOS, Symbian.
  • Построен на основе ядра jQuery, поэтому имеет минимальное кривая обучения для людей, уже знакомых с синтаксисом jQuery.
  • Тематический фреймворк, который позволяет создавать собственные темы.
  • Ограниченные зависимости и легкий вес для оптимизации скорости.
  • Та же основная база кода будет автоматически масштабируется до любого экрана.
  • Конфигурация на основе HTML5 для компоновки страниц с минимальным написанием сценариев.
  • AJAX навигация с анимированными переходами между страницами, которая обеспечивает возможность создания семантических URL-адресов через pushState.
  • виджеты пользовательского интерфейса которые оптимизированы для сенсорного ввода и не зависят от платформы.

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

Пример использования
$ ('div'). on ('tap', function (event) {предупреждение ('элемент нажат'); });
$ (документ).ready (function () {$ ('. MyList li'). On ('нажмите touchstart', function () {$ ('. MyDiv'). SlideDown ('500');});}
Базовый пример

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

Экран проекта определяется разделэлемент HTML5 и роль данныхстраницы страницы. Обратите внимание, что роль данныхявляется примером данных HTML5 атрибут, в данном случае определяемый jQuery Mobile. Страница может иметь элементы headerи footerс data-roleof headerи нижний колонтитул, соответственно. Между ними может быть элемент articleс рольюиз mainи classиз ui-content. Наконец, navel Элемент, с ролью данныхиз панели навигацииможет присутствовать.

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

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

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

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

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

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

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

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

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

1 2 3 4 5 Пример jQuery Mobile6 7 89 10 11 
12
13

jQuery Mobile - jQuery Mobile

14
15 16
17
Привет, мир!
18 Перейти на страницу 2 19
20 21
22

Нижний колонтитул страницы 1

23
24
25 26
27
28

jQuery Mobile - jQuery Mobile

29
30 31
32
Пример страницы
33
34 35
36

Нижний колонтитул страницы 2

37
38
39 40 4142
Theming

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

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

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

jQuery Mobile - jQuery Mobile

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

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

Поддержка мобильного браузера
ПлатформаВерсияСобственнаяРазрыв в телефонеOpera Mobile Opera Mini Fennec ОзонЧистый фронт
0,98,5, 8,659,5104,05.01.01.1 *0.94.0
iOS v2.2.1AA
v3.1.3, v3. 2AAA
v4-7.0AAA
Symbian S60 v3.1, v3.2AAAAACC
v5.0CCCACA
Symbian UIQ v3.0, v3.1C. 8.65C
v3.2CC
Symbian Platform v.3.0A
BlackBerry OS v4.5CCC
v4.6, v4.7CCCB
v5.0BACA
v6.0AAA
Android v1.5, v1.6AA
v2.1AA
v2.2AAA *C *A *
Windows Mobile v6.1CCCCBCBC
v6.5.1CCCAACA
v7.0AACA
webOS 1.4.1AA
bada 1.0A
Maemo 5.0BBCB *
MeeGo 1.1 *A *A *A *

Ключ:

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

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

История выпусков
Дата выпускаНомер версии
16 октября 2010 1.0.0 Alpha 1
12 ноября 2010 1.0.0 Alpha 2
4 февраля 2011 1.0.0 Alpha 3
31 марта 2011 1.0.0 Alpha 4
7 апреля 2011 г. 1.0.0 Alpha 4.1
20 июня 2011 г. 1.0.0 Beta 1
3 августа 2011 г. 1.0.0 Beta 2
сентябрь 8 2011 1.0.0 Beta 3
29 сентября 2011 1.0.0 RC1
19 октября 2011 1.0.0 RC2
13 ноября 2011 1.0.0 RC3
16 ноября 2011 г. 1.0.0
26 января 2012 г. 1.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
январь ry 14, 2013 1.3.0 Beta
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 Alpha 1
15 августа 2013 г. 1.4.0 Alpha 2
24 сентября 2013 г. 1.4.0 Beta 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
См. также
Ссылки
Дополнительная литература
Внешние ссылки
Последняя правка сделана 2021-05-24 10:17:22
Содержание доступно по лицензии CC BY-SA 3.0 (если не указано иное).
Обратная связь: support@alphapedia.ru
Соглашение
О проекте