このページの本文へ

jQueryでエクスプローラ風メニューに! (2/2)

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"」の場合の表示例

「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つ、作ってみました。実際のソースコードの書き方は、これらのページを参考にしてください。

前へ 1 2 次へ

Web Professionalトップへ

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く