1

タブ付きのコンテンツがあります。以下のHTMLに基づいています。

<ul class="tabContainer">
</ul>

<div id="tabContent">
     <div id="contentHolder">
        <!-- The AJAX fetched content goes here -->
     </div>
   <div id="pagination"></div>
</div>

f_tabは、以下のアクションを含む、上記のHTMLのコンテンツを管理する関数です。

  • タブを生成します。
  • PHPページをフェッチしてタブホルダーに結果を返すAJAXを実行します。

  • jPaginatorプラグイン（https://github.com/remylab/jpaginator）を使用してコンテンツホルダー内の各コンテンツをページ付けします。

     function f_tab(str){
$(document).ready(function(){

        var Tabs = {
        '1' : 'page1.php?p='+var,
        '2' : 'page2.php?p='+var,
        '3' : 'page3.php?p='+var,

    }


 var topLineColor = {
    blue:'lightblue',
    blue:'lightblue',
    blue:'lightblue',}


$.each(Tabs,function(i,j){

    var tmp = $('<li><a href="" class="tab">'+i+' <span class="left" /><span class="right" /></a></li>');


    tmp.find('a').data('page',j);


    $('ul.tabContainer').append(tmp);
})


var the_tabs = $('.tab');

the_tabs.click(function(e){

    var element = $(this);


    if(!element.data('cache'))
    {   

        $.get(element.data('page'),function(msg){
            $('#contentHolder').html(msg);
            element.data('cache',msg);
        });
    }
    else {
    $('#contentHolder').html(element.data('cache'));

    }
    e.preventDefault();

})

the_tabs.eq(2).click();    });       return false;        }

ページネーション機能（情報提供のみ）は次のとおりです。

 (function($){

    $.fn.extend({ 
        MyPagination: function(options) {
            var defaults = {
                height: 600,
                fadeSpeed: 1000
            };
            var options = $.extend(defaults, options);

            //Creating a reference to the object
            var objContent = $(this);

            // other inner variables
            var fullPages = new Array();
            var subPages = new Array();
            var height = 0;
            var lastPage = 1;
            var paginatePages=null;
            var numero=0;

            // initialization function
            init = function() {
                objContent.children().each(function(i){
                    if (height + this.clientHeight > options.height) {
                        fullPages.push(subPages);
                        subPages = new Array();
                        height = 0;
                    }

                    height += this.clientHeight;
                    subPages.push(this);
                });

                if (height > 0) {
                    fullPages.push(subPages);
                }

                // wrapping each full page
                $(fullPages).wrap("<div class='page'></div>");

                // hiding all wrapped pages

                objContent.children().hide();


                // making collection of pages for pagination
                paginatePages = objContent.children();


                numero=$(paginatePages).length;

                // show first page
                showPage(lastPage);

            };



            // show page function
            showPage = function(page) {
                i = page - 1; 
                if (paginatePages[i]) {

                    // hiding old page, display new one
                    $(paginatePages[lastPage]).hide();
                    lastPage = i;
                    $(paginatePages[lastPage]).fadeIn(options.fadeSpeed);

                }
            };

            // show pagination function (draw switching numbers)

            // perform initialization
            init();


            //$(document).ready(function(){
            $("#pagination").jPaginator({ 
                nbPages:numero,
                marginPx:5,
                nbVisible:8, 
                overBtnLeft:'#over_backward', 
                overBtnRight:'#over_forward', 
                maxBtnLeft:'#max_backward', 
                maxBtnRight:'#max_forward', 
                onPageClicked: function(a,num) {

                    showPage(num);
                } 
            });
            //});

        }
    });
})(jQuery);

質問： タブから別のタブに移動するときに、ブラウザがタブに最後に表示されたページを記憶するようにするにはどうすればよいですか。たとえば、tab1に表示される最後のページがpage5の場合、別のタブをクリックしてtab1に戻った後、tab1のpage5を表示するにはどうすればよいですか。

お時間をいただきありがとうございます。ヘルプをいただければ幸いです。

4

1 に答える 1

1

AJAXが各タブをロードしているため、すべての状態情報が失われます。私が見る限り、次のオプションがあります。

  1. タブをAJAXロードしないでください。これは、ページの読み込み時間が長くなりますが、タブを変更するまでの待ち時間が短くなることを意味します。

  2. 理想：タブ変更機能を変更して、コンテンツがすでにロードされているかどうかを確認します。まだ行われていない場合は、コンテンツ内のAJAXのみ。

  3. ページの状態を変数に保存し、タブが読み込まれるたびにページを変数の値に変更します。

于 2013-03-22T15:08:59.187 に答える