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

Using the Booklet Jquery Plugin, how do I verify the last page was displayed?

本文关键字：验证 最后 一页 显示 是否 何验证 Jquery Booklet 插件 使用      更新时间：2023-09-26

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

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

但它似乎不起作用。

使用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();
    });
相关文章：