jQuery Mobile

Эта статья находится на начальном уровне проработки, в одной из её версий выборочно используется текст из источника, распространяемого под свободной лицензией
Материал из энциклопедии Руниверсалис

jQuery Mobile
Логотип программы jQuery Mobile
Тип Мобильный фреймворк
Разработчик The jQuery Project
Написана на JavaScript
Последняя версия 1.4.5 (31 октября, 2014 г.)
Состояние Активный
Лицензия Двойная лицензия:
GPL и MIT
Сайт jquerymobile.com

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

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

Первый шаг в работе с jQuery Mobile — подключение JavaScript и CSS файлов. Необходимо подключить jQuery, jQuery Mobile JavaScript и jQuery Mobile CSS. Это можно сделать двумя способами: скачать все необходимые файлы и подключить их локально, либо использовать онлайн-подключение библиотек.

В теле примера вы можете видеть div-ы с различными параметрами data-role. На основе этих параметров jQuery Mobile и создает страницу. data-role указывает на роль элемента на экране — это может быть и страница (data-role="page"), кнопка (data-role="button"), список (data-role="listview") и т. д. Страница (data-role="page") может содержать в себе три div-a с ролями header (data-role="header"), footer (data-role="footer") и content (data-role="content"). От роли элемента будет зависеть, как он будет отображаться на экране.

Веб-страница может содержать сколько угодно div-ов с data-role="page", но в таком случае при старте веб-приложения будет показываться та страница, которая была инициализирована первой. Для перехода между страницами используйте ссылки с href="#id", где id — уникальный идентификатор страницы, на которую вы хотите перейти

Атрибут data-theme определяет стиль интерфейса для элемента и его потомков, в jQuery Mobile встроено пять стилей, они пронумерованы как a, b, c, d, e.

Атрибут data-add-back-btn создает кнопку Назад для перехода на предыдущий экран 

<!DOCTYPE html> 
<html> 
	<head> 
	<title>Заголовок страницы</title> 	
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head> 
<body> 

<div data-role="page" id="main" data-theme="a">
	<div data-role="header">
		<h1>Заголовок страницы</h1>
	</div>
	<div data-role="content">	
		<p>Содержимое страницы</p>
		<a href="#second">Вторая страница</a>
	</div>
	<div data-role="footer">
		<h4>Подвал страницы</h4>
	</div>
</div>

<div data-role="page" id="second" data-add-back-btn="true" data-theme="b">
	<div data-role="header" id="header">
		<h1>Пример jQuery Mobile</h1>
	</div>
	<div data-role="content">	
		<p>Пример мультистраничности</p>		
	</div>
	<div data-role="footer">
		<h4>Copyright (c)</h4>
	</div>
</div>
</body>
</html>

Пример события

<script type="text/javascript">
$('#header').live('tap', function(event){
  alert('Вы дотронулись до заголовка второй страницы');
});
</script>

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

Платформа Версия Нативно Phone Gap Opera Mobile Opera Mini Fennec Ozone Net front
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 B Шаблон:Good
v3.1.3, v3.2 Шаблон:Good Шаблон:Good Шаблон:Good
v4.0 Шаблон:Good Шаблон:Good Шаблон:Good
Symbian S60 v3.1, v3.2 C C B C B C C
v5.0 Шаблон:Good Шаблон:Good C Шаблон:Good C Шаблон:Good
Symbian UIQ v3.0, v3.1 C
8.65 		C
v3.2 C C
Symbian Platform v.3.0 Шаблон:Good
BlackBerry OS v4.5 C C C
v4.6, v4.7 C C C B
v5.0 B Шаблон:Good C Шаблон:Good
v6.0 Шаблон:Good Шаблон:Good Шаблон:Good
Android v1.5, v1.6 Шаблон:Good Шаблон:Good
v2.1 Шаблон:Good Шаблон:Good
v2.2 Шаблон:Good Шаблон:Good Шаблон:Good C* Шаблон:Good
Windows Mobile v6.1 C C C C B C B C
v6.5.1 C C C Шаблон:Good Шаблон:Good C Шаблон:Good
v7.0 Шаблон:Good Шаблон:Good C Шаблон:Good
webOS 1.4.1 Шаблон:Good Шаблон:Good
bada 1.0 Шаблон:Good
Maemo 5.0 B B C B*
MeeGo 1.1* Шаблон:Good Шаблон:Good Шаблон:Good


Ключи:

  • A - Полная функциональность — браузер поддерживает все возможности jQuery Mobile
  • B - Средняя функциональность — браузер не поддерживает некоторых возможностей jQuery Mobile (таких, как анимация)
  • C - Базовая функциональность — браузер поддерживает основные возможности
  • * — Новый браузер, ещё не выпущен, но в стадии альфа/бета тестирования.

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

История версий

Дата релиза Версия
26 Октября 2010 1.0a1
12 Ноября 2010 1.0a2
4 Февраля 2011 1.0a3
31 Марта 2011 1.0a4
7 Апреля 2011 1.0a4.1
20 Июня 2011 1.0b1
3 Августа 2011 1.0b2
8 Сентября 2011 1.0b3
29 Сентября 2011 1.0 RC1
19 Октября 2011 1.0 RC2
2 Октября 2012 1.2
1 июля 2014 1.4.3 final
31 Октября 2014 1.4.5

См. также

Примечания

Ссылки

Источник — https://xn--h1ajim.xn--p1ai/index.php?title=JQuery_Mobile&oldid=3118332