リンク


全部開く 全部閉じる


これは、もう少し使いやすいようにYAHOO.tato.treeクラスとmkTreeByArrayメソッドを.js外部ファイル化し、 簡単にしたものです。
今回の圧縮ファイル
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="./css/screen.css">
<link rel="stylesheet" type="text/css" href="./css/folders/tree.css">
<style>body {margin:12px;}</style>
<script type="text/javascript" src="./js/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="./js/treeview/treeview-min.js" ></script>
<script type="text/javascript" src="./js/event/event-min.js" ></script>
<!-- カスタマイズした.js外部ファイル -->
<script type="text/javascript" src="./js/tato/tree/mktreebyarray.js" ></script>
リンク 
<div id="treeDiv1"></div>
<script type="text/javascript">
var data=[ /*ここへメニュー用JSONデータを書きます*/ ];
//ページ読み込み後に起動します
YAHOO.util.Event.addListener(window, "load", 
  //初期化
  function(){
    test1 = new YAHOO.tato.tree("treeDiv1");   //"treeDiv1"はメニューを出力するDIV名です
    test1.mkTreeByArray(data);                 //ここでメニュー用JSONデータ「data」を渡します
  }
);
</script>
<a href="javascript:test1.tree.expandAll()">全部開く</a>
<a href="javascript:test1.tree.collapseAll()">全部閉じる</a>
メニュー用JSONデータ例
サンプル
  data=[
           ["ラベル1" , "http://zzz.example.com/1/"] ,
           ["ラベル2" , "http://zzz.example.com/2/"] ,
           ["ホルダ1" , 
               [
                   ["ラベル3" , "http://zzz.example.com/3/"]
               ]
           ]
       ]
あらかじめホルダを開いておきたければ、次のように、"ホルダ"内の最初に["_open"]という配列を追加します(無いか["_close"]なら閉じます)。
サンプル
  data=[
           ["ラベル1" , "http://zzz.example.com/1/"] ,
           ["ラベル2" , "http://zzz.example.com/2/"] ,
           ["ホルダ1" , 
               [
                   ["_open"],
                   ["ラベル3" , "http://zzz.example.com/3/"]
               ]
           ]
       ]