Разработчик (и) | Команда 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 и другими.
(Источник: с веб-сайта 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-role
of header
и нижний колонтитул
, соответственно. Между ними может быть элемент article
с ролью
из main
и class
из ui-content
. Наконец, nav
el Элемент, с ролью данных
из панели навигации
может присутствовать.
Один документ 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 Mobile 6 7 89 10 1112 25 2613 15 16jQuery Mobile - jQuery Mobile
1417 20 21 24Привет, мир!18 Перейти на страницу 2 1927 39 40 414228 30 31jQuery Mobile - jQuery Mobile
2932 34 35 38Пример страницы33
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,9 | 8,5, 8,65 | 9,5 | 10 | 4,0 | 5.0 | 1.0 | 1.1 * | 0.9 | 4.0 | |||
iOS | v2.2.1 | A | A | |||||||||
v3.1.3, v3. 2 | A | A | A | |||||||||
v4-7.0 | A | A | A | |||||||||
Symbian S60 | v3.1, v3.2 | A | A | A | A | A | C | C | ||||
v5.0 | C | C | C | A | C | A | ||||||
Symbian UIQ | v3.0, v3.1 | C. 8.65 | C | |||||||||
v3.2 | C | C | ||||||||||
Symbian Platform | v.3.0 | A | ||||||||||
BlackBerry OS | v4.5 | C | C | C | ||||||||
v4.6, v4.7 | C | C | C | B | ||||||||
v5.0 | B | A | C | A | ||||||||
v6.0 | A | A | A | |||||||||
Android | v1.5, v1.6 | A | A | |||||||||
v2.1 | A | A | ||||||||||
v2.2 | A | A | A * | C * | A * | |||||||
Windows Mobile | v6.1 | C | C | C | C | B | C | B | C | |||
v6.5.1 | C | C | C | A | A | C | A | |||||
v7.0 | A | A | C | A | ||||||||
webOS | 1.4.1 | A | A | |||||||||
bada | 1.0 | A | ||||||||||
Maemo | 5.0 | B | B | C | B * | |||||||
MeeGo | 1.1 * | A * | A * | A * |
Ключ:
(Источник: с веб-сайта jQuery Mobile)