1

現在、pjax を使用してフラグメントを読み込み、サイト ページのメイン ページをオーバーレイしています。次に、ボディ クラスを jquery で変更して、スタイリングをいくつか変更できるようにします。これは問題ありませんが、pjax トリガーのクリックでボディ クラスの変更がトリガーされ、ボディがオーバーレイのクラスを維持するため、ブラウザーの [戻る] ボタンが機能しません。

私が探している効果は、プロジェクトをクリックしたときのこのサイトと非常によく似ています。

http://www.watsonyc.com/

明らかにこれは機能していないので、より良い方法があるはずです。

これが私のコードの例です：

$('.back').pjax('.info_overlay', { fragment: '.info_overlay',}).live('click', function(){
    $('body').removeClass("info").addClass("work");
    $('.info_overlay')
    .bind('pjax:start', function() { $(this).fadeOut(duration); })
    .bind('pjax:end', function() { $(this).hide(); });    
})
4

1 に答える 1

5

beforeSend属性と完全な属性を備えた単純な PJAX リクエストにするようにしてください。

beforeSend属性は、http リクエストが発生する前に実行されます。特定の AJAX/PJAX イベントのローダーを作成するときによく使用します。ユーザーがイベントを発生させる (つまり、ボタンをクリックする) たびに、beforeSendに割り当てられた関数が、更新中の div の内容を非表示にし、そこに gif ローダーを配置して、優れたユーザー エクスペリエンスを提供します。

完全な属性は、要求されたページが読み込まれた後に実行されます。ローダーで示した例を使用すると、完全な属性に割り当てられた関数を作成し、ローダーの画像を非表示にして、要求されたページから読み込まれたコンテンツで div を更新できます。

ローダー イメージの例を次に示します。

$.pjax({
    url: 'requested_page.php',
    container: '#updated_div',
    beforeSend: function(){
        $('#loader_place').fadeIn('normal'); // This will fade in a hidden div with fixed centered position
    },
    complete: function(){
        $('#loader_place').fadeOut('normal'); // This will fade out the div and make it invisible again
    }
});

もっと複雑なことをしたい場合は、PJAX Documentationを読むことをお勧めします。

于 2012-12-26T08:17:28.473 に答える