サンプルページ　　　ツリーメニュー 15aif

ﾎｰﾑへ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　ﾂﾘｰﾒﾆｭｰ　15aif　　tree15aif.htm

ﾂﾘｰﾒﾆｭｰ + IFRAME。　　　　3DRoundBlue、Greenｱｲｺﾝ。　　　選択ﾊｲﾊﾟｰﾘﾝｸ文字を太字痕跡。　　　　　　DHTML、Microsoft Windows Tree Controlのﾂﾘｰ編集便利！。　　　　　　ﾊｲﾊﾟｰﾘﾝｸ、ｱｲｺﾝなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

< ご使用方法 >

・　ﾛｰｶﾙ（=PC）への保存は、tree15aif.htm （DHTML実装ﾌｧｲﾙ）、442200.js（JavaScript記述ﾌｧｲﾙ、共用）、442201.js（ﾘﾝｸ記述ﾌｧｲﾙ、共用）、442202aif.js（ｱｲｺﾝ、ﾀｰｹﾞｯﾄ記述ﾌｧｲﾙ）、BottomLine.gif、BottomMinus.gif、BottomPlus.gif、empty.gif、MiddleCrossLine.gif、MiddleLine.gif、MiddleMinus.gif、MiddlePlus.gif、nav_closed.gif、nav_open1.gif、selecint.gif 、web8.gif、rbbl13.gif を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　　　※: 変わってしまったﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。

・　このDHTMLの実装方法は、tree15aif.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、新しいﾍﾟｰｼﾞ 1や hogehoge.html（=任意の挿入先ﾌｧｲﾙ名）の、<head>　～</head>の任意の行間に (*1) を、さらに <body>　～　</body>の任意の行間に (*2) をﾍﾟｰｽﾄします。

･　編集方法は、hogehoge.html を WordPadや SmipleTextなどのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰで開き編集します。　　　　下記の（例） (*1)と、(*2)、(*3)、(*4) を参考に太字部分の編集を任意に行います。　　　ﾊｲﾊﾟｰﾘﾝｸの編集は、(*3) を参考に 442201.js　を、ﾀｰｹﾞｯﾄ〔target="_top"、など〕と、ｱｲｺﾝ画像などの編集は、(*4)442202aif.js　を、ﾃｷｽﾄｴﾃﾞｨﾀｰで編集します。※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少し生じる）。

・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 6.x～などで開いて。　　　　更新の確認は、[F5]ｷｰを押し最新ﾃﾞｰﾀ読み込みで行います（≠再ｱｸｾｽ）。　　　Netscapeは、Ctrl+Ｒｷｰで。

･　ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用する画像、*.js、なども転送/配置し実施。　　※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html 中のﾊﾟｽは要修正。　　　FTPなどで変わったﾌｧｲﾙ名は要修正。　　　　ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。

(*1) ：　tree15aif.htm （例）　　　　　　　　挿入先の　<head> ～ </head>の、～部分にﾍﾟｰｽﾄします。

HTMLの編集方法　

(*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

ｼﾌﾄJIS使用（削除不可）

ｉｅなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）

お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

ﾒﾆｭｰのﾊｲﾊﾟｰﾘﾝｸ文字色　ﾌｫﾝﾄ　ｻｲｽﾞ　余白

<style type="text/css">

</style>
<script language="JavaScript" src="442200.js"></script>
<script language="JavaScript" src="442201.js"></script>
<script language="JavaScript" src="442202aif.js"></script>

(*2) ：　tree15aif.htm （例）　　　　　　　　挿入先の　<body> ～ </body>　の、～部分にﾍﾟｰｽﾄします。

HTMLの編集方法　

(*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

ﾂﾘｰﾒﾆｭｰDIV　位置　幅　高さ　ｽｸﾛｰﾙﾊﾞｰ自動　背景画像
　

IFRAME名 初期表示URL　配置　ｻｲｽﾞ

<body>

<div style="position:Absolute; top:2; left:2; width:185; height:100%; overflow:auto; z-index:10; visibility:visible; background-image: url('wttec.gif'); background-color:#FFFFFF;">

<tr>
<td class="intd">
<script language="JavaScript">

</script>
</td></tr>

</DIV>


<iframe name="frame001" src="http://　……　ment" style="position:relative; z-index:0; visibility:visible; top:0; left:200; width:750; height:500; border:0 solid #766F86; scrolling:auto; marginwidth:1; marginheight:1;"></iframe>

(*3) ：　442201.js （例）　　　　　　　　　ﾃｷｽﾄｴﾃﾞｨﾀｰで開き、編集しhogehoge.htmlと同ﾃﾞｨﾚｸﾄﾘｰに転送・配置します。

*.jsの編集方法　

(*3)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

ｻｲﾄ名　URL

以下、同様にﾘﾝｸを編集。

var TREE_ITEMS = [
['◇☆のﾍﾟｰｼﾞ', 'http://www./……/xxx.html',
['ｻｲﾄ　1', 'http://www./……/xxx.html',
['ｻｲﾄ　11', 'http://www./……/xxx.html',

==== この間､説明を省略｡ ====

['ｻｲﾄ　5', 'http://www./……/xxx.html'],
],
];　

(*4) ：　442202aif.js （例）　　　　　　　　　ﾃｷｽﾄｴﾃﾞｨﾀｰで開き、編集しhogehoge.htmlと同ﾃﾞｨﾚｸﾄﾘｰに転送・配置します。

*.jsの編集方法　

(*3)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

ﾀｰｹﾞｯﾄ : IFRAME名

ﾄｯﾌﾟ　ﾎｰﾑﾍﾟｰｼﾞｱｲｺﾝ

ﾂﾘｰ閉じｱｲｺﾝ
ﾂﾘｰ開きｱｲｺﾝ

ﾍﾟｰｼﾞｱｲｺﾝ
ﾍﾟｰｼﾞｵｰﾌﾟﾝｱｲｺﾝ

/*
Feel free to use your custom icons for the tree. Make sure they are all of the same size.
User icons collections are welcome, we'll publish them giving all regards.
*/

var tree_tpl = {
'target' : 'frame001', 　　// name of the frame links will be opened in
　　　　　　// other possible values are: _blank, _parent, _search, _self and _top

'icon_e' : 'empty.gif', // empty image
'icon_l' : 'MiddleLine.gif', // vertical line

'icon_32' : 'selecint.gif', // root leaf icon normal
'icon_36' : 'selecint.gif', // root leaf icon selected

'icon_48' : 'selecint.gif', // root icon normal
'icon_52' : 'selecint.gif', // root icon selected
'icon_56' : 'selecint.gif', // root icon opened
'icon_60' : 'selecint.gif', // root icon selected

'icon_16' : 'nav_closed.gif', // node icon normal
'icon_20' : 'nav_open1.gif', 　// node icon selected
'icon_24' : 'nav_open1.gif', 　// node icon opened
'icon_28' : 'nav_open1.gif', 　// node icon selected opened

'icon_0' : 'rbbl13.gif',　　　　// leaf icon normal
'icon_4' : 'grbl13.gif',　　　　// leaf icon selected

'icon_2' : 'MiddleCrossLine.gif', // junction for leaf

['ｻｲﾄ　3', 'http://www./……/xxx.html'],

==== この間､説明を省略｡ ====

'icon_27' : 'BottomMinus.gif' // junctioin for last opended node
};

< 補足 >　　　　適時参照あれ！。

・　Wordpad　によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。