【Javascript】Yahoo! UIのTreeViewを使う1

Yahoo! UIのTreeViewを使う1

---

Ajaxとともに注目の集まっている分野に、JavaScriptのDHTMLなエフェクトを使ったライブラリ群があります。有名なところでは、Dojoやprototype.jsを利用したscript.aculo.us、Rico、あるいは、Yahoo!が提供しているYahoo! User Interface Library(Yahoo! UI)などです。

これらの他にもいろいろあって、現在は群雄割拠という状態ですが、いずれも、アニメーションやウィジェット、ツリーメニューやカラーエフェクト、ドラッグドロップなどのツールをAjaxな機能とともに提供しているのが特徴です。

それぞれのライブラリには、それぞれの特徴があり、使用方法もさまざまですが、今回は、その中からYahoo! UIのTreeViewメニューを取り上げて、使ってみたいと思います。Yahoo! UIは、軽量で使いやすさが魅力のライブラリですが、今回は、そのTreeメニューのデータを直感的に作成できるように、JSONの形式(参考:JSON/簡単なテスト)で渡す仕組みにして試してみました。

今回のサンプル

→サンプル

今回のサンプルを開くと、右のようなTreeメニューが表示されます。

見慣れたインターフェイスですから使い方を説明するまでもありませんが[+]のアイテムをクリックすれば開き、[-]をクリックすれば閉じます。

Yahoo! UIのTreeについては、ドキュメントやサンプルがここにありますので、詳しくはそちらをご覧ください。

今回のサンプルのポイントは、Treeデータを階層まるごとJSONで渡していることです。

オリジナルのYahoo! UIの使い方にもメニューアイテムをJavaScriptオブジェクトで渡す方法がありますが、ここでは、メニュー階層をJSONの階層に反映することで、作成時にメニューをイメージしやすくしてあります。

メニュー制作者がすることは、下記ソースにあるYahoo! UIの該当.jsや.cssライブラリを読み込み、Tree表示用のDIVを用意してから、下記のような、メニューのためのJSONデータを書くだけです。

つまり、このJSONデータ以外の部分には、ほとんど触る必要がありません。


たとえば、下記のようなメニューのJSONデータを書くと、その右にあるメニュー画像のようになります。

  data = { "ラベル1" : "http://zzz.example.com/1/" ,
           "ラベル2" : "http://zzz.example.com/2/" ,
           "ホルダ1" : {
             "ラベル3" : "http://zzz.example.com/3/" 
           }
  }

また、あらかじめホルダを開いておきたければ、次のように、"ホルダ"内に「"_open" : 1」というプロパティを追加します(0なら閉じます)。

  data = { "ラベル1" : "http://zzz.example.com/1/" ,
           "ラベル2" : "http://zzz.example.com/2/" ,
           "ホルダ1" : {
             "_open"   : 1,
             "ラベル3" : "http://zzz.example.com/3/" 
           }
  }

このように、JSONをTreeメニューの階層に合わせて記述するだけで、簡単に折りたたみメニューを作ることが可能です。 今回のソースは下記の通り。

(*2006.5にYUIはバージョンがv0.10.0になりました。このサンプルは、古いバージョンでも新しいバージョンでもそのまま動作しますが、下記ソースは新しいバージョンで用意された軽量のminバージョンに書き換えてあります。各.jsファイルはYUIのサイトからリンクされたsourceforgeからダウンロードした圧縮ファイルを解凍した/buildディレクトリ下にあります。cssは、/treeview/examples下などにあります。--追記 2006.5.15)

<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-min.js"></script>
<script type="text/javascript" src="./js/treeview-min.js" ></script>
<script type="text/javascript" src="./js/event-min.js" ></script>


リンク
<div id="treeDiv1"></div><!-- ←ここへTreeが表示されます -->

<script type="text/javascript">

//Tree Data(ここへTrreeメニューのデータをJSONで書きます)
// "_open" :1 はメニュートグルを開きます。0なら閉じます。 var data={   "JavaScript" : {       "_open" :1,       "Allabout[JavaScript]" : "http://allabout.co.jp/internet/javascript/",       "JavaScript++かも日記" : "http://jsgt.org/mt/01/",     "Ajax" : {       "_open" :0,       "入門 Ajax/サポート" : "http://jsgt.org/ajax/",       "Ajax:勉強用サンプル&解説" : "http://www.openspc2.org/JavaScript/Ajax/index.html"     },     "DHTML" : {       "_open" :0,       "cross-browser/Examples" : "http://game.gr.jp/js/books/dhtml2/contents.htm"     }   } }

//ここから下は触らなくてもOK
//(namespaceは使わなくても動作します)
YAHOO.namespace('tato');//カスタマイズした関数など用に名前空間を用意しておきます
YAHOO.tato.tree = function(tree,data) {

  this.data = data;
  this.tree = tree;

  //Tree描画 
  this.mkTree = function (oj,node){
    for(var i in oj){
      if(typeof oj[i] != "number"){
        var tmpNode = new YAHOO.widget.TextNode("" + i,node, false);
        if(typeof oj[i] == "string")tmpNode.href= oj[i];
        if(typeof oj[i] == "object"){
          if(oj[i]["_open"]==1)tmpNode.expand();
          this.mkTree(oj[i],tmpNode); 
        }
      }
    }
    tree.draw();
  }
}
//初期化
YAHOO.tato.treeIni = function(){
  var tree = new YAHOO.widget.TreeView("treeDiv1");//treeDiv1は表示するDIVのID名です
  test1 = new YAHOO.tato.tree(tree,data);//ここでTreeデータを渡します
  test1.mkTree(test1.data, tree.getRoot());
}

//ページ読み込み後にカスタマイズ関数YAHOO.tato.treeIni()を起動します
YAHOO.util.Event.addListener(window, 'load', YAHOO.tato.treeIni);

</script>

* YAHOO.namespace('tato');は、名前空間の設定ですが、この場合は、YAHOO.tatoというオブジェクトが生成されますので、それ以降YAHOO.tato.xxxという名前の変数や関数は、たとえば、他のライブラリなどと混ぜて使う際にもバッティングしなくなるので安心です。もちろん、これを使用せずに自分の命名規則で書くことも自由です。addListener()はここでは、windowのonloadイベントに連携していますが、仮に別の場所でwindow.onload=funnction(){}が書いてあっても、上書きされたりはしませんので大丈夫です。window.onloadが先に実行され、次にaddListenerが動作します。