jQuery Mobile
 |
Эту статью следует викифицировать.
Пожалуйста, оформите её согласно правилам оформления статей.
|
 |
|
| Тип |
Мобильный фреймворк |
|---|---|
| Разработчик | |
| Написана на | |
| Последняя версия | |
| Состояние |
Активный |
| Лицензия | |
| Сайт | |
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>
Поддержка мобильных браузеров [править]
| Платформа | Версия | Нативно | PhoneGap | Opera Mobile | Opera Mini | Fennec | Ozone | Netfront | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 0.9 | 8.5 | 8.65 | 9.5 | 10.0 | 4.0 | 5.0 | 1.0 | 1.1* | 0.9 | 4.0 | |||
| iOS | v2.2.1 | A | B | ||||||||||
| v3.1.3, v3.2 | A | A | A | ||||||||||
| v4.0 | A | A | A | ||||||||||
| Symbian S60 | v3.1, v3.2 | C | C | C | B | C | B | C | C | ||||
| v5.0 | A | A | C | C | A | C | A | ||||||
| UIQ | v3.0, v3.1 | C | C | ||||||||||
| v3.2 | C | C | |||||||||||
| Symbian | v.3.0 | A | |||||||||||
| BlackBerry | 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 | A | 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 final |
