Как стать автором
Обновить

Введение в jQuery Mobile

Время на прочтение 6 мин
Количество просмотров 24K

Введение в jQuery Mobile


Мобильная стратегия jQuery может быть легко объяснена — это внедрение пользовательского JavaScript в наиболее часто используемые браузеры на мобильных платформах.
Основной ценностью нашего подхода является широкий спектр платформ, поддерживаемых jQuery Mobile. Мы прилагаем все усилия, что бы jQuery поддерживал все мобильные браузеры, по крайней мере занимающие номинальную долю рынка.
Что бы обеспечить широкую поддержку, все страницы в jQuery Mobile построены на чистом HTML, это обеспечивает совместимость с довольно многими web-ориентированными устройствами. В устройствах, которые интерпретируют CSS и JavaScript, jQuery Mobile применяет прогрессивные методы, что бы ненавязчиво преобразовать семантические страницы используя богатый интерактивный опыт и мощь Query и CSS. Стандарты доступности активных интернет-приложений, таких как WAI-ARIA тесно интегрированы во всей структуре для оказания поддержки для чтения с экрана.


Ключевые особенности


  • Построенный на JQuery знакомый синтаксис
  • Совместимость со всеми основными мобильными платформами — iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo и с базовой поддержкой всех устройств которые понимают HTML
  • Небольшой размер файла (12кб включающий функциональность для всех мобильных) и минимальная зависимость от изображений для увеличения скорости
  • HTML5 разметка управляемая конфигурацией страниц и минимальные требования для быстрого развития сценариев
  • Прогрессивный подход, усиление основного содержания и функциональность всех мобильных, электронных книжек, Desktop Platform, будет легко использоваться на новых мобильных платформах.
  • Автоматическая инициализация с помощью HTML5 date-role атрибутов в разметке HTML, автоматически инициализирует все JQuery Mobile виджеты найденные на странице.
  • Стандарты доступности активных интернет-приложений, таких как WAI-ARIA включены что бы обеспечить удобное чтение с экрана (например VoiceOver в IOS) и других вспомогательных технологий.
  • Простое API, рационализирующее процесс поддержки Touch, мыши, и других видов устройств ввода.
  • Новые модули расширяющие возможности сенсорного управления.
  • Мощные темы визуализации приложения делают весьма простым построение интерфейсов.

Поддерживаемые платформы


Есть еще изрядное количество ошибок, но они будут исправлены до версии 1.0 в январе. На стадии alfa релиза jQuery Mobile был протестирован на следующих устройствах:
  • Apple iOS: iPhone, iPod Touch, iPad (все версии)
  • Android: все устройства (все версии)
  • Blackberry Torch (version 6)
  • Palm WebOS Pre, Pixi
  • Nokia N900 (в разработке)

Страницы


В jQuery Mobile входит автоматическая загрузка страниц с помощью AJAX, с включенной кнопкой возврата, настройки анимации и простые инструменты для отображения диалогов. Цель этой модели, позволить разработчикам создавать веб-сайты с использованием передовой практики — где обычные ссылки будут работать без какой-либо специальной настройки, при этом создавая нативные приложения, чего нельзя было бы достигнуть используя стандартный HTML.

Мобильная структура страницы.

jQuery Mobile сайт должен начинаться с 'DOCTYPE' HTML5, что бы в полной мере использовать особенности фрэймворка. (Старые устройства и браузеры, которые не понимают HTML5, будут благополучно игнорировать doctype и различные особые атрибуты). В заголовке head, указываются ссылки к jQuery, jQuery Mobile, теме Mobile CSS и другие необходимые компоненты.
<!DOCTYPE html> 
<html> 
	<head> 
	        <title>Page Title</title> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
		<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
	</head> 
	<body> 

	...

	</body>
</html>

Внутри тэга body, каждое представление или страница на мобильном устройстве определяется элементом (обычно это div) с атрибутом data-role=«page».
		
	<code>
        <div data-role="page"> 
	...
	</div>
        </code>

В пределах контейнера «page» может быть использован любой валидный HTML код, где непосредственными потомками «page» должны быть блоки div с атрибутами «header», «content», и «footer».
		

        <div data-role="page"> 
		<div data-role="header">...</div> 
		<div data-role="content">...</div> 
		<div data-role="footer">...</div> 
	</div>


Законченный шаблон простой страницы

Собираем все вместе, стандартная страница должна начинаться с шаблона:
		

<!DOCTYPE html> 
<html> 
	<head> 
	<title>Page Title</title> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
	<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head> 
<body> 

        <div data-role="page">

	        <div data-role="header">
			<h1>Page Title</h1>
		</div><!-- /header -->

		<div data-role="content">	
			<p>Page content goes here.</p>		
		</div><!-- /content -->

		<div data-role="footer">
			<h4>Page Footer</h4>
		</div><!-- /header -->
	</div><!-- /page -->

	</body>
</html>


Внешние страницы, содержащие ссылку

JQuery Mobile автоматизирует процесс создания Ajax сайтов и приложений. По умолчанию, при нажатии на ссылку, указывающую на внешнюю страницу (например, products.html), структура разбирает HREF ссылки, формулирует запрос Ajax и отображает загрузку. Если запрос Ajax успешно выполнен, новое содержание страницы будет добавлено в DOM, все мобильные виджеты автоматически инициализируются, и новая страница будет выведена на экран. Если запрос Ajax не удался, отдельным слоем, будет выведено сообщение об ошибке, которое исчезнет после через небольшой промежуток времени, так, что это не нарушит навигационный поток.

Ссылки внутри страницы

Единый документ HTML может содержать несколько страниц, которые загружаются путем укладки нескольких div элементов с атрибутами data-role=«pages». Каждая страница должна иметь уникальный идентификатор, который будет использоваться для связи между внутренними блоками с помощью HREF="#Foo". При нажатии на ссылку, будет происходить поиск внутренней страницы (page) с нужным ID и вывод этого блока на экран. Важно отметить, что если вы связываете страницу, которая была загружена через Ajax со страницей с несколькими внутренними страницами, необходимо добавить REL = «external» к ссылке. Это говорит фрэймворку полностью перегрузить страницу и очистить хэш в URL. Это важно потому, что Ajax страницы используют решетки (#) для отслеживания истории, а внутристраничные ссылки используют хэш внутри своих страниц, это может вызвать конфликты. Например, ссылка на страницу, содержащую несколько внутренних страниц будет выглядеть следующим образом:
		
	<a href="multipage.html" rel="external">Multi-page link</a>

Вот пример двух страниц сайта построенных с помощью div, навигация которых завязана на id этих элементов. Заметим, что идентификаторы на странице нужны только для поддержки внутренней связи страниц, и не являются обязательными, если каждая страница отдельный документ HTML. Вот две страницы внутри body элемента:
		

<body> 

	<!-- Start of first page -->
	<div data-role="page" id="foo">

		<div data-role="header">
			<h1>Foo</h1>
		</div><!-- /header -->

		<div data-role="content">	
			<p>I'm first in the source order so I'm shown as the page.</p>		
			<p>View internal page called <a href="#bar">bar</a></p>	
		</div><!-- /content -->

		<div data-role="footer">
			<h4>Page Footer</h4>
		</div><!-- /header -->
	</div><!-- /page -->

	<!-- Start of second page -->
	<div data-role="page" id="bar">

		<div data-role="header">
			<h1>Bar</h1>
		</div><!-- /header -->

		<div data-role="content">	
			<p>I'm first in the source order so I'm shown as the page.</p>		
			<p><a href="#foo">Back to foo</a></p>	
		</div><!-- /content -->

		<div data-role="footer">
			<h4>Page Footer</h4>
		</div><!-- /header -->
	</div><!-- /page -->
</body>

ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ: Так как мы используем хэш-навигацию для отслеживания истории для всех страниц, в настоящее время невозможно осуществленияе ссылок типа якорь (index.html # Foo). Источник http://jquerymobile.com/demos/1.0a2/
Теги:
Хабы:
+6
Комментарии 21
Комментарии Комментарии 21

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн