标签：
添加booklet CSS文件到你的页面。
<link rel="stylesheet" href="plugin/booklet/jquery.booklet.latest.css" media="screen,projection,tv">
然后依次添加jQuery库，jQuery UI（可选）jQuery Easing插件和Booklet JS文件到你的页面。
<!-- jQuery -->
<script type="text/javascript" src="plugin/booklet/jquery-2.1.0.min.js"></script> <!-- jQuery UI (optional) --> <script type="text/javascript" src="plugin/booklet/jquery-ui-1.10.4.min.js"></script> <!-- Booklet --> <script type="text/javascript" src="plugin/booklet/jquery.easing.1.3.js"></script> <script type="text/javascript" src="plugin/booklet/jquery.booklet.latest.min.js"></script>
首先在内容区域创建一个区域块
1、在外面创建一个容器<div>并定义一个ID或者Class。
2、在容器里面,添加页面。这里添加的每一个页面将被识别作为每一个幻灯片， 里面可以包含内容或者单个项目。
下面显示一个简单的示例：
<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> <h3>Yay, Page 5!</h3> </div> <div> <h3>Yay, Page 6!</h3> </div> </div>
使用jQuery选择初始化booklet。你可以设置多本书相同的类或相同的选择器，只要他们的选项是相同的。
了解更多自定义设置，可以访问文档（http://builtbywill.com/code/booklet/documentation）页
<script type="text/javascript"> $(function(){ //single book $(‘#mybook‘).booklet(); //multiple books with ID‘s $(‘#mybook1, #mybook2‘).booklet(); //multiple books with a class $(‘.mycustombooks‘).booklet(); }); </script>
运行效果图
标签：
原文地址：http://www.cnblogs.com/cestcnsoft/p/4335251.html
