时间戳

首页 > 解决方案 > 为 jQuery BookBlock 插件的 URL 添加分页

jquery - 为 jQuery BookBlock 插件的 URL 添加分页

问题描述

我正在使用名为 BookBlock 的 jQuery 插件，可以在此处的 Codrops 演示中找到

我已经像上面的示例一样成功地添加了分页并将其更改为数字而不是点，但是我现在想知道是否可以将这些相同的数字添加到 URL 中？

例如www.site.com/page/4/并且如果用户访问该 URL，他们会在分页序列中自动翻转到该页面？

这是我当前的代码：

var Page = (function() {
                var $container = $( '#bb-custom-grid' ); // Defines the area
                return {
                    init : function() {
                    $container.find('div.bb-bookblock').each(function(){
                        var $bookBlock = $( this ),
                            
                       // BookBlock Settings

                            bbs = $bookBlock.bookblock( {
                                speed : 800,
                                perspective : 2000,
                                shadowSides : 0.8,
                                shadowFlip  : 0.4
                            }); 

                       // Next and Prev Arrows
                            var $navNexts = $bookBlock.find( '.prev-arrow' ),
                            $navPrevs = $bookBlock.find( '.next-arrow' ).hide();
                            $navNexts.on( 'click', function() {
                                bbs.next(); 
                                return false;
                            } );
                            $navPrevs.on( 'click', function() {
                                bbs.prev();
                                return false;
                            } );

                     // Pagination

                        $('ul.numbered-pagination .end.page').attr('data-page-id',bbs.$items.length);
                        $.each( bbs.$items, function( key, value ) {
                            var classes = 'page';
                            if(key==0){
                               classes = 'active page';
                               }
                            
                            $('<li class="'+classes+'" data-page-id="'+(key+1)+'">'+(key+1)+'</li>').insertBefore('ul.numbered-pagination .end.page');
                            $('ul.numbered-pagination li.page').on( 'click', function() {
                            
                            bbs.jump(parseInt($(this).attr('data-page-id')));
                            $('ul.numbered-pagination .page').removeClass('active');
                            $(this).addClass('active');
                        });

                        });
                        
                   // Swiping Action
                            $bookBlock.children().on( {
                            'swipeleft'     : function( event ) {
                                bbs.next();
                                return false;
                            },
                            'swiperight'    : function( event ) {
                                bbs.prev();
                                return false;
                            }
                        } );
                    
                    });
                        }
                };
                
            })();
                }

任何帮助将不胜感激！即使它只是解释为什么这可能是不可能的:)谢谢

标签： jquerypaginationbookblock

解决方案

配置选项允许一个属性，startPage因此您可以使用它从指定页面开始。

您如何确定该startPage值取决于您如何设置页面 - 例如，如果它是您的示例 URL www.site.com/page/4/，您可以执行以下操作：

var startPage = parseInt(document.location.href.match(/[0-9]+/)[0]);

一种不那么老套的方法是使用查询字符串：www.site.com/?page=4

var startPage = parseInt(new URL(document.location.href).searchParams.get("page"));

推荐阅读