0

現在、新しいポートフォリオサイトを構築中です。現在、AJAX で詳細情報を読み込んでいる間、ポートフォリオ アイテムのレイアウトに Isotope を使用しています。CCS3 トランジションを利用して、「詳細」コンテンツに素敵なエフェクト/トランジションを追加しています。ポートフォリオ アイテムをクリックすると、メインのポートフォリオ グリッドがフェードアウトし、作品の詳細ページに置き換えられます。オンラインで見つけたいくつかのことに従って、これまでのところ機能しているものを次に示します。

$(document).ready(function() {

var hash = window.location.hash.substr(1);
var href = $('.item-wrapper a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html .work-detail';
        $('.site-container').load(toLoad)
    }                                           
});

$('.item-wrapper a').click(function(){

    var toLoad = $(this).attr('href')+' .work-detail';
    $('.home').addClass('homeFade');
    setTimeout(loadContent, 900);
    $('#load').remove();
    $('.site-container').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('fast');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
        $('.site-container').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $('.work-detail').fadeIn('normal',hideLoader());
    }
    function hideLoader() {
        $('#load').fadeOut('fast');


    }
    setTimeout(workFadeUp, 1300);
    function workFadeUp() {
        $('.work-detail').addClass('work-detail-show');


    }
    return false;

});

$('.work-detail').addClass('work-detail-show');もともとコールバック関数として追加しようとしていたときにいくつか問題がありshowNewContent()ましたが、まだ利用できないように見えた.work-detail ので、多くの試行錯誤の末、遅れて最後になりました.

基本的には自分のやりたいように演じていますが、この時点で頭を悩ませている部分があります。ユーザーがブラウザの戻るボタンを押す場所にこれをプログラムするにはどうすればよいですか?

私は History.js を調べましたが、README を読んでいると、ヘッドライトの鹿のように見えます。

私は間違いなく jQuery/AJAX の達人ではありませんが、掘り下げたいと思っています...ただ岩にぶつかったような気がします。

ここに私の開発サイトへのリンクがありますhttp://bit.ly/U38SFB

また、非 AJAX ルートに進むことを検討しています。AJAX はユーザビリティ/機能を実際には向上させないため、「クールな読み込み」要素を提供するだけなので、同じ CSS トランジションを実行し、実際にページにリンクする偽の AJAX バージョンを作成しました。

$(window)
.load(function () {

$('.work-detail')
    .addClass('work-detail-show');
});

$("a.fakeajax")
.click(function () {
$('.home')
    .addClass('homeFade');
var href = $(this)
    .attr('href');
// Delay setting the location for one second
setTimeout(function () {
    window.location = href
}, 700);

return false;
});

ブラウザの戻るボタンを押すと、ポートフォリオグリッドをフェードアウトするために追加されたクラスがまだ存在します。

4

1 に答える 1

0

できることは次のようなものだけです。

window.onbeforeunload = function() {
    return "You are leaving the page"
}

たとえば、サーバーにリクエストを送信してデータを保存するように他のコードを配置することもできますが、最終的には、確認ポップアップでクライアントを煩わせるだけです。

ブラウザのボタンを制御することはできません。保存されたURLの履歴をスローしてロードします。また、window.historyエントリを変更することは許可されていません。

于 2013-01-31T18:36:48.377 に答える