はい、DAFUです。
今回はmonaform.starfree.jpでページをテンプレート化したので方法を書いておきます。
【ソースコード】
$(function(){ $("#head").load("/temp/header.html"); $("#footer").load("/temp/footer.html"); $("#cent").load("/temp/cent.html") });
これがソースコードです。
なんか雰囲気で分かりそうな気もしますが、解説します。
$(“#id・クラス名”).load(“読み込むファイル名”)
このような構造になっています。
こうすることで、<div>タグを置くだけでテンプレート用のファイルが読み込まれるようになり、一つ一つのページの構造もスマートになります。
HTMLのソースもみてみましょう。
【ソースコード】
<!DOCTYPE html> <html> <head> <lang="ja"> <meta charset="UTF-8"> <title>テンプレートテスト</title> <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script> <script src="/js/temp.js" type="text/javascript"></script> </head> <body> <h3>ヘッダー</h3> <div id="head"></div> <h3>なんか中間(広告の都合上分けた)</h3> <div id="cent"></div> <h3>フッター</h3> <div id="footer"></div> </body> </html>
このような感じにすると、<h3>タグの下にそれぞれの要素が表示されるはずです。
大事なのは<head>内でjQueryとテンプレートを定義するJSファイルを読み込むことですが、jQueryは二重読み込みにならないかを先に確認しておきましょう。
では(‘ω’)ノ
コメントを書く