turn.js学习手册_turn.js 摧毁实例

因为最近用到turn来做一个比赛，所以学习了一下，但是现在没有中文的API文档，所以就自己整理了一下

1.flipbook的部署
1）引入jquery以及turn的js库
2）写入Html

		    <div id="flipbook">
				<div class="hard"> Turn.js </div>
				<div class="hard"></div>
				<div> Page 1 sddsasdssddsd</div>
				<div> Page 2 </div>
				<div> Page 3 </div>
				<div class="hard"></div>
				<div class="hard"></div>
    		</div>

    其中class=hard是为了模仿书本的封皮
    中间的div块则是书本的正文
    3）写入js，最简单的示例如下

    	$("#flipbook").turn({
    		width: 400,
   			height: 300,
   			autoCenter: false
		});

采用的jQuery语法，简单的定义了此块的高宽以及是否居中
2.选项
1) width 、height（int）        定义宽高
2) autoCenter  （bool）          默认false，是否居中
3) page (int)                          设置初始化页面
4) acceleration(bool)           硬件加速，对于触摸设备，一定要设置true
5) direction("ltr"  "rtl") 书本翻动方向，默认从右向左(ltr) html css均可设置，详情见(http://www.turnjs.com/docs/Option:_direction)
6) display("double"  "single")  展示一页或者两页，默认double
7) duration(毫秒)             设置翻页动画持续时间即翻页的快慢，默认600
8) gradients(bool)             设置翻页时是否显示翻页跟阴影
9) elevation                  Sets the elevation of the page during the transition.
10) pages                     设置任意数量的页面
11) when
12) turnCorners
3.属性
1）animating    当页面翻动时，返回true

function isAnimating() {
  			if ($("#flipbook").turn("animating")) {
    			alert('Animating a page!');
  			}
		}

2）direction     返回页面的前进方向，左翻或者右翻，用法同上
3) display       返回当前的阅读模式，为单面或者双面显示
4) disabled     返回是否禁用，禁用返回true
5) page           返回当前页数
6) pages         返回总页数
7）size           返回大小，有两个键值   .width .height
8) options       返回初始化时的属性值，多个键值
9）view           返回视图
10）zoom           返回缩放因子
4.方法
   1）addPage       增加新的页

element = $("<div />").html("Loading...");
		$("#flipbook").turn("addPage", element, 10);

    2) center          居中设置
    3）destroy         销毁
   

$("#flipbook").turn("destroy")

    4) direction      设置图书翻页方向
   

$("#flipbook").turn("direction", "rtl");

    5）display        设置图书阅览方式，两页或者一页，同上
    6) disable         设置页面禁用
    7) hasPage        判断该页是否存在，返回bool
    8) next              翻页
   

$("#flipbook").turn("next");

    9) is         判断是否有turn实例

    	if (!$("#flipbook").turn("is")) {
			// Create a new flipbook 
			$("#flipbook").turn();
		}

10) page          跳转到指定页面
11) pages          设置页数，大于这个数量的将被删除
12) peel            显示一个翻页角

$("#flipbook").turn("peel", "br"); // 在右下角显示角

13) previous      返回上一个视图

$("#flipbook").turn("previous");

14) range         用于增加界面，详情(http://www.turnjs.com/docs/Method:_range)
15) removePage     删除一个页面，两个参数
16) resize           重新计算页面的大小跟位置
17) size           三个参数，设置大小
18) stop           没有动画的将页面跳转

$("#flipbook").turn("page", 10).turn('stop');

19) version        获取当前版本
20) zoom           缩放....
5.事件