リンク
<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/"]
]
]
]