使用Booklet Jquery插件，如何驗證顯示的最後一頁？

Question

我正在使用the Booklet plugin。我如何確認最後一頁顯示？我試過類似

$(document).ready(function(){ 
    ($('.b-page:last').is(':visible'))?alert("da"):alert("nu"); 
}); 

但它似乎沒有工作。

Answer 1

使用jQuery，您可以檢測您何時處於最後一頁或封底。下面的代碼將檢測上負載任一情況下，在調整大小和也變化（一個blooklet事件）。祝你好運！

$(function() { 

     //Create a function to do stuff... 
     function dostuff() { 
      console.log('I am on the last page...'); 
     } 

     //Create a function that sets a new class, and get the width value of it's element 
     function mclasswidth() { 
      //add the new class 
      $("div[title='End']").parent('div').parent().prev().addClass('dropit'); 

      //Get the width value 
      var mwidth = $('.dropit').width(); 

      //The big secret...if width is 0, you know you are on the last page/back cover 
      if (mwidth =='0') { 
       dostuff(); 
      } 
     } 

     //In addition to running booklet code below, you can also use the "change" event to detect if you are on last page (look below) 
     $("#mybook").booklet({ 
      width: 500, 
      height: 500, 
      speed: 250, 
      covers: true, 
      closed: true, 
      startingPage: 4, //(optional) 
      pageNumbers: false, 
      pagePadding: 0, 
      autoCenter: true, 
      arrows: false, 
      change: function (event, data) { 

       //Detect the width value of your new class on page "change", which will do stuff if you are on the last page. 
       mclasswidth(); 

       //Also on page change, if you already know the index number to the last page, you can do stuff directly 
       if (data.index == "4") { 
        dostuff(); 
       } 
      } 
     }); 

     //Detect the width value of your new class on "load" and on "resize", which will do stuff if you are on the last page. 
     $(window).on("resize", function() { 
      mclasswidth(); 
     }).resize(); 
    });