トップ 差分 一覧 ソース ヘルプ RSS ログイン

Tree

Tree

階層化されたデータを表示するためのツリーコントロールを提供します。階層化されて保持されるデータはTreeNodeのもので、個々のTreeNodeはその中で必ず一意に識別されます。

ブラウザ上では、以下のスクリーンショットのように表示されます。

 Treeの例

Treeを使った実際のコードは以下のようになります(このコードは先ほどのスクリーンショットを取るために作成されたものです)。

 Tree のスタイルシート

ツリーコントロールを使用すると、そのスタイルシート(tree.css)とjavascript(tree.js)とが/click/tree以下に自動的に配置します。このスタイルシートを利用するには、PageImportsを参照するだけです。

 Tree のカスタマイズ

以下のリストは、ツリーのアイコンを表示するのに使用されるスタイルシートのクラスです。tree.cssを変更して別のアイコンを利用するのも簡単です。これらのクラスは全て<span>要素の中で指定されていることに注意してください。

- ツリーのリーフノード。

<span class="leafIcon">

- 開いた状態のノード。

<span class="expandedIcon">

- 閉じた状態のノード。

<span class="collapsedIcon">

Credit goes to Wicket for the following:

  • images/folder-closed.png
  • images/folder-open.png
  • images/item.png