WebTips

Top / JavaScript / prototype.js / Ajax.Updaterでサイトマネージャー

JavaScript/prototype.js/Ajax.Updaterでサイトマネージャー

　とっても便利なprototype.jsだけど、JavaScriptを使ってサイトマネージャー的に利用する事が出来ます。
　Ajax.Updaterを使う事で、ページの共通部分を外部読込みにしてしまいましょう。例えばこんな感じ。こうすればヘッダー、メニュー、フッター等を共通化する事が出来ます。CSSを共通化する事でCSSファイルを変えるだけで一発でデザインを変更出来るし、ヘッダー、フッター等も一つのファイルを変更する事で良いですよね。

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="prototype.js"></script>
  4. <script>
  5. <!--
  6. window.onload=function(){
  7.   new Ajax.Updater( 'header', 'header.html', {method: 'get'});
  8.   new Ajax.Updater( 'menu', 'menu.html', {method: 'get'});
  9.   new Ajax.Updater( 'footer', 'footer.html', {method: 'get'});
  10. }
  11. //-->
  12. </script>
  13. </head>
  14. <body>
  15. <div id="header"></div>
  16. <div id="menu"></div>
  17. <div id="contents">メインコンテンツはこちらに</div>
  18. <div id="footer"></div>
  19. </body>
  20. </html>

表示例

うぬー、最近はjQuery>javascriptが便利そうだ。
トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2009-08-18 (火) 22:09:21 (387d)