読者です 読者をやめる 読者になる 読者になる

Wicket のタブページ作成作業

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;
}

表示は以下のとおり。(キャプチャ)

f:id:posturan:20160313190310j:plain