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

Question

我正在使用Booklet插件 。 如何驗證是否顯示了最后一頁？ 我已經嘗試過類似

$(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();
    });