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 v3.1.3, v3.2 v4.0 Symbian S60 v3.1, v3.2 v5.0 Symbian UIQ v3.0, v3.1 v3.2 Symbian Platform v.3.0 BlackBerry OS v4.5 v4.6, v4.7 v5.0 v6.0 Android v1.5, v1.6 v2.1 v2.2 Windows Mobile v6.1 v6.5.1 v7.0 webOS 1.4.1 bada 1.0 Maemo 5.0 MeeGo 1.1*
Ключи: — браузер поддерживает все возможности jQuery Mobile — браузер не поддерживает некоторых возможностей jQuery Mobile (таких, как анимация) — браузер поддерживает основные возможности * — Новый браузер, ещё не выпущен, но в стадии альфа/бета тестирования.
(Источник: сайт 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
См. также jQuery jQTouch PhoneGap
Примечания
Ссылки
jQuery Mobile документация и примеры Создаем мобильный веб-сайт на jQuery Mobile (перевод)
Категория:AJAX Категория:Библиотеки JavaScript Категория:Фреймворки Категория:Программное обеспечение с лицензией GNU GPL Категория:Программное обеспечение с лицензией MIT Категория:Свободное программное обеспечение, написанное на JavaScript