T.M. SoftStudio

feci quod potui, faciant meliora potentes

JQuery плагин Book Reader

JQuery плагин Book Reader обеспечивает отображение большого HTML-документа в виде электронной книги с автоматической разбивкой документа на страницы.

Реализовано два способа автоматической постраничной разбивки – на основе определенного количества знаков на странице и на основе определенной высоты страницы.

Оба способа имеют свои преимущества и недостатки.

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

Постраничная разбивка на основе определенной высоты страницы более точная, но более медленная.

JQuery плагин Book Reader создан на основе плагина BookBlock (http://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/) с добавлением автоматической постраничной разбивки.

Для установки плагина в заголовок страницы нужно включить:

<link rel="stylesheet" type="text/css" href="css/bookblock.css" />

<script src="js/jquery.min.js"></script>

<!-- Постраничная разбивка на основе определенного количества знаков на странице: -->

<script src="js/pagination.js"></script>

<!-- Постраничная разбивка на основе определенной высоты страницы: -->

<script src="js/pagination_plus.js"></script>

<script src="js/jquery.bookblock.min.js"></script>

HTML-документ нужно обернуть тэгами:

<div class="container">

<div class="main">

<div class="bb-custom-wrapper">

<H1></H1>

<div id="bb-bookblock" class="bb-bookblock">

<!-- Content -->

</div>

<nav>

<a id="bb-nav-first" href="#" class="bb-custom-icon bb-custom-icon-first">First page</a>

<a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a>

<a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a>

<a id="bb-nav-last" href="#" class="bb-custom-icon bb-custom-icon-last">Last page</a>

</nav>

</div>

</div>

</div>