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>
Скачать плагин можно здесь.
