CSS Tricks の Chris は、優れた AJAX ページ読み込みチュートリアルを公開しています。これは、JavaScript をサポートしていない古いブラウザーでも機能するという彼のソリューション OS に関する最良の部分です。
脚本
<script type="text/javascript">
/*
* Your navigation bar, can be "document" or body if you want to
* apply to every link on your site
*/
var $navigation = $("#site-menu");
//Your main content that will be replaces
var body = "#page-body";
var $body = $(body);
$navigation.delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function() {
var newHash = window.location.hash.substring(1);
if(newHash) {
$body.fadeOut(200, function() {
$body.hide().load(newHash + " " + body, function() {
$body.fadeIn(200, function() {
});
});
});
};
});
$(window).trigger('hashchange');
</script>
メニュー
通常どおりメニューを追加します。Ajax ロードするメニュー リンクをラップする site-menu id タグを必ず追加してください。
<div id="site-menu">
<?php wp_nav_menu(); ?>
</div>
詳細
$navigation の下のすべてのリンクには、ウィンドウ URL ハッシュを更新するクリック イベントが追加されます。ウィンドウはハッシュの変更をリッスンしており、ハッシュ値を使用して AJAX リクエストを作成し、$body html をリロードします。
アドバンテージ
- 履歴 (戻る & 進む) ナビゲーションが機能します。
- 同じサイトは、JavaScript をサポートするブラウザーとサポートしないブラウザーで動作します。
- URL を超えてコピーすると、スクリプトは正しいページをロードします。
- デリゲート関数を使用しているため、ajax ロードの結果を介して追加されたリンクには、クリック イベントも追加されます。
不利益
詳細と例については、http: //css-tricks.com/video-screencasts/85-best-practices-dynamic-content/を参照してください。