javascript - 使用 Booklet Jquery 插件，我如何验证最后一页是否显示？

Question

我正在使用小册子插件。如何验证是否显示了最后一页？我试过类似的东西

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

但它似乎不起作用。

Answer 1

使用 jQuery，您可以检测您何时位于最后一页或封底。下面的代码将检测load、resize和change（一个 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();
    });