Ajaxライブラリ使用サンプル集

手軽なツリービュー

jQuery Treeviewを使うと、リストタグ（ulとli）だけで作った構成を簡単にツリービューに表示できる。
jQuery Treeviewは、Jorn Zaefferer氏 （Jornのoは上に‥がついたもの）が開発した。MITライセンス。
「jquery.js」と、「jquery.treeview.js」を使用する。

下が基本サンプル。
サンプル1
下のサンプルのように、フォルダやファイルのアイコンを表示したり、アニメーションで開閉もできる。
サンプル2
jquery.jsを読み込む

まず、jQueryサイトからjquery.jsをダウンロードし、外部jsファイルとして読み込む。

または、Googleの「The AJAX Libraries API」経由でjQueryをダウンロードさせることもできる。
Google AJAX Libraries APIでは、jQueryのほかに、Prototype、script.aculo.us、MooTools、Dojoがサポートされている。 (関連記事)

Google AJAX APIを使ってjQueryをgoogleからダウンロードさせるには、 <head>部に以下のように書く。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2");</script>
バージョンを「1.2」とすることで「1.2.x」といった最新版をロードしてくれる。
jQuery Treeview ver.1.4は、jQueryのバーションは1.2で動作。
ページの最上部へ

jquery.treeview.jsとjquery.treeview.cssを読み込む

jQuery plugin:Treeview サイトから一式ダウンロードする。
css、jsファイルと「images」フォルダがダウンロードされる。「images」はパスの関係上、jquery.treeview.cssファイルと同じ階層に置く（またはcssでパスを変更）。

<head>部に、ダウンロードした「jquery.treeview.css」と「jquery.treeview.js」を読み込ませる。パスは自分のサイトに合わせる。
<link rel="stylesheet" href="css/jquery.treeview.css" />
<script src="../js/jquery.treeview.js" type="text/javascript"></script>　←jquery.jsの後に書くこと
このあとに、下記のスクリプトを書き込む。（<head>内）
<script>
$(document).ready(function(){
$("#example").treeview();　←赤字部分のid名は任意。リストと連動させる。
});
</script>
ページの最上部へ

リストタグでの調整
上記のjsソースで、
id名は好きなもので良い。ツリービューを指定するリストのulにそのidをつける。
上記のid「#example」をulに適用するとソースはこうなる。
<ul id="example" class="treeview">　←ここでのclass名はデザインを決定する。下記参照。
<li>・・・</li>
<li>・・・</li>
・・・
</ul>
上のソースでclass名は「treeview」だがこれはデフォルト。下記の中から選んで書く。このclass名により、 用意されたデザインが選択される。
class 表示
treeview デフォルト（＋−のアイコンをクリックして開閉。ラインは点線）
treeview-red アイコンとラインが赤。ラインは実線
treeview-black アイコンとラインが黒。ラインは実線
treeview-famfamfam ＋−のアイコンが丸くて可愛いめ。ライン無し。
filetree デフォルトに、フォルダやファイルのアイコンが追加表示される

リストタグは入れ子にしても正しく階層にツリー表示される。
あらかじめ閉じておきたい<li>には<li class="closed">を指定しておく。

ツリー全体を囲むulのクラスに「filetree」を指定すると、フォルダやファイルのアイコンが適用されるが、
フォルダ画像にしたい場合は<span class="folder">○○○</span>を、
ファイル画像にしたいなら<span class="file">○○○</span>を指定する。

ソースは下記のようになる。これはサンプル2のソース。
<span class="boldtxt">サンプル2</span>
<ul id="sitemap" class="filetree">

<li class="closed"><span class="folder">フォルダ1</span>

<ul>

<li><span class="file"><a href="#">ファイル1-1</a></span></li>

<li class="closed"><span class="folder">フォルダ1-2</span>

<ul>

<li><span class="file"><a href="#">ファイル1-2-1</a></span></li>

<li><span class="file"><a href="#">ファイル1-2-2</a></span></li>

</ul>

</li>

<li><span class="file"><a href="#">ファイル1-3</a></span></li>

</ul>

</li>

<li class="closed"><span class="folder">フォルダ2</span>

<ul>

<li><span class="file"><a href="#">ファイル2-1</a></span></li>

<li><span class="file"><a href="#">ファイル2-2</a></span></li>

<li><span class="file"><a href="#">ファイル2-3</a></span></li>

</ul>

</li>

<li><span class="file"><a href="#">ファイル1</a></span></li>

</ul>
ページの最上部へ

その他のOption

アニメーションで開閉するには、<head>部のjsに「animated: "fast"」を加える。
また、「collapsed: true,」を指定するとすべてが折り畳まれた状態になり、falseだと何も起こらない。

サンプル2はアニメーション表示にした。jsは下記の通り。
<script>
$(function(){
$("#sitemap").treeview({
animated: "fast"
});
});
</script>

このほか、jquery.treeview.jsをダウンロードした時に同梱される「Demos」や、 jQueryサイトの「Treeview - options」を参考に。

ページの最上部へ