jQuery Mobile

Поделись знанием:
Перейти к: навигация, поиск

jQuery Mobile
Тип

Мобильный фреймворк

Разработчик

[jquery.org/ The jQuery Project]

Написана на

JavaScript

Последняя версия

1.4.5 (31 октября, 2014 г.)

Состояние

Активный

Лицензия

Двойная лицензия:
GPL и MIT

Сайт

[jquerymobile.com/ obile.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="code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="code.jquery.com/jquery.min.js"></script>
	<script type="text/javascript" src="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)

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

Дата релиза Версия
[jquerymobile.com/blog/2010/10/16/jquery-mobile-alpha-1-released/ 26 Октября 2010] 1.0a1
[jquerymobile.com/blog/2010/11/12/jquery-mobile-alpha-2-released/ 12 Ноября 2010] 1.0a2
[jquerymobile.com/blog/2011/02/04/jquery-mobile-alpha-3-released/ 4 Февраля 2011] 1.0a3
[jquerymobile.com/blog/2011/03/31/jquery-mobile-alpha-4-released/ 31 Марта 2011] 1.0a4
[jquerymobile.com/blog/2011/04/07/jquery-alpha-4-1-maintenance-release/ 7 Апреля 2011] 1.0a4.1
[jquerymobile.com/blog/2011/06/20/jquery-mobile-beta-1-released/ 20 Июня 2011] 1.0b1
[jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/ 3 Августа 2011] 1.0b2
[jquerymobile.com/blog/2011/09/08/jquery-mobile-beta-3-released/ 8 Сентября 2011] 1.0b3
[jquerymobile.com/blog/2011/09/29/jquery-mobile-1-0rc1-released/ 29 Сентября 2011] 1.0 RC1
[jquerymobile.com/blog/2011/10/19/jquery-mobile-1-0rc2-released/ 19 Октября 2011] 1.0 RC2
[jquerymobile.com/blog/2012/10/02/announcing-jquery-mobile-1-2-0-final/ 2 Октября 2012] 1.2
[blog.jquerymobile.com/2014/07/01/jquery-mobile-1-4-3-released/ 1 июля 2014] 1.4.3 final
[blog.jquerymobile.com/2014/10/31/jquery-mobile-1-4-5-released/ 31 Октября 2014] 1.4.5

См. также

Напишите отзыв о статье "JQuery Mobile"

Ссылки

  • [jquery.org/ jQuery]
  • [jquerymobile.com/ obile.com] — официальный сайт JQuery Mobile
  • [jquerymobile.com/test/ jQuery Mobile документация и примеры]
  • [www.cmsmagazine.ru/library/items/moblile/create-mobile-website-jquery-mobile/ Создаем мобильный веб-сайт на jQuery Mobile (перевод)]

Отрывок, характеризующий JQuery Mobile

Княжна Марья слушала и не понимала того, что он говорил. Он, чуткий, нежный князь Андрей, как мог он говорить это при той, которую он любил и которая его любила! Ежели бы он думал жить, то не таким холодно оскорбительным тоном он сказал бы это. Ежели бы он не знал, что умрет, то как же ему не жалко было ее, как он мог при ней говорить это! Одно объяснение только могло быть этому, это то, что ему было все равно, и все равно оттого, что что то другое, важнейшее, было открыто ему.
Разговор был холодный, несвязный и прерывался беспрестанно.
– Мари проехала через Рязань, – сказала Наташа. Князь Андрей не заметил, что она называла его сестру Мари. А Наташа, при нем назвав ее так, в первый раз сама это заметила.
– Ну что же? – сказал он.
– Ей рассказывали, что Москва вся сгорела, совершенно, что будто бы…
Наташа остановилась: нельзя было говорить. Он, очевидно, делал усилия, чтобы слушать, и все таки не мог.
– Да, сгорела, говорят, – сказал он. – Это очень жалко, – и он стал смотреть вперед, пальцами рассеянно расправляя усы.
– А ты встретилась с графом Николаем, Мари? – сказал вдруг князь Андрей, видимо желая сделать им приятное. – Он писал сюда, что ты ему очень полюбилась, – продолжал он просто, спокойно, видимо не в силах понимать всего того сложного значения, которое имели его слова для живых людей. – Ежели бы ты его полюбила тоже, то было бы очень хорошо… чтобы вы женились, – прибавил он несколько скорее, как бы обрадованный словами, которые он долго искал и нашел наконец. Княжна Марья слышала его слова, но они не имели для нее никакого другого значения, кроме того, что они доказывали то, как страшно далек он был теперь от всего живого.
– Что обо мне говорить! – сказала она спокойно и взглянула на Наташу. Наташа, чувствуя на себе ее взгляд, не смотрела на нее. Опять все молчали.
– Andre, ты хоч… – вдруг сказала княжна Марья содрогнувшимся голосом, – ты хочешь видеть Николушку? Он все время вспоминал о тебе.
Князь Андрей чуть заметно улыбнулся в первый раз, но княжна Марья, так знавшая его лицо, с ужасом поняла, что это была улыбка не радости, не нежности к сыну, но тихой, кроткой насмешки над тем, что княжна Марья употребляла, по ее мнению, последнее средство для приведения его в чувства.
– Да, я очень рад Николушке. Он здоров?

Когда привели к князю Андрею Николушку, испуганно смотревшего на отца, но не плакавшего, потому что никто не плакал, князь Андрей поцеловал его и, очевидно, не знал, что говорить с ним.
Когда Николушку уводили, княжна Марья подошла еще раз к брату, поцеловала его и, не в силах удерживаться более, заплакала.
Он пристально посмотрел на нее.
– Ты об Николушке? – сказал он.
Княжна Марья, плача, утвердительно нагнула голову.
– Мари, ты знаешь Еван… – но он вдруг замолчал.
– Что ты говоришь?
– Ничего. Не надо плакать здесь, – сказал он, тем же холодным взглядом глядя на нее.

Когда княжна Марья заплакала, он понял, что она плакала о том, что Николушка останется без отца. С большим усилием над собой он постарался вернуться назад в жизнь и перенесся на их точку зрения.
«Да, им это должно казаться жалко! – подумал он. – А как это просто!»
«Птицы небесные ни сеют, ни жнут, но отец ваш питает их», – сказал он сам себе и хотел то же сказать княжне. «Но нет, они поймут это по своему, они не поймут! Этого они не могут понимать, что все эти чувства, которыми они дорожат, все наши, все эти мысли, которые кажутся нам так важны, что они – не нужны. Мы не можем понимать друг друга». – И он замолчал.

Маленькому сыну князя Андрея было семь лет. Он едва умел читать, он ничего не знал. Он многое пережил после этого дня, приобретая знания, наблюдательность, опытность; но ежели бы он владел тогда всеми этими после приобретенными способностями, он не мог бы лучше, глубже понять все значение той сцены, которую он видел между отцом, княжной Марьей и Наташей, чем он ее понял теперь. Он все понял и, не плача, вышел из комнаты, молча подошел к Наташе, вышедшей за ним, застенчиво взглянул на нее задумчивыми прекрасными глазами; приподнятая румяная верхняя губа его дрогнула, он прислонился к ней головой и заплакал.
С этого дня он избегал Десаля, избегал ласкавшую его графиню и либо сидел один, либо робко подходил к княжне Марье и к Наташе, которую он, казалось, полюбил еще больше своей тетки, и тихо и застенчиво ласкался к ним.
Княжна Марья, выйдя от князя Андрея, поняла вполне все то, что сказало ей лицо Наташи. Она не говорила больше с Наташей о надежде на спасение его жизни. Она чередовалась с нею у его дивана и не плакала больше, но беспрестанно молилась, обращаясь душою к тому вечному, непостижимому, которого присутствие так ощутительно было теперь над умиравшим человеком.


Князь Андрей не только знал, что он умрет, но он чувствовал, что он умирает, что он уже умер наполовину. Он испытывал сознание отчужденности от всего земного и радостной и странной легкости бытия. Он, не торопясь и не тревожась, ожидал того, что предстояло ему. То грозное, вечное, неведомое и далекое, присутствие которого он не переставал ощущать в продолжение всей своей жизни, теперь для него было близкое и – по той странной легкости бытия, которую он испытывал, – почти понятное и ощущаемое.
Прежде он боялся конца. Он два раза испытал это страшное мучительное чувство страха смерти, конца, и теперь уже не понимал его.
Первый раз он испытал это чувство тогда, когда граната волчком вертелась перед ним и он смотрел на жнивье, на кусты, на небо и знал, что перед ним была смерть. Когда он очнулся после раны и в душе его, мгновенно, как бы освобожденный от удерживавшего его гнета жизни, распустился этот цветок любви, вечной, свободной, не зависящей от этой жизни, он уже не боялся смерти и не думал о ней.