JQuery Mobile

JQuery Mobile
Логотип программы JQuery Mobile
Тип веб-фреймворк и библиотека JavaScript
Написана на JavaScript[1]
Последняя версия
Репозиторий github.com/jquery-archiv…
Лицензия лицензия 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

A

A

v4.0
A

A

A

Symbian S60 v3.1, v3.2 C C B C B C C
v5.0
A

A

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*


Ключи:

  • 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

См. также

Примечания

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

Ссылки

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.