jBooklet是一款简单的网页翻书jQuery特效插件。该翻书特效插件实现了左右翻页的基本功能，并提供了一个默认的样式。你可以通过CSS文件来修改默认样式，生成更加好看的翻页效果。

使用方法

该插件依赖于jQuery，jQuery UI为可选项，还依赖于jquery.easing插件，使用时要先引入必须的依赖文件。

<link href="booklet/jquery.booklet.latest.css" type="text/css" rel="stylesheet" media="screen, projection, tv" />
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="booklet/jquery-2.1.0.min.js"><\/script>') </script>
<!-- jQuery UI (optional) -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script> window.jQuery.ui || document.write('<script src="booklet/jquery-ui-1.10.4.custom.min.js"><\/script>') </script>
<!-- Booklet -->
<script src="booklet/jquery.easing.1.3.js"></script>
<script src="booklet/jquery.booklet.latest.min.js"></script>
HTML结构

该翻书特效的HTML结构使用的是嵌套div的结构。包裹div上要设置一个ID或class，在包裹div下的直接子元素会被插件识别为一个页面，在它里面可以放置页面的内容：

<div id="mybook">
    <div>
        <h3>Yay, Page 1!</h3>
    </div>
    <div>
        <h3>Yay, Page 2!</h3>
    </div>
    <div>
        <h3>Yay, Page 3!</h3>
    </div>
    <div>
        <h3>Yay, Page 4!</h3>
    </div>
</div>
初始化插件

在完成上面的步骤之后，就可以在页面加载完成之后调用该翻书特效插件。你可以使用相同的class或选择器来初始化多个booklet实例对象：

$(function() {
    //single book
    $('#mybook').booklet();
     
    //multiple books with ID's
    $('#mybook1, #mybook2').booklet();
     
    //multiple books with a class
    $('.mycustombooks').booklet();
});
定制CSS样式

当booklet被创建之后，会生成以下的基本HTML结构，每个div中都带有特定的class，通过修改这些class的内容，你可以自定义出自己的翻书效果样式。

<div class="booklet" id="mybook">
    <div class="b-page b-page-0 b-p1">
        <div class="b-wrap b-wrap-left">
            ...
        </div>
    </div>
    <div class="b-page b-page-1 b-p2">
        <div class="b-wrap b-wrap-right">
            ...
        </div>
    </div>
    <div class="b-page b-page-2 b-p3">
        <div class="b-wrap b-wrap-left">
            ...
        </div>
    </div>
    <div class="b-page b-page-3 b-p4">
        <div class="b-wrap b-wrap-right">
            ...
        </div>
    </div>
    <div class="b-controls">
        ...
    </div>
</div>

所有的class都可以在jquery.jbooklet.css文件中找到。

  • .booklet：booklet的包裹元素。这个class会被添加到你指定的booklet元素上。
  • .b-page：每一个页面的包裹元素。.b-page-0指定页面的序号，从0开始计数。其它的class(.b-pN, .b-p0, .b-p1, .b-p2, .b-p3, .b-p4)用于翻页动画。
  • .b-wrap：每一个页面的内部容器。.b-wrap-left或.b-wrap-right用于指定页面是在左边还是右边。
  • .b-page-cover：书的封面。当使用closed和covers选项时，该class会被添加到第一页和最后一页的.b-wrap上。

配置参数

General

  • name：类型：string，默认值：null。显示在浏览器标题上的booklet名称。
  • width：类型：Number, String。默认值：600。booklet的宽度，可以是一个数值，或一个CSS字符串("600px")，或一个百分比字符串（“50%”）。
  • height：类型：Number, String。默认值：400。booklet的高度，规则同上。
  • speed：类型：Number。默认值：1000。书本翻页的速度。单位毫秒。
  • direction：类型：String。默认值："LTR"。书本翻页的方向。可以设置为“RTL”。
  • startingPage：类型：Number。默认值：0。书本页面的序号，从0开始。
  • easing：类型：String。默认值："easeInOutQuad"。用于完成翻页效果的easing方法名称。easing参数可以参考Easing Plugin。
  • easeIn：类型：String。默认值："easeInQuad"。页面前半部过渡动画的easing方法。
  • easeOut：类型：String。默认值："easeOutQuad"。页面后半部过渡动画的easing方法。

Closed / Covers

  • closed：类型：Boolean。默认值：false。书本关闭是的外观。会添加带class .b-page-empty的空页到书本的第一页和最后一页。
  • closedFrontTitle：类型：String。默认值："Beginning"。Used with closed, menu and pageSelector options. Determines title of blank starting page。
  • closedFrontChapter：类型：String。默认值："Beginning of Book"。Used with closed, menu and chapterSelector options. Determines chapter name of blank starting page.
  • closedBackTitle：类型：String。默认值："End"。用于closed、menu和pageSelector参数。确定空白结束页标题。
  • closedBackChapter：类型：String。默认值："End of Book"。用于closed、menu和pageSelector参数。确定章节的名称。
  • covers：类型：Boolean。默认值：false。用于closed参数。将第一页和最后一页作为封面，并为页面内容添加class .b-page-cover。
  • autoCenter：类型：Boolean。默认值：false。用于closed参数。当booklet关闭时使它居中定位。

该翻书效果的更多参数和方法及事件请参看：http://builtbywill.com/code/booklet/documentation