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

Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

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

Javascript ライブラリ

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

dynatree


ファイルツリーを実装できるプラグインは初めて知った。クロスブラウザ対応されているかが書かれていなかったのでわからないが、これは使えそう。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"}
        ]
    });
});


上記の実装でこのようなファイルツリーが出来上がる。


簡単に実装できて便利。オプションもたくさん用意されているので、Documentationを参照ください。ファイルツリーを検討している方はぜひ。

広告を非表示にする