基於jquery的外掛turn.js學習筆記

yuxiG發表於2019-02-22
jQueryJS筆記

基於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");
    }
});

相關文章