基於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 = $("<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）

示例

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

• display

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

示例

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

• disable

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

示例

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

• hasPage

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

示例

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

  將視圖轉換到指定的頁面

示例

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

• pages

  設置pages屬性值。如果當前的pages值大於設置的pages值，則會移出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

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

示例

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

• range

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

示例 為了能夠動態的添加頁面，可以使用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

  移除指定頁面

示例

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

• resize

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

示例

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

• size

  設置flipbook的width和height

示例

// 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，則保持原尺寸不進行縮放

示例

// 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

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

示例

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

• first

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

示例

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

• last

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

示例

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

• missing

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

示例

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

• start

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

預設行為 |
---|
顯示頁腳摺疊起來的效果 |

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

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

• turning

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

預設行為 |
---|
跳轉頁面 |

示例

$("#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

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

示例

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

• zooming

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

預設行為 |
---|
更改縮放比例繫數 |

示例

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

Zoom Events

• doubleTap

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

示例

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