jQuery для мобильных устройств

jQuery для мобильных устройств

Разработчик(и)	Команда jQuery
Первоначальный выпуск	16 октября 2010 г. ( 16.10.2010 )
Стабильная версия	1.4.5 / 31 октября 2014 г. ( 31.10.2014 )
Предварительный выпуск	1.5.0-rc1 / 10 сентября 2018 г. ( 10.09.2018 )
Репозиторий	github .с /jquery /jquery-mobile
Написано в	JavaScript
Платформа	См. Поддержка мобильных браузеров.
Размер	351 КБ/142 КБ (уменьшенный)/40 КБ (уменьшенный, сжатый gzip)
Тип	Платформа мобильных приложений
Лицензия	С
Веб-сайт	jquerymobile .с

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

С 7 октября 2021 г. поддержка jQuery Mobile устарела.

Функции

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

(Источник: с сайта jQuery Mobile)

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

$('div').on('tap', function(event){
  alert('element tapped ');
});

$(document).ready(function(){
    $('.myList li').on('click touchstart', function() {
        $('.myDiv').slideDown('500');
    });
});

Базовый пример

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

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

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

В приведенном ниже примере используются два других атрибута data-. 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>
    <head>
		<meta charset="utf-8">
		<title>jQuery Mobile Example</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">		
    </head>
 
    <body>
        <section data-role="page" id="first" data-theme="a">
            <header data-role="header" data-position="fixed">
                <h1>Page 1 Header</h1>
            </header>
 
            <article role="main" class="ui-content">
                <h2>Hello, world!</h2>
                <a href="#second" data-role="button" data-inline="true" data-transition="flow" data-icon="carat-r" data-iconpos="right">Go to Page 2</a>
            </article>
 
            <footer data-role="footer" data-position="fixed">
                <h4>Page 1 Footer</h4>
            </footer>
        </section>
 
        <section data-role="page" id="second" data-theme="b">
            <header data-role="header" data-position="fixed"  data-add-back-btn="true">
                <h1>Page 2 Header</h1>
            </header>
 
            <article role="main" class="ui-content">
                <h2>Example Page</h2>
            </article>
 
            <footer data-role="footer" data-position="fixed">
                <h4>Page 2 Footer</h4>
            </footer>
        </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. приложение для настройки внешнего вида и создания фирменного опыта. После разработки темы в приложении ThemeRoller программисты могут загрузить собственный файл CSS и включить его в свой проект, чтобы использовать свою собственную тему.

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

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

<div data-role="header" data-theme="b"> 
	<h1>Page Title</h1> 
</div>

(Источник: с сайта jQuery Mobile)

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

Поддержка мобильных браузеров

Платформа	Версия	Родной	Телефонный разрыв	Опера Мобайл			Опера Мини		Фенек		Озон	Чистая передняя часть
			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	А	А
	v3.1.3, v3.2	А	А					А
	v4-7.0	А	А					А
Симбиан С60	v3.1, v3.2	А		А		А	А	А			С	С
	v5.0	С	С	С		А	С	А
Symbian-UIQ	v3.0, v3.1			С 8.65							С
	v3.2				С						С
Платформа Симбиан	v.3.0	А
Блэкберри ОС	v4.5	С					С	С
	v4.6, v4.7	С	С				С	Б
	v5.0	Б	А				С	А
	v6.0	А	А					А
Андроид	v1.5, v1.6	А	А
	v2.1	А	А
	v2.2	А	А			А*		С*		А*
Windows Мобайл	v6.1	С		С	С	С	Б	С	Б			С
	v6.5.1	С		С	С	А	А	С	А
	v7.0	А				А	С	А
вебОС	1.4.1	А	А
если	1.0	А
Условия	5.0	Б				Б			С	Б*
МиГо	1.1*	А*				А*				А*

Ключ:

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

(Источник: с сайта jQuery Mobile)

История выпусков

Дата выпуска	Номер версии
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 сентября 2011 г.	1.0.0 Бета 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
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 РК 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-альфа.1

См. также

• jQTouch
• jQuery
• Адаптация контента
• Студия Да Винчи
• интерфейс пользователя
• PhoneGap
• Тизен
• ViziApps
• Бутстрап
• Фреймворк JavaScript
• библиотека JavaScript

Дальнейшее чтение

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

Внешние ссылки

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