利便性ばっちり。ヘッダー・フッターの共通化

ページの数だけ必要になる、ヘッダー・フッター。項目によってはサイドメニューもそうですね。
ヘッダーの内容が増えたり、フッターの内容が変更したり。
その都度、全てのページに適用させるなんて面倒ですよね…！
（Dreamweaverで置換。といった方法もありはしますが、ちゃんと置き換え場所を確認しないと思いもよらないところが変わってしまうので注意が必要です）

共通部分をテンプレ化して、更新を楽に！

共通部分をテンプレ化して、更新を楽に！

まずindex.htmlから。

==== index.html ==== <body> <script>header();</script>  ・・・・・・・・ページ内容・・・・ <script>footer();</script> 

続いて、各ヘッダー・フッターに飛ばすjs

（url:’ ‘ の中身は適宜変更してください）

==== tpl.js(名前はご自由に) ====
//**************************************
//ヘッダー
//************************************** function header(){
    $.ajax({
        url: '/common/tpl/header.html',
        cache: false,
        async: false,
        dataType: 'html',
        success: function(html){
            document.write(html);
        }
    });
}
//**************************************
//フッター
//**************************************
function footer(){
    $.ajax({
        url: '/common/tpl/footer.html',
        cache: false,
        async: false,
        dataType: 'html',
        success: function(html){
            document.write(html);
        }
    });
}