メニューを作り直した
http://joey.sourceforge.jp/briwnie-menu-sample.html
JavaScriptでメニューを実現するクラスを作ってみました。
前にも作ったんですが、色々おかしかったので最初から作り直しました。
<div id="menu1">
<table cellspacing="0" border="0" cellpadding="0" bgcolor="#aabbcc">
<tr>
<td id="menu1_0">menu1_0</td>
<td id="menu1_1">めにゅーイチのイチ</td>
</tr>
</table>
</div>
<div id="menu1_0_body" style="position:absolute;display:none">
<table cellspacing="0" border="0" cellpadding="0" bgcolor="#bbccaa" width="200">
<tr id="menu1_0_0"><td> </td><td>メニューイチのゼロのゼロ</td><td align="right"><img src="triangle2_16.png"></td></tr>
<tr id="menu1_0_1"><td> </td><td><a href="http://www.google.co.jp">menu1_0_1aaaaaaaaaaaaaaa</a></td><td> </td></tr>
<tr id="menu1_0_2"><td> </td><td>menu1_0_2</td><td> </td></tr>
<tr id="menu1_0_3"><td> </td><td>menu1_0_3</td><td> </td></tr>
</table>
</div>
<div id="menu1_0_0_body" style="position:absolute;display:none">
<table cellspacing="0" border="0" cellpadding="0" bgcolor="#ffeedd" width="200">
<tr id="menu1_0_0_0"><td>メニューイチのゼロのゼロのゼロ</td></tr>
<tr id="menu1_0_1_1"><td>menu1_0_1_1</td></tr>
<tr id="menu1_0_1_2"><td>menu1_0_1_2</td></tr>
</table>
</div>こんな感じでメニューをdiv-table毎にメニューを書くと、動的なメニューとして表示されます。
制約
・trのidは"menu"で始めなければならない。
・trのidに"_body"をつけた文字列を対応させたいメニューのdivのidに割り振らなければならない。
特徴
・1画面に何個でも置ける。
・メニュー内に記述する内容については使う側が自由にできる（そりゃそうだ）
・縦置きに対応
ですが、サンプルのHTMLを見れば分かるとおりひっじょーに書くのが面倒くさいので、Tapestryで生成するようなコンポーネントを作ってみました。以下使用例。
<span jwcid="@brownie:Menu" bgcolor="#aabbcc" selectedBgcolor="#ffeedd">
<span jwcid="@brownie:MenuItem" bgcolor="#bbccaa">
<a href="javascript:void(0)" jwcid="@PageLink" page="Home">Home</a>
</span>
<span jwcid="@brownie:MenuItem" bgcolor="#ccaabb" caption="ああああああ">
<span jwcid="@brownie:MenuItem" bgcolor="#ddbbcc">
<a href="javascript:void(0)" jwcid="@PageLink" page="Home">Home</a>
<span jwcid="@brownie:MenuItem" bgcolor="#ccddbb">
<a href="javascript:void(0)" jwcid="@PageLink" page="Home">Home</a>
</span>
<span jwcid="@brownie:MenuItem" bgcolor="#ddeecc">
<a href="javascript:void(0)" jwcid="@PageLink" page="SampleList1">SampleList1</a>
</span>
<span jwcid="@brownie:MenuItem" bgcolor="#eeffdd">
<a href="javascript:void(0)" jwcid="@PageLink" page="ValidSample">ValidSample</a>
</span>
<span jwcid="@brownie:MenuItem" bgcolor="#ffffee">
<a href="javascript:void(0)" jwcid="@PageLink" page="NumberFieldSample">NumberFieldSample</a>
</span>
</span>
<span jwcid="@brownie:MenuItem" bgcolor="#eeccdd">
<span jwcid="@brownie:MenuItem" bgcolor="#eeffdd">
<a href="javascript:void(0)" jwcid="@PageLink" page="ValidSample">ValidSample</a>
</span>
<span jwcid="@brownie:MenuItem" bgcolor="#ffffee">
<a href="javascript:void(0)" jwcid="@PageLink" page="NumberFieldSample">NumberFieldSample</a>
</span>
</span>
<span jwcid="@brownie:MenuItem" bgcolor="#ffddee">
<a href="javascript:void(0)" jwcid="@PageLink" page="ValidSample">ValidSample</a>
</span>
</span>
</span>見ての通り、@brownie:MenuItemのbodyには何でも書けちゃいます。
これも次のbrownieでリリースする予定ですが、前にリリースするとか言ってて、全然できてない・・・・。忙しいのが終わったら出します。
