IT・コンピューター フィッシング

dtreeの設置

エクスプローラー風カテゴリーマップです

ブラックバスを引っ張り出せ！

このようなエクスプローラー風にカテゴリーマップが表示されたらいいなぁ・・・

そう思ったことはありませんか

今日はブログカスタマイズの小技

カテゴリマップをサイドバーに表示してみましょう。。。

?まず、dtreeのソースをダウンロードします

?その中のdtree.jsファイルを開き、

129行目から168行目の

root: 'http://www.＊＊＊＊＊＊/dtree/img/base.gif',

folder: 'http://www.＊＊＊＊＊＊/dtree/img/folder.gif',

folderOpen : 'http://www.＊＊＊＊＊＊/dtree/img/folderopen.gif',

node: 'http://www.＊＊＊＊＊＊/dtree/img/page.gif',

empty: 'http://www.＊＊＊＊＊＊/dtree/img/empty.gif',

line: 'http://www.＊＊＊＊＊＊/dtree/img/line.gif',

join: 'http://www.＊＊＊＊＊＊/dtree/img/join.gif',

joinBottom : 'http://www.＊＊＊＊＊＊/dtree/img/joinbottom.gif',

plus: 'http://www.＊＊＊＊＊＊/dtree/img/plus.gif',

plusBottom: 'http://www.＊＊＊＊＊＊/dtree/img/plusbottom.gif',

minus: 'http://www.＊＊＊＊＊＊/dtree/img/minus.gif',

minusBottom: 'http://www.＊＊＊＊＊＊/dtree/img/minusbottom.gif',

nlPlus: 'http://www.＊＊＊＊＊＊/dtree/img/nolines_plus.gif',

nlMinus: 'http://www.＊＊＊＊＊＊/dtree/img/nolines_minus.gif'

↑このようにプルパスでURLを記入し上書きしてすべてをサーバーにアップします。

?次はナチュラムのブログ環境設定ーカスタムプラグインに以下のタグを記入します

<div class="sidetitle">エクスプローラー風もくじ</div>

<div class="side">

<div class="sidebody">

<head>

<link rel="StyleSheet" href="http://＊＊＊＊＊＊/dtree/dtree.css" type="text/css" />

<script type="text/javascript" src="http://＊＊＊＊＊＊/dtree/dtree.js"></script>

</head>

<body>

<div class='dtree'>

<p><a href='javascript: d.openAll();'>open all</a> | <a href='javascript: d.closeAll();'>close all</a></p>

<script type='text/javascript'>

<!--

d = new dTree('d');

d.add(0,-1,'見たい項目は');

d.add(1, 0, "1.0", "link1.html", 'これはFolder1です');

d.add(2, 0, "2.0", "link2.html", 'これはFolder2です');

d.add(3, 0, "3.0", "link3.html", 'これはFolder3です');

d.add(10, 1, "10.1", "link1.html", 'これはFolder1です');

d.add(20, 1, "20.1", "link1.html", 'これはFolder1です');

d.add(30, 1, "30.1", "link4.html", 'これは、バスフィッシングに所属するファイルです', '_blank');

d.add(110, 2, "110.2", "link4.html", 'これは、バスフィッシングに所属するファイルです', '_blank');

d.add(120, 2, "120.2", "link4.html", 'これは、バスフィッシングに所属するファイルです', '_blank');

d.add(130, 2, "130.2", "link5.html", 'これは”ちょい趣味ゴルフに所属するファイルです', '_blank');

d.add(1110, 30, "1110.30", "link5.html", 'これは”ちょい趣味ゴルフに所属するファイルです', '_blank');

d.add(1120, 30, "1120.30", "link6.html", 'これは”スキー・スノーボードに所属するファイルです', '_blank');

d.add(1130, 30, "1130.30", "link6.html", 'これは”スキー・スノーボードに所属するファイルです', '_blank');

document.write(d);

//-->

</script>

</div>

</body>

</div>

</div>

?以上でおわりです。

階層の作り方はd.add(1130, 30,・・・とありますが、最初の番号はなんでもいいのです。重複しない数字がいいでしょう。２番目の番号は親の管理番号なのです。

それぞれ、リンクURLを指定してやると、エクスプローラー風のツリーマップの完成です。



0 件のコメント :

コメントを投稿