その他のJSライブラリフォルダツリー
- dTree〔エクスプローラ風〕
- Sitemap Styler〔開閉式サイトマップ〕
- YUI Library: Tree View Control〔フォルダスタイル〕
dTree
エクスプローラ風
unknown
a.add(ノードID, 親ノードID, "ノード名", "URL", "タイトル", "ターゲット", "閉じてる時の画像URL", "開いてる時の画像URL", 開閉フラグ);
dTree
IE 5+、Netscape 6+、Opera 7+、Mozilla
著作権表示
[JS]dtree.js、[CSS]dtree.css
エクスプローラ風の開閉式フォルダツリーを簡単に実装できるJSライブラリです。

設置方法はとってもシンプル!
まず、「dtree.css」と「dtree.js」をhead要素内で読み込みます。
<head> <script type="text/javascript" src="dtree.js"></script> <link rel="stylesheet" type="text/css" href="dtree.css" /> </head>
次に、ツリーを格納するオブジェクトを生成し、add()関数にノードを指定していきます。 このtreeObj部分には、任意のツリーオブジェクト名を指定可能です。 そのため、1ページ内に複数のツリーを埋め込む場合は、このツリーオブジェクト名を別々にすればOKです。
ノードをすべて開く:treeObj.openAll();
ノードをすべて閉じる:treeObj.closeAll();
任意のノードを開く:treeObj.openTo(ノードID, true);
上記の関数があらかじめ用意されているのもうれしい限り。
<body> <div class="dtree"> <p> <a href="javascript: treeObj.openAll();">open all</a> | <a href="javascript: treeObj.closeAll();">close all</a> | <a href="javascript: treeObj.openTo(4, true);">open to: Node 4</a> </p> <script type="text/javascript"> var treeObj=new dTree('treeObj'); treeObj.add(0,-1,'TOP'); treeObj.add(1,0,'PHP','../../index.php?t=php'); treeObj.add(2,1,'インストール・動作環境設定','javascript:void(0)'); treeObj.add(3,2,'Apache&PHP のインストール','../../index.php?t=php&p=apache_install'); treeObj.add(4,3,'まずApache(HTTPサーバ)をインストール','../../index.php?t=php&p=apache_install#a_apache'); treeObj.add(5,2,'php.iniの設定','../../index.php?t=php&p=ini'); treeObj.add(6,0,'JavaScript','../../index.php?t=js'); treeObj.add(7,0,'Ajax','../../index.php?t=ajax'); treeObj.add(8,0,'CSS','../../index.php?t=css'); treeObj.add(9,0,'Image Gallery','../../index.php?t=ajax&p=galleryjs','画像JSライブラリ','','','/content/img/imgfolder.gif'); treeObj.add(10,9,'Couloir','../Couloir/index.html','Couloir'); treeObj.add(11,9,'GreyBox','../GreyBox5/index.html','GreyBox'); treeObj.add(12,9,'Lightbox','../lightbox2/index.html','Lightbox'); treeObj.add(13,0,'ゴミ箱','javascript:void(0)','','','/content/img/trash.gif'); document.write(treeObj); </script> </div> </body>
ノードトップだけは、親ノードがないためtreeObj.add(0,-1,'ノード名');
のように親ノードに-1を指定する必要があります。
Sitemap Styler
開閉式サイトマップ
unknown
Sitemap Styler: Style your Sitemaps with CSS and Javascript
JavaScriptとCSSを使った開閉式ツリーです。 ページのロード時にツリーを生成しています。 複数配置する場合は、ツリーを格納するオブジェクト名を変えてあげればOKです。

サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/sitemapstyler/sitemapstyler.css" media="screen" /> <link rel="stylesheet" type="text/css" href="/content/lib/sitemapstyler/sitemapstyler2.css" media="screen" /> <script type="text/javascript" src="/content/lib/sitemapstyler/sitemapstyler.js"></script> <script type="text/javascript" src="/content/lib/sitemapstyler/sitemapstyler2.js"></script> <script type="text/javascript"> window.onload=function(){ sitemapstyler(); sitemapstyler2(); } </script> <style type="text/css"> * { margin:0; padding:0; } body{ margin:0 auto; padding:0; background-color:#666; color:#666; font:81%/1.5 verdana,sans-serif; text-align:center; } #wrap { width:500px; margin:0 auto; padding:0; background-color:#fff; text-align:center; } #content { margin:0 20px; padding:0; text-align:left; } #footer { margin:1em 0 0 0; padding:.2em .5em; background-color:#999; color:#fff; font-size:78%; text-align:right; } #footer * { font-style:normal; font-size:100%; color:#fff; } h1 { margin:0 0 1em 0; padding:.5em 1em; background-color:#999; color:#fff; font-size:100%; text-align:left; } h1 a { color:#fff; } h2 { margin:1em 0; } p { margin:1em 0; padding:0; } img { border:0; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <p>参照:<a href="http://cssglobe.com/post.asp?id=903">Sitemap Styler: Style your Sitemaps with CSS and Javascript</a></p> <div id="content"> <h2>Example1</h2> <ul id="sitemap"> <li><a href="#">First link</a> <ul> <li><a href="#">First link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Fourth link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Second link</a> <ul> <li><a href="#">First link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Second link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Third link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Fourth link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Fifth link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Fifth link</a></li> </ul> </li> </ul><!-- div#sitemap --> <h2>Example2</h2> <ul id="sitemap2"> <li><a href="#">First link</a> <ul> <li><a href="#">First link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Fourth link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Second link</a> <ul> <li><a href="#">First link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Second link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Third link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Fourth link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Fifth link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> <li><a href="#">Fifth link</a></li> </ul> </li> <li><a href="#">Fifth link</a></li> </ul> </li> </ul><!-- div#sitemap2 --> </div><!-- div#wrap/div#content --> </div><!-- div#wrap --> </body> </html>
YUI Library: Tree View Control
フォルダスタイル
unknown
The Yahoo! User Interface Library (YUI)

サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/yui/build/treeview/treeview.css?_yuiversion=2.4.1" /> <link rel="stylesheet" type="text/css" href="/content/lib/yui/build/treeview/tree.css?_yuiversion=2.4.1" /> <script type="text/javascript" src="/content/lib/yui/build/yahoo/yahoo.js?_yuiversion=2.4.1"></script> <script type="text/javascript" src="/content/lib/yui/build/event/event.js?_yuiversion=2.4.1"></script> <script type="text/javascript" src="/content/lib/yui/build/treeview/treeview.js?_yuiversion=2.4.1"></script> <style type="text/css"> * { margin:0; padding:0; } body{ margin:0 auto; padding:0; background-color:#666; color:#666; font:81%/1.5 verdana,sans-serif; text-align:center; } #wrap { width:500px; margin:0 auto; padding:0; background-color:#fff; text-align:center; } #content { margin:0 20px; padding:0; text-align:left; } #footer { margin:1em 0 0 0; padding:.2em .5em; background-color:#999; color:#fff; font-size:78%; text-align:right; } #footer * { font-style:normal; font-size:100%; color:#fff; } h1 { margin:0 0 1em 0; padding:.5em 1em; background-color:#999; color:#fff; font-size:100%; text-align:left; } h1 a { color:#fff; } p { margin:1em 0; padding:0; } img { border:0; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <p>参照:<a href="http://developer.yahoo.com/yui/examples/treeview/folder_style.html">YUI Library » Tree View Control » Folder-Style TreeView Design</a></p> <div id="content"> <p> <a id="expand" href="#">Expand all</a> | <a id="collapse" href="#">Collapse all</a> </p> <div id="treeDiv1"></div> <script type="text/javascript"> //an anonymous function wraps our code to keep our variables //in function scope rather than in the global namespace: (function() { var tree; //will hold our TreeView instance function treeInit() { YAHOO.log("Example's treeInit function firing.", "info", "example"); //Hand off ot a method that randomly generates tree nodes: buildRandomTextNodeTree(); //handler for expanding all nodes YAHOO.util.Event.on("expand", "click", function(e) { YAHOO.log("Expanding all TreeView nodes.", "info", "example"); tree.expandAll(); YAHOO.util.Event.preventDefault(e); }); //handler for collapsing all nodes YAHOO.util.Event.on("collapse", "click", function(e) { YAHOO.log("Collapsing all TreeView nodes.", "info", "example"); tree.collapseAll(); YAHOO.util.Event.preventDefault(e); }); } //This method will build a TreeView instance and populate it with //between 3 and 7 top-level nodes function buildRandomTextNodeTree() { //instantiate the tree: tree = new YAHOO.widget.TreeView("treeDiv1"); //create top-level nodes for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) { var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false); //we'll delegate to another function to build child nodes: buildRandomTextBranch(tmpNode); } //once it's all built out, we need to render //our TreeView instance: tree.draw(); } //This function adds a random number <4 of child nodes to a given //node, stopping at a specific node depth: function buildRandomTextBranch(node) { if (node.depth < 6) { YAHOO.log("buildRandomTextBranch: " + node.index); for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) { var tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false); buildRandomTextBranch(tmpNode); } } } //When the DOM is done loading, we can initialize our TreeView //instance: YAHOO.util.Event.onDOMReady(treeInit); })();//anonymous function wrapper closed; () notation executes function </script> </div><!-- div#wrap/div#content --> </div><!-- div#wrap --> </body> </html>