PROFILBARU.COM

JQuery Mobile
JQuery Mobile
Тип	Мобильный фреймворк
Написана на	JavaScript
Последняя версия	1.4.5 (31 октября 2014);
Репозиторий	github.com/jquery/jquery…
Состояние	Активный
Лицензия	лицензия MIT и GNU GPL
Сайт	jquerymobile.com; 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

A

v3.1.3, v3.2

A

v4.0

A

Symbian S60

v3.1, v3.2

C

B

C

B

C

v5.0

A

C

A

C

A

Symbian UIQ

v3.0, v3.1

C
8.65

C

v3.2

C

Symbian Platform

v.3.0

A

BlackBerry OS

v4.5

C

v4.6, v4.7

C

B

v5.0

B

A

C

A

v6.0

A

Android

v1.5, v1.6

A

v2.1

A

v2.2

A

A*

C*

A*

Windows Mobile

v6.1

C

B

C

B

C

v6.5.1

C

A

C

A

v7.0

A

C

A

webOS

1.4.1

A

bada

1.0

A

Maemo

5.0

B

C

B*

MeeGo

1.1*

A*

Ключи:

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

См. также

Примечания

↑ The jquerymobile Open Source Project on Open Hub: Languages Page — 2006.
↑ Release 1.4.5 — 2014.

Ссылки

jquerymobile.com — официальный сайт JQuery Mobile
jQuery Mobile документация и примеры
Создаем мобильный веб-сайт на jQuery Mobile (перевод)

[_3732442e8d8cfd9e-1] The jquerymobile Open Source Project on Open Hub: Languages Page — 2006.

[_903ec9113a025c92-2] Release 1.4.5 — 2014.

[1]

[2]

JQuery Mobile