TopJavaScript > 2007年6月
2007年6月26日

ツリー表示 JavaScript 「dTree」詳解

June 26,2007 2:27 AM
Tag:[, ]
Permalink

dTree によるサブカテゴリーリスト for Movable Type」で紹介した dTree の詳細について、本エントリーにて紹介します。

サンプル
dTreeのサンプルへ

例えば、上のスクリーンショットはエクスプローラー風のツリー表示ですが、設定によってはエクスプローラー風以外のツリー表示も可能です。

内容は概ね配布サイトの説明を訳したものですが、一部、使用した観点でも記しています。

1.コンフィグレーション

下記の項目を事前に設定しておくことで、dTree の動作や表示をカスタマイズすることができます(具体的な設定の流れは3項参照)。いくつかの項目については配布元の Example のページで確認できます。

変数名デフォルト値説明
targetStringtrue全てのノードの target 属性
folderLinksBooleantruetrue の場合、フォルダ名が通常のリンクになり、false の場合は(フォルダのみ)折りたたみ用リンクになります。
useSelectionBooleantruetrue の場合、選択したノードがハイライト表示されます。
useCookiesBooleantrueツリーの状態保持のためにクッキーを使用
useLinesBooleantruetrue の場合、ツリーを表示します。
useIconsBooleantruetrue の場合、アイコンを描画します。false の場合、「+」と「-」のシンプルなアイコンだけが表示されます。ルートノードのアイコンを非表示にしたい場合はこの設定がお勧め。
useStatusTextBooleanfalsetrue の場合、ステータスバーにURLの代わりにカテゴリー名を表示します(ブラウザ依存)
closeSameLevelBooleanfalsetrue の場合、あるノードを開いた時に、他の同一階層ノードを閉じます。また、openAll() と closeAll() は機能しません。
inOrderBooleanfalse親ノードが常に子ノードより先に add される場合、ツリーのスピードアップをする(注:動作未確認です)

設定例:

mytree.config.target = "mytarget";
mytree.config.useCookies = true;

2.API

add()

概要
ツリーにノードを追加します。ツリーを描画する前に起動してください。id, pid と name は必須です。
パラメータ
名前説明
idNumberツリーの中でユニークな番号
pidNumber参照する親ノード番号。ルート番号は「-1」。
nameStringノード名
urlStringノードの URL
titleStringノードの title 属性
targetStringノードの target 属性
iconStringアイコンを使用する場合の画像ファイル名。設定しない場合はデフォルト画像が使用される。
iconOpenStringアイコン(オープンした時)を使用する場合の画像ファイル名。設定しない場合はデフォルト画像が使用される。
openBooleanノードを開いて表示
例:
mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');

openAll()

概要
全てのノードを開きます。ツリー表示前後どちらでも起動できます。
例:
mytree.openAll();

closeAll()

概要
全てのノードを閉じます。ツリー表示前後どちらでも起動できます。
例:
mytree.closeAll();

openTo()

概要
指定したノードを開くことができます。ツリーが表示された後で起動してください。
パラメータ
名前説明
idNumberノード番号
selectBoolean開いたノードをハイライト表示する
例:
mytree.openTo(4, true);

3.サンプルコード

a = new dTree('a');
a.config.useCookies=false;
a.add(0,-1,'Tree example','javascript: void(0);');
a.add(1, 0,'Node 1','javascript:void(0);');
a.add(2, 1,'Node 2','javascript:void(0);');
a.add(3, 0,'Node 3','javascript:void(0);');
a.add(4, 1,'Node 4','javascript:void(0);');
a.add(5, 2,'Node 5','javascript:void(0);');
a.add(6, 4,'Node 6','javascript:void(0);');
a.add(7, 6,'Node 7','javascript:void(0);');
a.add(8, 6,'Node 8','javascript:void(0);');
a.add(9, 4,'Node 9','javascript:void(0);');
a.add(10, 3,'Node 10','javascript:void(0);');
a.add(11, 1,'Node 11','javascript:void(0);');
a.add(12, 1,'Node 12','javascript:void(0);');
a.add(13, 8,'Node 13','javascript:void(0);');
a.add(14, 11,'Node 14','javascript:void(0);');
document.write(a);

1行目:dTree オブジェクトを生成します。この行は必須です。

a = new dTree('a');

2行目:コンフィグレーションの設定です。ここではクッキーを有効にしています。

a.config.useCookies=false;

3行目:ルートノードの設定です。この行も必須のようです。

a.add(0,-1,'Tree example','javascript: void(0);');

4行目:ノード追加です。パラメータの数字は、自ノード番号「1」で、ルートノード(0)に属することを意味します。

a.add(1, 0,'Node 1','javascript:void(0);');

もうひとつ例を挙げると、16行目の

a.add(13, 8,'Node 13','javascript:void(0);');

は、8番のノードに属することを指しています。

18行目:ツリーを表示します。document.write 以外に innerHTML もOKでした。

document.write(a);

4.CSS

設定されているスタイルは下記の通りです。

.dtree {}
.dtree img {}
.dtree a {}
.dtree a.node, .dtree a.nodeSel {}
.dtree a.node:hover, .dtree a.nodeSel:hover {}
.dtree a.nodeSel {}
.dtree .clip {}
Comments [3] | Trackbacks [0]
2007年6月25日

dTree によるサブカテゴリーリスト for Movable Type

dTree というエクスプローラー風のツリー表示スクリプトを利用した、Movable Type のサブカテゴリーリストのツリー化カスタマイズをご紹介します。

表示は下のサンプルのスクリーンショットのようになり、「+」「-」をクリックするとツリーを開閉することができます。また、カテゴリー名をクリックすると該当のカテゴリーページにジャンプします。一番下の「open all」「close all」をクリックすると全ツリーの一括開閉もできます。

サンプル
dTreeのサンプルへ

後で気がつきましたが、「MovableType備忘録」さんでも同じようなカスタマイズを公開されています。

以下、カスタマイズ方法です。

1.スクリプトのダウンロード

Destroydrop » Javascripts » Tree の右上にある、Download の dtree.zip のリンクをクリックしてダウンロード。

dTree

2.スクリプトのアップロード

アーカイブを解凍した中にある下記のファイルまたはディレクトリを index.html と同じディレクトリにアップロード(他は使いません)。

/img
dtree.css
dtree.js

3.画像ファイルパスの修正

dtree.js を任意のエディタで開き、下記の

this.icon = {
    root        : 'img/base.gif',
    folder      : 'img/folder.gif',
    folderOpen  : 'img/folderopen.gif',
    node        : 'img/page.gif',
    empty       : 'img/empty.gif',
    line        : 'img/line.gif',
    join        : 'img/join.gif',
    joinBottom  : 'img/joinbottom.gif',
    plus        : 'img/plus.gif',
    plusBottom  : 'img/plusbottom.gif',
    minus       : 'img/minus.gif',
    minusBottom : 'img/minusbottom.gif',
    nlPlus      : 'img/nolines_plus.gif',
    nlMinus     : 'img/nolines_minus.gif'
};

を下のようにご自身のドメイン(ブログのURL)を追加します。

this.icon = {
    root        : 'http://user-domain/img/base.gif',
    folder      : 'http://user-domain/img/folder.gif',
    folderOpen  : 'http://user-domain/img/folderopen.gif',
    node        : 'http://user-domain/img/page.gif',
    empty       : 'http://user-domain/img/empty.gif',
    line        : 'http://user-domain/img/line.gif',
    join        : 'http://user-domain/img/join.gif',
    joinBottom  : 'http://user-domain/img/joinbottom.gif',
    plus        : 'http://user-domain/img/plus.gif',
    plusBottom  : 'http://user-domain/img/plusbottom.gif',
    minus       : 'http://user-domain/img/minus.gif',
    minusBottom : 'http://user-domain/img/minusbottom.gif',
    nlPlus      : 'http://user-domain/img/nolines_plus.gif',
    nlMinus     : 'http://user-domain/img/nolines_minus.gif'
};

4.script 要素追加

dTree を表示したいテンプレートに、下記の link 要素と script 要素を追加します。

<link rel="stylesheet" href="<$MTBlogURL$>dtree.css" type="text/css" />
<script type="text/javascript" src="<$MTBlogURL$>dtree.js"></script>

5.dTree サブカテゴリーリスト表示用タグ設定

テンプレートで、サブカテゴリーリストを表示したい位置に下記のタグを設定してください。

表示用タグは PHP 版と JavaScript 版を用意しました。表示される結果はどちらも同じですが、PHP 版の方がページのファイルサイズを抑えることができます。

5.1 PHP版

このタグを設定する場合、PHP化を行っていることが前提です。

<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'SubCategories','javascript: void(0);');
<?php $a = 0; $b = 0; $link = array(); ?>
<MTTopLevelCategories>
<?php $link[$b] = ++$a; if(!$b) { ?>
    d.add(<?php echo $a ?>, 0,'<$MTCategoryLabel encode_php="1"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
<?php } else { if(!$link[$b - 1]) { ?>
    d.add(<?php echo $a ?>, 1,'<$MTCategoryLabel encode_php="1"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
<?php } else { ?>
    d.add(<?php echo $a ?>, <?php echo $link[$b - 1] ?>,'<$MTCategoryLabel encode_php="1"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
<?php }} $b++; ?>
<MTSubCatsRecurse max_depth="3">
<?php $b--; ?>
</MTTopLevelCategories>
document.write(d);
</script>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

5.2 JavaScript 版

こちらは JavaScript 版です。

<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1, 'SubCategories','javascript: void(0);');
var a = 0;
var b = 0;
var link = new Array();
<MTTopLevelCategories>
link[b] = ++a;
if(!b) {
    d.add(a, 0,'<$MTCategoryLabel$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
} else {
    if(!link[b - 1]) {
        d.add(a, 1,'<$MTCategoryLabel$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
    } else {
        d.add(a, link[b - 1],'<$MTCategoryLabel$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
    }
}
b++;
<MTSubCatsRecurse max_depth="3">
b--;
</MTTopLevelCategories>
document.write(d);
</script>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

以上です。

関連記事:

2007.06.26
3項を追加しました。

2007.12.01
PHP版タグの MTCategoryLabel タグに encode_php="1" を追加しました。

2007.12.18
MTSubCategories タグを MTTopLevelCategories タグに変更しました。

Comments [35] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3