外部htmlファイルをjquery-ajaxでインクルードしてメインのページに表示させる
外部に html で別ファイルを作り、それを読み込んでメインのページに表示させる方法です。まずはDemoを見てください。
１． jquery.js と ajax-dynamic-content.js をダウンロードする。
２．インクルードする html ファイルの <head> 部分に以下の２行を追記する。
<script type="text/javascript" src="ajax.js"></script> ← 適格場所は変更
<script type="text/javascript" src="ajax-dynamic-content.js"></script> ← 適格場所は変更
３．メインページの表示させる位置には以下のように記述しておきます。もちろん、ここで使われている " demo " とか " sample " などという文字列は変更します。
<div class="sample" id="demo">Loading news. please wait...</div>
<script type="text/javascript">
ajax_loadContent('demo','sample.html');
</script>
この方法は 08.のprototype.jsで外部htmlをインクルードして表示することと同じです。
css ファイルなどは表示させるほうのページに通常と同じように <head> 部分に記述しておきます。
他の js ファイルとバッティングしたりすることがありますので、注意を要します。
配布
上記のサンプルのDemoを配布しております（ jquery.js , ajax-dynamic-content.js 含 ）。
汚いコードですが、よろしければ練習などにお使いください。
圧縮ファイル名は sample01.tar.gz となっています。
また、md5sum.txt などの txt ファイルは右クリックにて "名前をつけてリンク先を保存" を選択してください。
2011/06/17 13:11 sample01.tar.gz
2011/06/17 13:11 md5sum.txt
2011/06/17 13:11 scan repoat log.txt