CSS, HTML, JavaScript でツリー表示

使い方

次のファイルをダウンロードして、適当な場所におきます。また、別途 prototype.js が必要です。

つぎのように html を書きます。

<HTML><HEAD>
<!-- tree.css ファイルを読み込む -->
<LINK rel=stylesheet type="text/css" href="tree.css">
<TITLE>test</TITLE>
<script type="text/javascript" language="JavaScript" src="prototype.js"></script>
<!-- tree.js ファイルを読み込む -->
<script type="text/javascript" language="JavaScript" src="tree.js"></script>
</HEAD><BODY>

<!--
  -- ツリー表示のうち、途中のノードの部分は treeNode クラスな div にする。
  -- ツリー表示のうち、葉の部分は treeLeaf クラスな div にする。
  -- それらの div を入れ子にして書く。
--->

<div class="treeNode">
  root
  <div class="treeNode">
    A
    <div class="treeLeaf"> 1 </div>
    <div class="treeLeaf"> 2 </div>
  </div>
  <div class="treeNode">
    B
    <div class="treeLeaf"> 1 </div>
    <div class="treeNode">
      b
      <div class="treeLeaf"> 1 </div>
      <div class="treeLeaf"> 2 </div>
    </div>
    <div class="treeLeaf"> 2 </div>
    <div class="treeLeaf"> 3 </div>
  </div>
  <div class="treeLeaf"> BC </div>
  <div class="treeNode">
    C
    <div class="treeLeaf"> 1 </div>
    <div class="treeLeaf"> 2 </div>
    <div class="treeLeaf"> 3 </div>
  </div>
</div>

</BODY>
</HTML>

そうすると、使用例のようなツリー表示になります。

ライセンス

tree.js、tree.css 、サンプル html コードのライセンスは、 http://creativecommons.org/licenses/by/2.5/ 「帰属 2.5」です。

node_minus.gif, node_plus.gif は、 linux 上の GTK な Firefox の履歴サイドバー表示で、日付とサイト順で表示されたツリーを xwd したものから、 gimp で切り出したものです。だからたぶん、フリーなライセンスだとおもいます。。。

2006/08/07 by Shigeru Hagiwara

変更履歴

2006/09/11 ライセンスを「帰属 - 同一条件許諾 2.5」から「帰属 2.5」に変更しました。
2006/08/07 公開

moreslowly.jp top

CSS, HTML, JavaScript でツリー表示

使い方

ライセンス

変更履歴

使用例