Wiki Navigation

Tree View

概要

ツリーを表示します。
ツリーはディレクトリ、ファイルから構成されます。（以下、2つまとめてアイテムと表記します。）
アイテムをD&Dして移動することが可能です。

利用方法

<head>
  <script src="../src/javascripts/spinelz_lib/prototype.js" type="text/javascript"></script>
  <script src="../src/javascripts/spinelz_lib/scriptaculous.js" type="text/javascript"></script>
  <script src="../src/javascripts/spinelz_lib/spinelz_util.js" type="text/javascript"></script>
  <script src="../src/javascripts/spinelz_lib/json.js" type="text/javascript"></script>
  <script src="../src/javascripts/spinelz/treeview.js" type="text/javascript"></script>
  <link rel="stylesheet" href="../src/stylesheets/spinelz/treeview.css" type="text/css">
  <style type="text/css">
    .group_icon {
      background-image: url(../src/images/spinelz/treeview_group.gif);
    }
    .user_icon {
      background-image: url(../src/images/spinelz/treeview_user.gif);
    }
    .original_file {
      background-image: url(../src/images/spinelz/treeview_file.gif);
    }
  </style>
</head>
<body>
  <ul id="webtree">
    <li id="root" class="dir">root
      <ul>
        <li id="programing" class="dir group_icon">Programing
          <ul>
            <li id="tool" class="dir">Tool
              <ul>
                <li id="eclipse" class="file"><span onclick="alert('Eclipse')">Eclipse</span></li>
                <li id="rails" class="file" onclick="alert('RadRails')">RadRails</li>
              </ul>
            </li>
            <li id="reference" class="dir group_icon">Reference
              <ul>
                <li id="java" class="file">Java</li>
                <li id="ruby" class="file">Ruby</li>
              </ul>
            </li>
          </ul>
        </li>
        <li id="search" class="dir">Search Engine
          <ul>
            <li id="yahoo" class="file"><a href="http://www.yahoo.co.jp">Yahoo</a></li>
            <li id="google" class="file">Google</li>
            <li id="user" class="file user_icon">User</li>
          </ul>
        </li>
      </ul>
    </li>
    <li id="empty" class="dir">empty dir</li>
  </ul>

  <script type="text/javascript">
    var treeview = new TreeView('webtree', {move: true});
  </script>
</body>

補足

li要素がアイテムとして構築されます。
- class名に"dir"を指定するとディレクトリとなります。
- class名に"file"を指定するとファイルとなります。
ディレクトリは子要素としてディレクトリとファイルを持つことができます。
- 子要素はul要素で囲んでください。
"dir"や"file"の他に任意のclass名を付与することでアイコンを変更することができます。
- 例： <li id="reference" class="dir group_icon">Reference

API

コンストラクタ(element)

引数	説明
element	HTML要素のID。この要素を解析してツリーを構築します。

オプション 第2引数として以下のオプションを指定することができます。オプションを指定するかどうかは任意です。

オプション名	デフォルト値	説明
cssPrefix	'custom_'	カスタムスタイルシートのプレフィックス文字列。
dirSymbol	'dir'	ディレクトリを表すクラス名。
fileSymbol	'file'	ファイルを表すクラス名。
open	true	初期状態でツリーを展開するかどうか。
closeIds	[]	初期状態で閉じたままにするディレクトリをIDで指定する。openオプションがtrueのときのみ有効。
callBackFunctions	false	ツリーを選択されたときに呼ばれるコールバック関数。配列で複数指定可。
dirSelect	true	ディレクトリを選択できるかどうか。
fileSelect	true	ファイルを選択できるかどうか。
noSelectedInsert	true	addChildBySelectedメソッドで、ディレクトリを選択されていない場合にアイテムの追加を許すかどうか。trueの場合、element要素の直下に追加される。
iconIdPrefix	'treeview_icon'	アイコンに付与されるIDのプレフィックス。
move	false	アイテムのD&Dを可能にするかどうか。
unselected	Prototype.emptyFunction	選択されているアイテムが非選択状態になったときに呼び出される関数。
enableUnselected	true	アイテムの非選択を可能にするかどうか。
sortOptions	{}	Sortableに渡されるオプション。
emptyImg	false	ディレクトリが子要素を持っていないときに画像を表示するかどうか。（真であれば表示する）
initialSelected	false	ディレクトリまたはファイルのIDが渡された場合、ツリー構築と同時に選択状態にする
build	true	ツリーを構築するかどうか。
openDir	Prototype.emptyFunction	ディレクトリがオープンされたときに呼ばれるコールバック関数。ディレクトリ要素とその要素がもつコンテナが引数として渡されます。
closeDir	Prototype.emptyFunction	ディレクトリがクローズされたときに呼ばれるコールバック関数。ディレクトリ要素とその要素がもつコンテナが引数として渡されます。

openAll()

全てのディレクトリを開きます。openDirコールバックは呼ばれません。

openAll()

全てのディレクトリを閉じます。closeDirコールバックは呼ばれません。

open(element)

指定されたディレクトリを開きます。openDirコールバックが呼ばれます。

引数	説明
element	ディレクトリのID、またはDOM。

close(element)

指定されたディレクトリを閉じます。cloesDirコールバックが呼ばれます。

引数	説明
element	ディレクトリのID、またはDOM。

getClosedIds()

閉じた状態のディレクトリのIDの配列を返します。

Download in other formats:

Plain Text