jQueryでファイルツリーが作れる「dynatree」

これはいつか使う機会がありそうということでご紹介。ファイルツリーを実装することの出来るjQueryプラグイン。

ファイルツリーを実装できるプラグインは初めて知った。クロスブラウザ対応されているかが書かれていなかったのでわからないが、これは使えそう。Documentationもしっかりしていていいですな。以下に実装方法を書いておく。

実装方法

最も基本的な実装方法を書いておく。

HTML

headタグ内で以下を読み込む。多めだな。

<script src='jquery/jquery.js'></script>
<script src='jquery/jquery-ui.custom.js'></script>
<script src='jquery/jquery.cookie.js'></script>

<link rel='stylesheet' href='skin/ui.dynatree.css'>
<script src='jquery.dynatree.js'></script>

bodyタグでは以下の一行だけマークアップ。

<div id="tree"> </div>

JavaScript

JSは以下のようにコーディング。children以下にJSON形式でファイルツリー構造を作っていくようだ。分かりやすくていいね。

$(function(){
    $("#tree").dynatree({
        onActivate: function(node) {
            alert("You activated " + node.data.title);
        },
        persist: true,
        children: [
            {title: "Item 1"},
            {title: "Folder 2", isFolder: true,
                children: [
                    {title: "Sub-item 2.1"},
                    {title: "Sub-item 2.2"}
                ]
            },
            {title: "Item 3"}
        ]
    });
});