0

私はajaxナビゲーションを実装していて、html5 history APIを利用したいので、History.jsに困惑しました。

私はそれをどのように使うべきか正確にはわかりません、そしてそれのためのドキュメンテーションはあまり良くありません、noreは例です。

私はそれを台無しにしようとしました...

$("a[href]:not(.no-ajax-navigate)").click(function(e){
    e.preventDefault();
    var path = $(this).attr('data-path');//this is "path/to/page" (clean url's)
    //so I got the path.. now what? pushState?
});

私は今何をすべきかわからない..事前に感謝します！

アップデート1

@OneTrickPonyがコメントした[ソースコード]@OneTrickPonyがコメントした[http://html5.gingerhost.com/new-york）を見て、動作させました。しかし、ページの読み込み時にpopstateイベントが発生するようです。これは起こるはずですか？私のページは基本的にフェードイン/フェードアウトしますが、これは最初にブラウザをロード（更新）するときにちょっと面倒です。

4

1 に答える 1

1

History.js を使用せずに HTML5 履歴を使用できることに注意してください (これを参照してください)。

History.js は、履歴コール スタックに追加データを保存できるなど、いくつかの優れた機能を提供します。以下は、更新せずに URL パスを設定します。 

$("a[href]:not(.no-ajax-navigate)").click(function(e){
  e.preventDefault();
  var path = $(this).attr('data-path');//this is "path/to/page" (clean url's)

  // Set the URL using History.js (note the capital H)
  var History = window.History;
  History.pushState(null, null, path);
});

pushState の最初の 2 つの引数を使用して、追加のデータを保存できます (詳細については、こちらを参照してください)。

戻るには:History.back();

URL 変更イベントをキャッチするには、次を使用できます。

History.Adapter.bind(window,'statechange',function(){
  var History = window.History;
  var State = History.getState();
  // Do something here with State
});
于 2013-01-21T06:14:54.413 に答える