Wicket の タブページデザインは、Wicket の example デモページにあるように、
org.apache.wicket.extensions.markup.html.tabs.ITab
のリスト(List)を作成し、
org.apache.wicket.extensions.markup.html.tabs.AbstractTab
の実装をリストに格納して、AbstractTab が
org.apache.wicket.markup.html.panel.Panel
を生成するようにする。
タブのクリックで JavaScript(AJAX) で Panel コンテンツを表示するようにするなら、
このリストで
org.apache.wicket.extensions.ajax.markup.html.tabs.AjaxTabbedPanel
を作る。
問題は、タブのデザインの作業であって、タブを配置する以下のような div タグを書いて
<div wicket:id="tabs" id="tabs"></div>
この div タグBODYとして展開された結果の ul li タグを採取してから、デザインすることになる。
つまり、一度 Wicket を実行してHTML表示させてからCSSを書く作業をするのが
効率的である。
3つの AbstractTab を、List<ITab> に格納したケースは以下のように、
class="tab-row"
class="tab-panel"
が作られるので、これを基にCSSを書いていく。
<div id="tabs">
<div class="tab-row">
<ul>
<li class="tab0 selected"><a href="..." id="linkc"><span>Tab-1</span></a></li>
<li class="tab1"><a href="..." id="linkd"><span>Tab-2</span></a></li>
<li class="tab2 last"><a href="..." id="linke"><span>Tab-3</span></a></li>
</ul>
</div>
<div class="tab-panel">
<br/>
This is tab-panel 1
<br/>
<br/>
</div>
</div>
この2年前ぐらい前から多くなってきたフラットなデザインなら、
CSS を以下のように書く。
@CHARSET "UTF-8";
#tabs{
width: 700px;
margin: 50px auto;
}
div.tab-row ul{
zoom: 1;
background: #c9c3c4;
border-bottom: 3px solid #0033ff;
list-style: none;
margin: 0 auto;
padding: 0;
}
div.tab-row ul:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }
div.tab-row ul li { float: left; text-align: center; }
div.tab-row ul li:last-child { background: none; }
div.tab-row ul li a {
display: block;
width: 140px;
padding: 8px 0;
text-decoration: none;
color: #222222;
}
div.tab-row ul li a:hover {
background: #3395ff;
color: #ffffff;
}
div.tab-row ul li.selected,
div.tab-row ul li.selected a,
div.tab-row ul li.selected a:hover {
background: #0033ff;
color: #ffffff;
}
div.tab-panel {
clear: both;
overflow: hidden;
background: #f7f7f7;
width: 660px; /* #tabs width - 40px */
height: 200px;
padding: 20px;
}
表示は以下のとおり。(キャプチャ)