Русская Википедия: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>
Поддержка мобильных браузеров
| Этот раздел требует оформления и доводки. В этом разделе необходимо убрать непонятные картинки-смайлики (заменить на понятные или покрасить цветом)
|
Ключи:
- 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 |
См. также
Примечания
Ссылки
- Шаблон:Official website
- jQuery Mobile документация и примеры
- Создаем мобильный веб-сайт на jQuery Mobile (перевод)
- Страницы, использующие устаревший тег source
- Русская Википедия
- Страницы с неработающими файловыми ссылками
- AJAX
- Библиотеки JavaScript
- Фреймворки
- Программное обеспечение с лицензией GNU GPL
- Программное обеспечение с лицензией MIT
- Свободное программное обеспечение, написанное на JavaScript
- Страницы, где используется шаблон "Навигационная таблица/Телепорт"
- Страницы с телепортом
- Википедия
- Статья из Википедии
- Статья из Русской Википедии
