ナビゲーションメニューに便利な「Treeview」の使い方
jQueryでエクスプローラ風メニューに！
2009年04月01日 06時00分更新
Treeviewの基本的な使い方
Treeviewプラグインを使ったツリー表示を既存のWebサイトに実装するには、以下の手順で作業します。
●HTMLのヘッダー部分の書き換え
まず、HTMLのヘッダー部分にリスト1のタグを追加します。
<link rel="stylesheet" href="http://アップロード先/jquery.treeview.css" />
<script src="http://アップロード先/jquery.js" type="text/javascript"></script>
<script src="http://アップロード先/jquery.treeview.min.js" type="text/javascript"></script>
「アップロード先」となっているところは、実際のアップロード先に応じて書き換えてください。
●ul要素にIDとクラスを割り当てる
次に、ツリー表示にしたいul／li要素で、最上位の階層にあたるul要素にIDとクラスを割り当てます。ID名は自由に付けることができます。一方、クラス名はツリーのデザインに合わせて以下の表の中から選びます。
| クラス | デザイン |
|---|---|
| treeview | 一般的なデザイン（「+」「-」のアイコンをクリックして開閉し、ツリーの線は点線） |
| treeview-red | アイコン／線とも赤色で、線は実線 |
| treeview-black | アイコン／線とも黒で、線は実線 |
| treeview-famfamfam | ツリーの線がなく、「+」「-」のアイコンだけが表示される |
| filetree | フォルダ／ファイルのアイコンが表示されるツリー |
たとえば、最上位のul要素に「tv」というID名を割り当て、クラス名に「treeview」を使う場合は、以下のように書きます。
<ul id="tv" class="treeview">
<li>・・・</li>
<li>・・・</li>
・・・
</ul>
 |
|---|
| 「class="treeview"」の場合の表示例 |
●TreeviewのJavaScriptを実行する
最後に、HTML内に以下のJavaScriptを追加して、ページの読み込みが終わったときに、TreeviewのJavaScriptを実行するようにします。
<script type="text/javascript">
$(document).ready(function() {
$("#ツリー化する部分のID").treeview();
});
</script>
3行目の「ツリー化する部分のID」には、ul要素に割り当てたID名を指定します。たとえば、ツリー化するul要素に「tv」というID名を割り当てた場合には、以下のように書きます。
$("#tv").treeview();
アニメーション、Ajax……いろいろできるカスタマイズ
Treeviewメソッドにオプションのパラメータを指定することで、ツリーの表示方法をカスタマイズできます。
| パラメータ | 内容 |
|---|---|
| animated : 速度 | ツリーの開閉をアニメーション表示する |
| collapsed : true | ツリーを閉じた状態で表示する |
| unique : true | 同一階層にあるツリーは1つしか開かないようにする |
| toggle : 関数 | ツリーを開閉したときに関数を実行する |
たとえば、Treeviewメソッドを以下のように書くと、初期状態ではツリーが閉じた形で表示され、開閉時にアニメーションするようになります。
$("#ツリー化する部分のID").treeview({ collapsed : true, animated : "fast" });
Treeviewは紹介した以外にも、ツリーの要素をAjaxで読み込んだり、開閉の状態をcookieに保存したり、といったカスタマイズが可能です。以下のURLにあるTreeviewプラグインのドキュメントを参照して、いろいろ試してみるとおもしろいでしょう。
http://docs.jquery.com/Plugins/Treeview/treeview
なお、筆者のWebサイトに、Treeviewプラグインを使ったサンプルページを3つ、作ってみました。実際のソースコードの書き方は、これらのページを参考にしてください。
- http://www.h-fj.com/ascii/jquery_treeview/sample1.html
- http://www.h-fj.com/ascii/jquery_treeview/sample2.html
- http://www.h-fj.com/ascii/jquery_treeview/sample3.html
