Менеджер электронных журналов для планшетов jPagedScroll

↑

←

→

↓

Скрипты jPagedScroll и jLoader

Набор скриптов для разработки собственного приложения — менеджера журналов для iPad, основанного на компоненте WebView. Скрипты загружаются в веб-компонент и перекладывают листание и подгрузку страниц с Native-приложения на HTML и JavaScript. Подойдут и для иных целей.

В поставке два скрипта: скроллер и лоадер. jPagedScroll отрабатывает листание журнала в 4 направлениях, jLoader обеспечивает подгрузку и выгрузку страниц на лету, что крайне необходимо для экономии памяти на iPad.

Возможности jPagedScroll:

• Плавная анимация за счет использования аппаратного ускорения;
• Листание в 4 направлениях: влево, вправо, вверх и вниз;
• Поддержка вложенных областей листания;
• Поддержка коротких и длинных взмахов;
• Поддержка любого веб-содержимого на страницах;
• Не блокируются стандартные действия: переход по ссылкам, выделение текста и т. п.
• Прозрачная работа и событийная связь с jLoader.

Возможности jLoader:

• Динамическая AJAX-подгрузка и выгрузка содержимого при листании;
• Поддержка локальных и внешних источников загрузки;
• Дополнительная выгрузка элементов img;
• Задание размера окна кеширования;
• Возможность задания матрицы номера журнала в JSON;
• Уведомления Native-части переходом по URI с заданным протоколом;
• Событийная связь с jPagedScroll.

jPagedScroll и jLoader используют jQuery 1.4 и выше. Листалка работает на iPad и Android, а также во всех современных настольных браузерах: Chrome 10, Safari 5, Firefox 4, Opera 11 (медленно), Internet Explorer 9.

Отличия версий

Вы можете скачать демо-версию и немного потестировать её. В качестве демо-версии мы предлагаем первую версию скриптов, которая работает только в Хроме, Сафари и на Айпаде. Кроме того, код демки обфусцирован.

Для покупки полной версии просто нажмите кнопку «Купить». В комплекте вы получите последнюю версию листалки, тестовый номер журнала, документацию, подписку на обновления и помощь.

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

Подключение комплекта

HTML-код минимален и указывает лишь на область листания журнала:

	<div id="scroll-area"></div>
            

Подключение jQuery и скриптов журнала — типичное:

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jpagedscroll.js"></script>
	<script type="text/javascript" src="js/load.js"></script>
            

Подключение CSS-стилей журнала зависит от верстки номера:

	<link href="css/magazine.css" media="screen" rel="stylesheet" type="text/css" />
	<link href="css/cover.css" media="screen" rel="stylesheet" type="text/css" />
            

Мета-теги, устанавливающие масштаб 1:1 на iPad:

	<meta name="app-mobile-web-app-capable" content="yes" />
	<meta name="apple-touch-fullscreen" content="YES" />
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
            

Загрузка матрицы журнала и запуск:

	$.get('js/matrix.js', '', function(data) {
		eval(data); // json
		$('#scroll-area').jLoader(matrix);
	});
            

Подключение jPagedScroll отдельно

Чтобы подключить jPagedScroll отдельно от jLoader, необходимо представить всю структуру журнала в HTML, а не разбивать по страницам, передавая матрицей.

jPagedScroll не привязан к конкретным классам и ориентируется на дочерние элементы области листания. Дочерние элементы первого уровня будут распознаны как главы, а второго уровня — как страницы внутри глав. Для удобства, однако, следует помечать главы и страницы типичными классами:

	<div id="scroll-area">
		<div class="chapter">
			<div class="page">
			Chapter 1 Page 1
			</div>
			<div class="page">
			Chapter 1 Page 2
			</div>
		</div>
		<div class="chapter">
			<div class="page">
			Chapter 2 Page 1
			</div>
		</div>
	</div>
            

Подключение файлов скрипта выглядит аналогично, но отсутствует включение файла load.js. Вызов jPagedScroll с поддержкой внутренних скроллеров производится следующим образом:

	$(document).ready(function() {
		$('#scroll-area').jPagedScroll();
		$('.scroll-area-small').jPagedScroll();
	});
    		

Параметры

Параметры вызова jPagedScroll (все необязательные):

Параметры вызова jLoader: