0

私はこのページネーションプラグインを使用しています。

彼の説明の最後に、著者は次のように述べています。

同じページに複数のページを作成する場合は、このプラグインがIDを使用してコントロールボタンをターゲットにするため、ページごとにコントロールIDパラメーターを定義する必要があることに注意してください。

私のページでは、2つのコントロールを定義しました。

1.
$('#port').easyPaginate({
   step:2
});

2.
$('#blog_posts').easyPaginate({
   step:1
});

最初のものだけがid='port'機能します。

誰かがこれを機能させる方法について何かアイデアがありますか？

便利なスクリプトは次のとおりです。

(function($) {

    $.fn.easyPaginate = function(options){

        var defaults = {                
            step: 4,
            delay: 100,
            numeric: true,
            nextprev: true,
            auto:false,
            pause:4000,
            clickstop:true,
            controls: 'pagination',
            current: 'current' 
        }; 

        var options = $.extend(defaults, options); 
        var step = options.step;
        var lower, upper;
        var children = $(this).children();
        var count = children.length;
        var obj, next, prev;        
        var page = 1;
        var timeout;
        var clicked = false;

        function show(){
            clearTimeout(timeout);
            lower = ((page-1) * step);
            upper = lower+step;
            $(children).each(function(i){
                var child = $(this);
                child.hide();
                if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); }
                if(options.nextprev){
                    if(upper >= count) { next.fadeOut('fast'); } else { next.fadeIn('fast').css({'display':'inline-block'}); };
                    if(lower >= 1) { prev.fadeIn('fast').css({'display':'inline-block'}); } else { prev.fadeOut('fast'); };
                };
            }); 
            $('li','#'+ options.controls).removeClass(options.current);
            $('li[data-index="'+page+'"]','#'+ options.controls).addClass(options.current);

            if(options.auto){
                if(options.clickstop && clicked){}else{ timeout = setTimeout(auto,options.pause); };
            };
        };

        function auto(){
            if(upper <= count){ page++; show(); }           
        };

        this.each(function(){ 

            obj = this;

            if(count>step){

                var ol;
                var pages = Math.floor(count/step);
                if((count/step) > pages) pages++;

                ol = $('<ol id="'+ options.controls +'"></ol>').insertAfter(obj);

                if(options.nextprev){
                    prev = $('<li class="prev">&laquo; Previous</li>')
                        .hide()
                        .appendTo(ol)
                        .click(function(){
                            clicked = true;
                            page--;
                            show();
                        });
                };

                if(options.numeric){
                    for(var i=1;i<=pages;i++){
                    $('<li data-index="'+ i +'">'+ i +'</li>')
                        .appendTo(ol)
                        .click(function(){  
                            clicked = true;
                            page = $(this).attr('data-index');
                            show();
                        });                 
                    };              
                };

                if(options.nextprev){
                    next = $('<li class="next">Next &raquo;</li>')
                        .hide()
                        .appendTo(ol)
                        .click(function(){
                            clicked = true;         
                            page++;
                            show();
                        });
                };

                show();
            };
        }); 

    };  

})(jQuery);
4

2 に答える 2

0

JQueryを使用して、ページ付けするリストを循環する関数を作成します。ページ上のすべてのリストを選択していないことを確認するために、共通のクラスでそれらをマークします。

HTML

<div id="test_1" class="paginateMe">
    <ul>
    </ul>
    <div class="clear"></div>
</div>

<div id="test_2" class="paginateMe">
    <ul>
    </ul>
    <div class="clear"></div>
</div>

JS：

$('div.paginateMe').each(function(index, element) {
    $this = $('#'+$(this).attr('id')+' ul');

    $this.easyPaginate({ step:1 });
});

上記のようにDIVにネストする代わりに、共通のクラスでULをターゲットにすることもできます。

于 2012-08-17T17:32:00.773 に答える
0

私は別の方法で解決しました

  $('ul.easypagination1').easyPaginate({
        step:20,
        delay:0,
        controls:'easy-pagination-1'
      });

     $('ul.easypagination2').easyPaginate({
        step:20,
        delay:0,
        controls:'easy-pagination-2'
      });

それは機能しますが、より多くのコードとCSSを配置する必要があります。opanitchのコードを試しましたが、機能しません。現在、jquery 1.7.2を使用しています...わかりません。

于 2012-09-18T12:45:27.403 に答える