Doge log

Abby CTO 雑賀 力王のオフィシャルサイトです

レイアウト機能追加

Kumuにレイアウト機能を追加しました。
一応以前から考えた機能なんだけどやっとやる気が出たので作りました。

jsでteedaのレイアウト機能と同様の事が出来ます。
jsで実現しているためApplicationサーバなど起動する必要がありません。
UI時などで使用するといいかもしれません。
ドキュメントはパスワード忘れたからあがってないだけで書いてコミットしてあります。
(適当だけど)

include機能

使用方法はまずinclude機能をonにします。

  <!-- ?mockInclude=trueとする -->
  <script type="text/javascript" src="./js/kumu.js?mockInclude=true"></script>

読み込み時のパラメータを設定すればいいだけです。

includeするにはdivタグにid名が"mockInclude"で始まり、src属性にincludeしたいファイルのパスを指定します。
mockIncludeが有効になった状態でincludeしたい箇所に以下のようなdivタグを記述するとHTMLがincludeされます。

  <!-- 必ず</div>出終わること -->  
  <div id="mockInclude1" src="./header.html"></div>

複数もいけます。

  
  <div id="mockInclude1" src="./header.html"></div>

  <div id="mockInclude2" src="./footer.html"></div>

レイアウト機能

teedaのものとほとんど変わりません。
include機能が有効になっていないと動作しないのでまずonにして下さい。
レイアウト用のHTMLをパラメータで指定します。

  <script type="text/javascript" src="./js/kumu.js?mockInclude=true&layout=./layout.html"></script>

レイアウトファイルにはめ込んで表示したい箇所にid="mockIncludeChildBody"を持ったdivタグを定義します。

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  </head>
  <body>
  <p>ここからchild</p>
  <table border="1">
  <tr>
  <td><div id="mockIncludeChildBody"></div></td>
  </tr>
  </table>
  </body>
  </html>

現在のHTMLのbody内が指定したレイアウトファイルの

の部分に表示されます。
またレイアウト機能とincludeは組み合わせて使用することができます。

layout.html(レイアウトファイル)
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  </head>
  <body>
  <div id="mockInclude1" src="./header.html"></div>
  <p>ここからchild</p>
  <table border="1">
  <tr>
  <td><div id="mockIncludeChildBody"></div></td>
  </tr>
  </table>
  <div id="mockInclude1" src="./footer.html"></div>
  </body>
  </html>
layoutSample.html(実際にアクセスする側)
  
  <html>
  <head>
  <meta http-equiv="Content-Language" content="ja">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script  type="text/javascript" src="./js/kumu.js?mockInclude=true&layout=./layout.html"></script>
  </head>

  <body>
  <form>
  レイアウト
  <table style="width:100%">
  <tr>
    <td>ボタンだよ</td>
    <td><input type="button" value="TEST2" /></td>
  </tr>
  </table>
  </form>
  </body>
  </html>

使用したい方はsvnのtrunkから最新のkumu.jsを持って行って下さい。
うくく。