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

使用Booklet Jquery插件，如何验证最后一页显示？

1 个答案: