サンプルページ　　　折り畳みメニュー 24

ﾒﾆｭｰ　a	ﾒﾆｭｰ　b	ﾒﾆｭｰ　c	ﾒﾆｭｰ　d
ｻｲﾄ 1a	ﾂﾘｰﾒﾆｭｰ15fr	ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ 9 ﾌﾚｰﾑ	階層ﾒﾆｭｰ12g1
ｻｲﾄ 11a	Real Guide	Playmates	ｻｲﾄ 11d
ｻｲﾄ 111a	ﾅﾋﾞﾊﾞｰ	ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ28fr	ｽﾗｲﾄﾞｼｮｰ19
ｻｲﾄ 112a	画像切り替え18	msn - ♪Music	Fashion TV
ｻｲﾄ 113a	Entertainment	♪□Movie ｽﾄﾘｰﾐﾝｸﾞ	Quick Time
ｻｲﾄ 12a	ｻｲﾄ 12b	ｻｲﾄ 12c	ｻｲﾄ 12d
ｻｲﾄ 121a	ｻｲﾄ 121b	ｻｲﾄ 121c	ｻｲﾄ 121d
ｻｲﾄ 122a	ｻｲﾄ 122b	ｻｲﾄ 122c	ｻｲﾄ 122d
ｻｲﾄ 133a	ｻｲﾄ 133b	ｻｲﾄ 133c	ｻｲﾄ 133d
ｻｲﾄ 13a	ｻｲﾄ 13b	ｻｲﾄ 13c	ｻｲﾄ 13d
ｻｲﾄ 131a	ｻｲﾄ 131b	ｻｲﾄ 131c	ｻｲﾄ 131d
ｻｲﾄ 132a	ｻｲﾄ 132b	ｻｲﾄ 132c	ｻｲﾄ 132d
ｻｲﾄ 133a	ｻｲﾄ 133b	ｻｲﾄ 133c	ｻｲﾄ 133d
ｻｲﾄ 2a	ｻｲﾄ 2b	ｻｲﾄ 2c	ｻｲﾄ 2d
ｻｲﾄ 21a	ｻｲﾄ 21b	ｻｲﾄ 21c	ｻｲﾄ 21d
ｻｲﾄ 211a	ｻｲﾄ 211b	ｻｲﾄ 211c	ｻｲﾄ 211d
ｻｲﾄ 212a	ｻｲﾄ 212b	ｻｲﾄ 212c	ｻｲﾄ 212d
ｻｲﾄ 213a	ｻｲﾄ 213b	ｻｲﾄ 213c	ｻｲﾄ 213d
ｻｲﾄ 22a	ｻｲﾄ 22b	ｻｲﾄ 22c	ｻｲﾄ 22d
ｻｲﾄ 221a	ｻｲﾄ 221b	ｻｲﾄ 221c	ｻｲﾄ 221d
ｻｲﾄ 222a	ｻｲﾄ 222b	ｻｲﾄ 222c	ｻｲﾄ 222d
ｻｲﾄ 233a	ｻｲﾄ 233b	ｻｲﾄ 233c	ｻｲﾄ 233d
ｻｲﾄ 23a	ｻｲﾄ 23b	ｻｲﾄ 23c	ｻｲﾄ 23d
ｻｲﾄ 231a	ｻｲﾄ 231b	ｻｲﾄ 231c	ｻｲﾄ 231d
ｻｲﾄ 232a	ｻｲﾄ 232b	ｻｲﾄ 232c	ｻｲﾄ 232d
ｻｲﾄ 233a	ｻｲﾄ 233b	ｻｲﾄ 233c	ｻｲﾄ 233d
ｻｲﾄ 3a	ｻｲﾄ 3b	ｻｲﾄ 3c	ｻｲﾄ 3d
ｻｲﾄ 31a	ｻｲﾄ 31b	ｻｲﾄ 31c	ｻｲﾄ 31d
ｻｲﾄ 311a	ｻｲﾄ 311b	ｻｲﾄ 311c	ｻｲﾄ 311d
ｻｲﾄ 312a	ｻｲﾄ 312b	ｻｲﾄ 312c	ｻｲﾄ 312d
ｻｲﾄ 313a	ｻｲﾄ 313b	ｻｲﾄ 313c	ｻｲﾄ 313d
ｻｲﾄ 32a	ｻｲﾄ 32b	ｻｲﾄ 32c	ｻｲﾄ 32d
ｻｲﾄ 321a	ｻｲﾄ 321b	ｻｲﾄ 321c	ｻｲﾄ 321d
ｻｲﾄ 322a	ｻｲﾄ 322b	ｻｲﾄ 322c	ｻｲﾄ 322d
ｻｲﾄ 333a	ｻｲﾄ 333b	ｻｲﾄ 333c	ｻｲﾄ 333d
ｻｲﾄ 33a	ｻｲﾄ 33b	ｻｲﾄ 33c	ｻｲﾄ 33d
ｻｲﾄ 331a	ｻｲﾄ 331b	ｻｲﾄ 331c	ｻｲﾄ 331d
ｻｲﾄ 332a	ｻｲﾄ 332b	ｻｲﾄ 332c	ｻｲﾄ 332d
ｻｲﾄ 333a	ｻｲﾄ 333b	ｻｲﾄ 333c	ｻｲﾄ 333d

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　折り畳みﾒﾆｭｰ 24　oritatami24.htm

表（ﾃｰﾌﾞﾙ）の行折り畳み、ﾃｷｽﾄ・HTML編集容易、All展開/閉じ。　　　　　　　　DHTML。　　　　　　　　表示、ﾊｲﾊﾟｰﾘﾝｸなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

< ご使用方法 >

・　ﾛｰｶﾙ（=PC）への保存は、oritatami24/ をｸﾘｯｸ開いたﾎﾙﾀﾞｰで、oritatami24.htm、002410.js、nav_closed.gif ほかを右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　※: 変わってしまったﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。　　　

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

　･　編集方法は、hogehoge.html をﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰで開き編集します。　　　　下記の（例） (*1) と、(*2) を参考に太字部分の編集を任意に行います。　　　※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少し生じる）。

　・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 8.x～などで開いて。　　　　更新の確認は [F5]ｷｰを押し、ｻｰﾊﾞｰやﾌﾞﾗｳｻﾞｰのｷｬｯｼｭｸﾘｱｰ、最新ﾃﾞｰﾀ読み込み（≠再ｱｸｾｽ）で行います。

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

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

　HTMLの編集方法　

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

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

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

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

ﾘﾝｸを新しいWinで開くを標準（削除可）※：target=　いろいろ
同じﾌﾚｰﾑ=_self、ﾍﾟｰｼﾞ全体=_top、親ﾌﾚｰﾑ=_parent
お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

ｱｲｺﾝ

表背景色（罫線風）

ﾄｯﾌﾟｾﾙ背景画像

外余白
内余白

ｾﾙ背景画像
外余白
内余白

ｾﾙﾃｷｽﾄ左寄せ

<title>サンプルページ　　折り畳みメニュー 24</title>

<script type="text/javascript" src="002410.js"></script>

====　　この間、説明を省略。　　====

img.src = 'nav_open1.gif';
} else {
img.src = 'nav_closed.gif';
}
return (true);
}
</script>

<style type="text/css">
.treetable {
background:#D8D7E0;
}

.treetable th {
color:#ffffff;
background:#ddd;
background-image: url(../tab_menu12/30tbrb1.gif);
margin:1px;
padding: 1px 5px 0px 5px;
font-weight:bold;
font-size: 100%;
}

.treetable td {
background:#eee;
background-image: url(../wttec.gif);
margin:1px;
padding: 1px 5px 0px 5px;
}

.treetable td.number {
text-align:left;
}

.button {
border:none;
margin: 0 4px 0 0;
}
</style>

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

HTMLの編集方法　

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

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

※：<body>　部の編集　背景　ﾘﾝｸ　表示済みﾘﾝｸﾝｸ　ｱｸﾃｨﾌﾞﾘﾝｸの各色（任意値）

開吹き出し　ｱｲｺﾝ

列幅

ﾆﾒﾆｭｰ・ｻｲﾄ名

ｾﾙID

URL　ﾀｰｹﾞｯﾄ　吹き出し　ﾆﾒﾆｭｰ・ｻｲﾄ名

以下、同様。

<body onload="treetable_collapseAll('table1');" bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">


<a href="#" onclick="treetable_expandAll('table1');" title="全階層を開きます。"><img src="nav_open1.gif" class="button" alt="" width="16" height="16" /><b>∠</b>　全て開く</a>　　　 <a href="#" onclick="treetable_collapseAll('table1');" title="全階層を閉じます。"><img src="nav_closed.gif" class="button" alt="" width="16" height="16" /><b>×</b>　全て閉じる</a>
<table id="table1" class="treetable">
<colgroup>
<col width="120" />
<col width="110">
<col width="110">
<col width="110">
</colgroup>
<tr>
<th>ﾒﾆｭｰ　a</th>
<th>ﾒﾆｭｰ　b</th>
<th>ﾒﾆｭｰ　c</th>
<th>ﾒﾆｭｰ　d</th>
</tr>
<tr id="table1_0">
<td><a href="#" onclick="treetable_toggleRow('table1_0');"><img src="nav_open1.gif" class="button" alt="" width="16" height="16" />ｻｲﾄ 1a</a></td>
<td class="number"><a href="http://www　……　.htm" target="_blank" title="Microsoft Windows Tree Control　〃。　3DRoundBlue、Greenｱｲｺﾝ + 左右ﾌﾚｰﾑ。">ﾂﾘｰﾒﾆｭｰ15fr</a></td>

====　　この間、説明を省略。　　====

</table>

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

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