基於jquery的插件turn.js學習筆記

簡介

turn.js是一個可以實現3d書籍展示效果的jq插件，使用html5和css3來執行效果。可以很好的適應於ios和安卓等觸摸設備。

---

How it works？

下面是官網展示的最簡單的一個應用實例

1.編寫html部分

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

2.編寫js部分

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

API參考

構造函數

這個構造函數定義了filpbook和zoom在哪里創建，因此這個構造函數只能被調用一次並且不能被省略。flipbook和zoom都有單獨的構造函數

• turn的構造函數

語法

$("#flipbook").turn([options]);

事例

$("#flipbook").turn({page: 1, acceleration: true, gradients: true});

• zoom的構造函數

語法

$("#zoom-viewport").zoom(options);

---

OPTIONS

Turn Options

• acceleration:boolean 默認值true

使用觸摸時設備時值必須為true

• autoCenter:boolean 默認值false

是否居中

• direction:string默認值ltr

指定翻頁的方向，ltr：從左到右；rtl：從右到左

示例

在options中配置屬性

$("#flipbook").turn({direction:"rtl"});

在標簽中直接設置屬性

<div id="flipbook" dir="rtl">
  <!--Pages-->
</div>

在css中設置屬性

#flipbook {
  direction:rtl;
}

• display:string 默認值double

設置書籍的顯示樣式，double顯示雙面，single顯示單面

• duration:number 默認值：600

設置翻頁動畫的快慢，設置為0時，不會有翻頁動畫

• gradient:boolean 默認值：true

設置動畫過渡效果時的陰影效果

• height:number 默認值：$("flipbook").height()

設置flipbook的高度

• elevation:number 默認值：0

設置動畫時的高度（elevation）

• page:number 默認值：1

設置初始化flipbook時的頁面數

• pages:number 默認值：$("#flipbook").children().length

為書籍添加任意的頁數，默認值為當前書籍的頁數。如果設置的頁數大於當前fliplook中已存在的頁面數，會使用addPage方法動態的添加這些頁面

• turnCorners:string 默認值:bl,br

設置翻頁時可使用的頁角，像使用page，next，previous等方法時
樣式：{left-corner},{right-corner}
可能的值：bl,br or tl,tr or bl,tr

示例

//自動翻頁
var way = 1;

setInterval(function() {
  //當前頁面為第一頁，只能向后翻頁
  if (way==1) {
    $("#flipbook").turn("next");
    //當翻到最后一頁時，只能向前翻
    if ($("#flipbook").turn("page")== $("#flipbook").turn("pages")) {
      way = 2;
      $("#flipbook").turn("options", {turnCorners: "tl,tr"});
    }
  } else {
    $("#flipbook").turn("previous");
    
    if ($("#flipbook").turn("page")==1) {
       way = 1;
       $("#flipbook").turn("options", {turnCorners: "bl,br"});
    }
  }
}, 1000);

• when：{} 默認值：空對象

設置事件監聽

$("#flipbook").turn({when: {
	turning: function(event, page, pageObject) {
		// Implementation
	}
}
});

• width:number 默認值：$("#flipbook").width()

設置頁面寬度

Zoom Options

• easeFunction:string 默認值：ease-in-out

定義過渡動畫中加速度曲線模式

可選的值有：

• default
• linear
• ease-in
• ease-out
• ease-in-out
• cubic bezier (require points)

• duration:number 默認值：600

定義了過渡動畫的快慢，設置為0時沒有過渡效果

• max:number or function 默認值：必須手動設置值

設置縮放因子的最大值，值為縮放時的最大比例系數

示例

• 參數值為number

// This will increase three times the size of the flipbook
//縮放的時候系數為3倍
$("#zoom-viewport").zoom({
	flipbook: $("#flipbook"),
	max: 3
});

• 參數值為function

// If we want to make the flipbook 3000 width when zoomed in.
//縮放到指定寬度3000
$("#zoom-viewport").zoom({
	flipbook: $("#flipbook"),
	max: function() {
		return 3000/$('.magazine').width();
	}
});

• flipbook:jquery element 默認值：必須手動設置

指向zoom作用的內容

示例

$("#flipbook").turn();
$("#zoom-viewport").zoom({
	flipbook: $("#flipbook"),
	max: 3
});

• when:object 默認值:{}

設置事件監聽

示例

$("#zoom-viewport").turn({when: {
	doubleTap: function(event) {
		// Implementation
	}
}
});

---

Properties

flipbook的Properties

語法

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

• animating

當前頁面如果有動畫效果(翻頁的時候)返回true

示例

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

• direction

返回當前書籍的翻頁方向，返回值為ltr或rtl

示例

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

• display

返回當前書籍的顯示方式，返回值為double或single

示例

alert("The current display is: " + $("#flipbook").turn("display"));

• disabled

是否禁用，禁用返回true

• page

獲取當前的頁面值

示例

alert("The current page is: "+$("#flipbook").turn("page"));

• pages

獲取當前書的總頁面數

示例

alert("#flipbook has " + $("#flipbook").turn("pages") + " pages");

• pages

獲取當前書的尺寸，返回值為一個對象，包括兩個內容：width和height

示例

var size = $("#flipbook").turn("size");
alert("Width: "+size.width + ", Height:"+size.height);

• options

獲取初始化書籍時設置的options

示例

var duration = $("#flipbook").turn("options").duration;
alert("The duration of the transition is "+duration);

• view

獲取當前的view

示例

var view = $("#flipbook").turn("view").join(" and ");
alert("Current view: "+view);

• zoom

獲取flipbook的縮放系數因子。默認值為1，代表當使用尺寸相關方法時flipbook會使用與原始尺寸相同的尺寸（不會改變尺寸）

示例

var zoom = $("#flipbook").turn("zoom");
alert("Current zoom: "+zoom);

zoom的Properties

• value

返回當前的zoom值

示例

function zoomedIn() {
    //值為1代表沒有進行縮放
	if ($("#zoom-viewport").turn("value")==1)
		alert("No zoom");
    //值大於1代表當前有縮放效果
	else if ($("#zoom-viewport").turn("value")>1)
		alert("Zoomed In");
}

---

Methods

Turn Methods

方法用於執行諸如翻頁或者更改屬性狀態等操作

語法

$("#flipbook").turn('method name'[, argument1, argument2]); 

當方法沒有返回值時，可以與另一個方法連接

$("#flipbook").turn("method1").turn("method2");

• addPage

向flipbook中添加新的頁面

參數	數據類型	描述	默認值
element	jquery元素	想要添加的dom元素	$("<div />")
pageNumber	number	想要往對應頁面添加的頁碼數	$("#flipbook").turn("pages")+1 默認添加到最后一頁

示例 如果要向第十頁添加新頁面，可以這樣

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

或者 設置新頁面元素的class值為"p10"也可以指明要插入的頁面為第十頁

element = $("<div />", {"class": "p10"}).html("Loading...");
$("#flipbook").turn("addPage", element);

• center

根據可見的頁面數量來決定flipbook的center。這個方法修改flipbook的css屬性margin-left 以至於將flipbook放置於中心。因此如果需要修改margin-left，最好需要將flipbook放置到一個容器div中來方便修改其margin屬性
如果flipbook的option的autoCenter設置為了true，則不需要使用這個方法
這個方法沒有參數

示例

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

使用這個方法時，其實是為flipbook設置了如下css樣式

#flipbook{
	transition:margin-left 1s;
	-webkit-transition:margin-left 1s;
	-moz-transition:margin-left 1s;
	-o-transition:margin-left 1s;
	-ms-transition:margin-left 1s;
	transition:margin-left 1s;
}

• destory

消除flipbook。從dom樹，內存和事件監聽器中刪除所有頁面
刪除flipbook的同時也會自動刪除zoom（如果定義了的話）
該方法沒有參數

示例

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

也可以刪除這些頁面的容器#flipbook,如下

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

• direction

設置flipbook的翻頁方向（ltr,rtl）

參數	數據類型	描述	默認值
direction	string	ltr or rtl	必須手動設定參數

示例

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

• display

設置顯示方式，一個視圖中只顯示一頁（single）或者一個視圖中顯示兩頁（double）
如果使用single的顯示方式，則會給flipbook添加overflow:hidden樣式

參數	數據類型	描述	默認值
displayMode	string	設置顯示方式	必須手動設定參數

示例

$("#flipbook").turn("display", "single");

• disable

禁用或啟用效果。如果禁用，則用戶不能修改該頁面

參數	數據類型	描述	默認值
disable	boolean	禁用或啟用效果	必須手動設定參數

示例

$("#flipbook").turn("disable", true);

• hasPage

如果flipbook中存在相應頁面則返回true

參數	數據類型	描述	默認值
pageNumber	number	要查看是否存在頁面的頁碼	必須手動設定參數

示例

function checkPage(page)  {
  if ($("#flipbook").turn("hasPage", page)) {
    alert("Page "+page+" is already in the flipbook");
  }
}

// Check if page 1 is in the flipbook
checkPage(1);

• previous

轉向上一頁的視圖
該方法沒有參數

示例

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

也可以轉換兩個視圖

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

• next

轉向下一頁的視圖
該方法沒有參數

示例

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

也可以轉換兩個視圖

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

• is

檢測jq選擇器中是否創建了turn.js的實例

示例

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

• page

將視圖轉換到指定的頁面

參數	數據類型	描述	默認值
page	number	要跳轉到的頁面的頁碼	必須手動設定參數

示例

// 跳轉到第10頁
$("#flipbook").turn("page", 10);

• pages

設置pages屬性值。如果當前的pages值大於設置的pages值，則會移出flipbook中多出去的這一部分頁面

參數	數據類型	描述	默認值
pages	number	值為當前flipbook中頁面的總數	必須手動設定參數

示例

$("#flipbook").turn("pages", 5);

$("#flipbook").turn("hasPage", 10); // It’s true. 
$("#flipbook").turn("pages", 5); // Sets 5 pages
$("#flipbook").turn("hasPage", 10); // Returns false

• peel

在指定的頁面角顯示翻起頁面的動畫效果

參數	數據類型	描述	默認值
corner	string	設置指定的角	必須手動設定參數
animate	boolean	true	animation

示例

// Shows a peeling page at the bottom right corner
$("#flipbook").turn("peel", "br");

• range

返回包含兩個值得數組，第一個數值的含義是下一個包含在dom樹中頁面的頁碼，第二個數值的含義是在范圍中的最后一個頁碼。這個范圍一般滿足如下關系：range[0] <= $("#flipbook").turn("page") <= range[1]

參數	數據類型	描述	默認值
pageNumber	number	在范圍內的頁碼	$("#flipbook").turn("page")

示例 為了能夠動態的添加頁面，可以使用range方法

var range = $("#flipbook").turn("range", 10);

for (var page = range[0]; page<=range[1]; page++){
	if (!$("#flipbook").turn("hasPage", page)) {
		$("#flipbook").turn("addPage", $("<div />"), page); 
	}
}

• removePage

移除指定頁面

參數	數據類型	描述	默認值
pageNumber	number	需要移出的頁面	必須手動指定值

示例

// Delete the page 10
$("#flipbook").turn("removePage", 10);

• resize

重新計算所有頁面的尺寸和位置
該方法沒有參數

示例

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

• size

設置flipbook的width和height

參數	數據類型	描述	默認值
width	number	flipbook的寬	必須手動指定值
height	number	flipbook的高	必須手動指定值

示例

// Resize the flipbook to 1000x600 
$("#flipbook").turn("size", 1000, 600);

• stop

停止當前的過渡動畫
該方法沒有參數

示例

// 轉到第十頁並且取消過渡動畫
$("#flipbook").turn("page", 10).turn(‘stop’);

• version

獲得當前的發行版本信息

示例

$("#flipbook").turn("version");
// Output is 4.0.6

• zoom

放大或縮小flipbook的尺寸，根據放大系數更改flipbook的寬和高。如果放大系數為1，則保持原尺寸不進行縮放

參數	數據類型	描述	默認值
factor	number	放大或縮小的比例系數	必須手動指定值

示例

// Reduce the size in half of the flipbook
$("#flipbook").turn("zoom", 0.5);

---

Zoom Methods

• destory

銷毀zoom viewport
如果flipbook被其destory方法銷毀，那么zoom viewport會自動的銷毀
該方法沒有參數

示例

$("#zoom-viewport").turn("destroy");

• zoomIn

放大flipbook
該方法沒有參數

示例

$("#zoom-viewport").turn("zoomIn");

• zoomOut

還原flipbook
該方法沒有參數

示例

$("#zoom-viewport").turn("zoomOut");

---

Events

Turn Events

事件可以支持定義在特殊時刻的行為。有兩種不同的方法可以定義

1.在options中使用

當添加事件監聽器時，會需要構造函數在創建flipbook前添加監聽器（when），例如

$("#flipbook").turn({when: {
	turning: function(event, page, pageObject) {
		// Implementation
	}
}
});

2. 用bind方法

jquery提供了一個bind方法來給元素綁定監聽器。可以為一個事件使用bind去添加你需要的任意多的監聽器，例如

$("#flipbook").bind("turning", function(event, page, pageObject) {
	// Implementation
});

如果option 的 prefix的值為true，那么需要加一個前綴turn，如下

$("#flipbook").bind("turn.turning", function(event, page, pageObject) {
	// Implementation
});

使用事件對象

第一個所有監聽函數共享的參數是事件對象，允許你操縱擴展和默認的事件，一些時間的后面可以跟隨一個動作，例如可以轉動頁面。因此，可以通過event.preventDefault()來阻止默認操作。在事件函數中，沒必要再返回false去阻止默認行為

事件

• end

當頁面過渡動畫結束時觸發事件

參數	數據類型	描述
event	object	事件對象
pageObject	object	頁面對象
pageTurned	boolean	如果轉到的是這個頁面，返回true

示例

$("#flipbook").bind("end", function(event, pageObject, turned){
  alert("turn.end:" +pageObject.page);
});

• first

當前頁碼為1時觸發該事件

參數	數據類型	描述
event	object	事件對象

示例

$("#flipbook").bind("first", function(event) {
	alert("You are at the beginning of the flipbook");
});

• last

在當前頁碼為最后一頁的時候觸發該事件

參數	數據類型	描述
event	object	事件對象

示例

$("#flipbook").bind("last", function(event) {
	alert("You are at the end of the flipbook");
});

• missing

在某些處於當前頁面范圍內的頁面被請求時觸發該事件

參數	數據類型	描述
event	object	事件對象
pages	array	需要被添加頁面的頁碼的數組

示例

$("#flipbook").bind("missing", function(event, pages) {
  for (var i = 0; i < pages.length; i++) {
    $(this).turn("addPage", $("<div />"), pages[i]);
  }
});

• start

在頁面的折疊動畫效果開始時觸發該動畫。換句話說，在顯示折疊起來的頁面之前觸發該動畫

參數	數據類型	描述
event	object	事件對象
pageobject	object	頁面對象
corner	string	頁腳類型

默認行為

顯示頁腳折疊起來的效果

示例 如果你想阻止當使用頁腳tl和tr時的動畫效果，可以使用start時間並且阻止其默認行為

$("#flipbook").bind("start", function(event, pageObject, corner) {
  if (corner=="tl" || corner=="tr") {
    event.preventDefault();
  }
});

• turning

當跳轉頁面之前觸發該事件

參數	數據類型	描述
event	object	事件對象
page	number	頁碼
view	array	新的view

默認行為

跳轉頁面

示例

$("#flipbook").bind("turning", function(event, page, view) {
  alert("Turning the page to: "+page);
});

可以阻止頁面跳轉到第一頁

$("#flipbook").bind("turning", function(event, page, view) {
  if (page==1) {
    event.preventDefault();
  }
});

• turned

在頁面跳轉之后觸發該事件

參數	數據類型	描述
event	object	事件對象
page	number	新的頁碼
view	array	新的view

示例

$("#flipbook").bind("turned", function(event, page, view) {
  alert("Page: "+page);
});

• zooming

當頁面的縮放尺寸發生改變的時候觸發該事件

參數	數據類型	描述
event	object	事件對象
newZoomValue	number	新的縮放比例系數
currentZoomvalue	number	當前的縮放比例系數

默認行為

更改縮放比例系數

示例

$("#flipbook").bind("zooming", function(event,  newZoomValue, currentZoomValue) {
  alert("New zoom: "+currentZoomValue);
});

Zoom Events

• doubleTap

當雙擊或雙點視圖元素時觸發該事件

參數	數據類型	描述
event	object	事件對象

示例

$("#zoom-view").bind("zoom.doubleTap", function(event) {
	if ($(this).zoom("value")==1) {
		$(this).zoom("zoomIn", event);
	} else {
		$(this).zoom("zoomOut");
	}
});