Lesson 06 階層の構造ごと表示するツリー型ナビゲーション - Webデザイン表現&技法の新・ナビゲーション編

Webデザイン 表現&技法の 新・スタンダード

Lesson06

階層の構造ごと表示する ツリー型ナビゲーション

制作・文

栗林宏之（ビーズスタジオ）

jQuery の「Treeview」プラグインを利用した開閉可能なツリー型ナビゲーション。不要な部分は畳んでおけるので、ページ数が多い、階層が深いサイトなどで利用しやすい。

まずは Treeviewプラグインを公開サイト（http://bassistance.de/jquery-plugins/jquery-plugin-treeview/）から入手する。ページ中段の「Download」をクリックして本体をダウンロードできる【1-1】。


【1-1】Treeview プラグイン公開サイト

ダウンロードしたデータを解凍し、4つのJSファイル「jquery.js」「jquery.cookie. js」「jquery.treeview.js」「demo.js」、1つのCSSファイル「jquery.treeview.css」を適当な場所にコピーする【2-1】。その後、head内でJSファイルとCSSファイルを読み込む設定をする【2-2】。


【2-1】ファイルの設置例


【2-2】設置した階層に合わせてパスを指定する

リストを表示したい場所に指定のソース を記述する。階層ごとに<ul><li>～ </ li></ul>を追加していくと、見た目もそのままの状態で表示できる。

フォルダアイコンを表示させたい箇所にはタグにクラス名"folder"、ファイルアイコンを表示させたい箇所には"file"と記入する。また、デフォルトではすべての階層が展開された状態で表示されるが、<li>タグにクラス名"closed"を入れれば閉じた状態で表示される【3-1】。


【3-1】<ul><li>タグの入れ子で階層を表現している

Treeview プラグインでは<ul>タグに指定される id で機能や動作、class でデザインを変更できる機能が用意されている。おもな機能やデザインは【4-1】の通り。


【4-1】





【4-2】id"treecontrol" 内の<a>タグに対応。並ぶ順番が固定なので、「展開⇔格納」のみ使用したいときは<a>タグを消さず、非表示にする必要がある



【4-3】class"filetree"のデザイン



【4-4】class"treeview-red"のデザイン

class"filetree"を選択した場合、リンクの先頭にアイコンが表示されるが、既存のCSSファイルをカスタマイズすることで自由にデザインを変更できる。

付属の jquery.treeview.css 内の下部にアイコンを指定した記述がある。新しいアイコンとテキストを囲った<span>タグのclass名を紐付けすればいくつでも追加が可能となる。

また、開閉できるフォルダにあたる部分は、展開時・格納時でアイコンが変更される。そのまま設置すると展開時のアイコン、格納時は<li>タグに自動でclass"expandable"が適用されるので、li.expandable として設定。格納時のアイコンを指定するだけで動作する【5-1】。


【5-1】テキストを囲む<span>タグにクラスを指定することでアイコンを増減できる

クラス名を変更することによって自由にアイコンを変更できる【6-1】。

またHTMLに限らず、EXCEL、WORD、PDF 等のファイルを公開するときなどでもアイコンを対応させておけば、リンク先データを直感的に把握でき便利だ【6-2】。


【6-1】


【6-2】