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>
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を参照ください。ファイルツリーを検討している方はぜひ。