windowsのエキスプローラのような構造表示を行えるjQueryプラグイン「Dynatree」を試してみた。 サイトマップ表示などで使えるので忘れないよう記録しておく。
1.ダウンロード
次のサイトからDynatreeをダウンロードすることができる。
https://code.google.com/p/dynatree/
2.インストール
①次のjsファイルをサーバにアップロードする。
jquery.min.js、jquery-ui.js、jquery.cookie.js、jquery.dynatree.js
②skinフォルダーにはcssとイメージファイルが含まれているので、このフォルダーごとサーバに
アップロードする。
3.ツリー構造の設定
ツリー構造をHTMLとJavaScriptを使って設定する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-type" content="text/javascript">
<script type="text/javascript" src="https://shiba-sub2.sakuraweb.com/js/jquery.min.js"></script>
<script type="text/javascript" src="https://shiba-sub2.sakuraweb.com/js/jquery-ui.js"></script>
<script type="text/javascript" src="https://shiba-sub2.sakuraweb.com/js/jquery.cookie.js"></script>
<link href="https://shiba-sub2.sakuraweb.com/css/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="https://shiba-sub2.sakuraweb.com/js/jquery.dynatree.js" type="text/javascript"></script>
<TITLE>Tree構造</TITLE>
<style type="text/css">
</style>
</head>
<body>
<div id="tree">
<ul id="treeData">
<li id="id1" class="folder">テレビ局
<ul>
<li id="id1.1">キー局
<ul>
<li id="id1.1.1" data="url:'http://www.nhk.or.jp/'">HNK</li>
<li id="id1.1.2" data="url:'http://www.ntv.co.jp/'">日本テレビ</li>
<li id="id1.1.3" data="url:'http://www.tbs.co.jp/'">TBS</li>
<li id="id1.1.4" data="url:'http://www.fujitv.co.jp/index.html'">フジテレビ</li>
<li id="id1.1.5" data="url:'http://www.tv-asahi.co.jp/'">テレビ朝日</li>
<li id="id1.1.6" data="url:'http://www.tv-tokyo.co.jp/'">テレビ東京</li>
</ul>
</li>
<li id="id1.2">ローカル局
<ul>
<li id="id1.2.1" data="url:'http://s.mxtv.jp/'">東京メトロポリタンテレビジョン</li>
<li id="id1.2.2" data="url:'http://www.tvk-yokohama.com/'">テレビ神奈川</li>
<li id="id1.2.3" data="url:'http://www.chiba-tv.com/'">千葉テレビ</li>
</ul>
</li>
</ul>
</li>
<li id="id2" class="folder">ニュース
<ul>
<li id="id2.1" data="url:'http://www.asahi.com/'">朝日新聞</li>
<li id="id2.2" data="url:'http://www.yomiuri.co.jp/'">読売新聞</li>
<li id="id2.3" data="url:'http://mainichi.jp/'">毎日新聞</li>
</ul>
</li>
<li id="id3" class="folder">検索サイト
<ul>
<li id="3.1" data="url:'http://www.yahoo.co.jp/'">Yahoo!</li>
<li id="3.2" data="url:'http://www.google.com/webhp?hl=ja'">Google</li>
<li id="3.3" data="url:'http://www.goo.ne.jp/'">Goo</li>
<li id="3.4" class="folder">ファイル
<ul>
<li id="id3.4.1">子ファイル1</li>
<li id="id3.4.2">子ファイル2</li>
<li id="id3.4.3">子ファイル3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
var tree = $("#tree").dynatree({
// clickFolderMode フォルダクリック時の挙動を指定。
// 1:アクティブ, 2:展開, 3:アクティブ+展開 デフォルトは3。
clickFolderMode: 3,
// fx ノードの展開エフェクトを指定
fx: { height: "toggle", duration: 200 },
// debugLevel デバッグレベルを指定。 0:quiet, 1:normal, 2:debug
// デフォルトは1、初期化時にコンソールに情報が出力されるので気になる場合は0を指定。
debugLevel: 0,
onActivate: function(node) {
if( node.data.url )
window.open(node.data.url);
$("#echoActive").text(node.data.title);
},
onDeactivate: function(node) {
$("#echoActive").text("-");
}
});
</script>
</body>
</HTML>