English Русский
Живая версия

Скрипты jPagedScroll и jLoader

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

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

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

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

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 (все необязательные):

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

По умолчанию: 350

thresholdX, thresoldY Сдвиг в пикселях по оси X или Y, который должен быть пройден по этой оси для активации горизонтального или вертикального листания. Активируется листание в том направлении, в котором палец быстрее пройдет указанное значение.

По умолчанию: 10, 10

scrollTime Время анимации листания в формате CSS-времени. Строка.

По умолчанию: '0.3s'

easeEffect Easing-функция анимации листания. Строка.

По умолчанию: 'ease-out'

jumps Определяет поведение при листании за пределы окна. При попытке пролистать за пределы окна в интерфейсах iOS предусмотрено замедление листания, как будто страницу тянет назад. 0 — отключает этот эффект; 1 — включает эффект только для внешнего слайдера; 2 — включает эффект для внешнего слайдера и для внутренних слайдеров.

По умолчанию: 1

callback Callback-функция, которая будет вызвана по завершению каждого листания. Используется jLoader для интеграции.

По умолчанию: function(currentChapter, currentPage) { }

book Этот параметр используется для интеграции с jLoader. С помощью него можно передать объект журнала, содержащий информацию о страницах, если структура журнала загружается динамически.

По умолчанию: формируется программно

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

matrix Объект JSON, описывающий так называемую матрицу номера журнала — матрицу, содержащую ссылки на все страницы журнала, управляющие ссылки и т. п.

Обязательный

settings Объект, включающий настройки jPagedScroll, которые будут переданы ему через jLoader, и настройки jLoader:

сhapterClass — класс главы, присваемый div-обертке загруженной главы журнала (по умолчанию chapter);
pageClass — класс страницы (по умолчанию page);
innerScrollerSelector — селектор внутреннего скролла (по умолчанию .scroll-area-small);
cacheWindow — размер окна кеширования (по умолчанию 1).

Поддержка и доработка

По вашему заказу скрипт может быть доработан и оптимизирован для самых разных задач. Приобретение скрипта также дает поддержку в виде консультаций и исправления ошибок.

Декабрь 2012
Заказчик: Компания «Терем-Медиа»
Разработка: Александр Борисов
Верстка: Евгений Пратусевич
Отладка, выпуск: Андрей Маркелов
Портфолио