ブログ練習帳

J Queryを使って共通部分を読み込む　テンプレートの代わり

htmlを書いていて、ヘッダーとか、フッターとか、グローバルナビとか、多ページ構成のサイトの共通部分をまとめて修正したいとき、どうしよう･･･。Dream Weaverのテンプレートの機能、ライブラリの機能、一括置換･･･。PHPで読み込む･･･。

そんな解決策のひとつがJ Queryを使うことみたいです。たとえば、ヘッダー、フッター、ナビゲーションの3ブロックをそれぞれ各ページの共通部分として管理して、J Queryで読み込ませられます。

それぞれの部分を、header.html、footer.html、navi.htmlという別ファイルにして、そこにフツーにHTMLで書きます。で、読み込む元のファイル、たとえばindex.html内では、それぞれの部品をおきたい場所に空divをおき、適当なIDを振ります。そして外部化したJSファイルにJ Queryを書きます。

このとき、JSファイルで、読み込むヘッダーなどの書いてあるHTMLファイルのパスを書きますが、Java Scriptは読み込む先のHTMLファイルで実行されるので、パスの階層がずれないように注意しなればいけないです。いろんな階層のHTMLで読み込まれることを考えると、絶対URLか絶対パス（仮想パス）で書くほうがよさそう。

HTML

<div id="wrap">

  <div id="header"></div>

  <div id="main"><p>ここにメインコンテンツを書きます</p></div>

  <div id="navi"></div>

  <div id="footer"></div>

</div>

header.html

<p>ここにヘッダーを書きます</p>

navi.html

<ul>

  <li>navi1</li>

  <li>navi2</li>

  <li>navi3</li>

  <li>navi4</li>

</ul>

footer.html

<p>ここにフッターを書きます</p>

Java Script (J Query)

// JavaScript Document

  $(function(){

  var header=$("#header");

  var navi=$("#navi");

  var footer=$("#footer");

  header.load("/csstest/jstest/templates/header.html");

  navi.load("/csstest/jstest/templates/navi.html");

  footer.load("/csstest/jstest/templates/footer.html");

  })

▼サンプルはこちら

なんとかでけた？どきどき。

2012年2月1日1:12 AM| カテゴリー： Java ScriptとJ Query,見習い奮闘記| コメント (0)