[JS] ツリービュー

タグ :

jQuery の勉強をまとめるシリーズです。
今回はツリービューの使用についてまとめます。

フォルダ構成やファイルのリストを表示するときや、カテゴリーや記事のリストを表示するときに、ただのリストで表示するだけではパッとしない、というか見難い場合があります。
そんな時の表示には、ツリービューが便利です。
ツリー型の表示形式で、フォルダ内のファイル等の表示・非表示が行えます。
ツリービューの作成までの過程をまとめます。

プラグインのインストール

ツリービューは、jQuery plugin として世の中に出回っているので、サイトからダウンロードして使用します。

サイト「http://bassistance.de/jquery-plugins/

ダウンロードされたファイルで使用するのは以下(赤字)になります。

このファイルを動作環境へコピーして使用します。
js ファイルは「(格納先のパス)/js/」へ、
css ファイルと [image] フォルダは「(格納先のパス)/css/」へコピーします。

コピーしたファイルは以下のように HTML で呼び出して使用します。

<link rel="stylesheet" href="css/jquery.treeview.css">
<script src="js/jquery.treeview.js"></script>

treeview()

ツリービューを表示させるために作成するコードは以下になります。

[ 構文 ]
.treeview(プロパティ)
[ コード ]
$(function() {
	$("#tree").treeview({
		collapsed: true,
		animated: "nomal"
	});
});

3,4行目が treeview() プロパティになります。
「collapsed」を true にすると、初期のロード時にツリーを閉じた状態となります。
「animated」は展開する速度を設定でき、”slow”、”normal”、”fast” を記述します。

<h4>ツリービュー</h4>
<div id="wrap">
	<p>カテゴリー</p>
	<ul id="tree">
		<li><a href="?#">カテゴリー1</a>
			<ul>
				<li><a href="#">記事1</a></li>
				<li><a href="#">記事2</a></li>
				<li><a href="#">記事3</a></li>
			</ul>
		</li>
		<li><a href="?#">カテゴリー2</a>
			<ul>
				<li><a href="#">記事4</a></li>
				<li><a href="#">記事5</a></li>
			</ul>
		</li>
		<li><a href="?#">カテゴリー3</a>
			<ul>
				<li><a href="#">記事6</a></li>
			</ul>
		</li>
		<li><a href="?#">カテゴリー4</a></li>
	</ul>
</div>

3行目〜23行目がツリービューの表示内容になります。
4行目〜10行目一つ目のカテゴリーになります。
5行目〜9行目が一つ目のカテゴリーの子カテゴリーになります。

カテゴリーの「+」部分をクリックすると子カテゴリーが表示されます。
サンプルではリンク先を全て「#」に設定してあるのでページ遷移はしません。
jQuery のプロパティの「collapsed」を true に設定しているので、最初のページロード時は全て閉じた状態になります。
「animated」は normal に設定してあるので、展開速度は普通の速さになっています。

まとめ

このようにプラグインを使用すれば非常に簡単に設置できます。
ですが、このプラグインを適用させるには HTML の「ul」タグに id かクラスを設ける必要があります。
WordPress などの HTML コードの自動生成を行うものを使用すると、「ul」タグの特定が困難な場合があります。
(実際にこのブログで使用しているテーマのカテゴリー部分の「ul」タグの生成箇所は特定が困難であきらめました)

ブログでは、フォルダの構成を説明する部分などで使えたらなと思います。
また、WordPress の内部関数を使用せずに自力でカテゴリーを取得し、自力で HTML を生成させれば使用する事は可能です。
(めんどくさいのでやらないですけど。。。)

Share

  • このエントリーをはてなブックマークに追加

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed