W i S T E R I A
＊
B O A R D
 
● ● ● ●新規 ●トレリス表示 ●一覧表示 ●ログ検索 ●ヘルプ ●ホームへ ● ● ●
●関連記事の一覧

87
ツリーメニューで全展開のボタンをつけたい by cat 2004/08/06 (Fri) 18:11
△up
res/edit
 
はじめまして。

Explorer風のツリーメニューを作成していて、メニューの全展開/全折りたたみをさせたいと考えています。

メニューの階層は3階層で、3階層目の末端のメニューまで全て展開させたいのです。
階層は↓のような感じです。
1.********
　└2.********
　　　└3.********

いろいろ調べた結果2階層目までを展開させることはできそうだったのですが、3階層まであるものに関してはわかりませんでした・・・。
DHTMLとJavaScriptで実装できるか、また実装できる場合どのようにすればできるか教えていただけないでしょうか。


よろしくお願いします。
88
Re1:ツリーメニューで全展開のボタンをつけたい by ごだっち 2004/08/06 (Fri) 18:50
△up
res/edit
admin
 
第一階層を 01,02,03，，，，としたとき、
第二階層は 第一階層の子であるから 0101,0102,0103，，，，、0201,0202,0203，，，，、0301,0302,0303，，，，，
第三階層は 同様に 010101,010102,010103,,,,,010201,010202,010203,,,,,010301,010302,010303,,,,以下略

というような、最初の２桁が第一階層、次の２桁が第二階層、末尾の２桁が第三階層を示す、といったような命名規則を定めておいて、
かつ、子は常に01から開始されると決めておけば、第N階層のM番目の要素に子供があるかどうかを調べることは簡単だよね。
例えば、Nが3（第三階層）だとして、Mが4だとしたら、その要素の名前は
「xxxx04」（上4桁のxxxxは、第一・第二階層の番号により既に決まっている）
となるし、それに子が居るかどうかは
「xxxx0401」が存在するかどうかを呼んでみれば判る。
エラーが返るようであれば子は居ないし、存在するのであれば、「xxxx04」のツリーに対して展開する処理を呼べば良いんじゃないかな。

まあ具体的にはツリー展開のスクリプトによって異なるかと思うけど、基本はそんな感じじゃないかと。
90
Re2:ツリーメニューで全展開のボタンをつけたい by ごだっち 2004/08/06 (Fri) 20:32
△up
res/edit
admin
 
帰宅途中で考えてみたら、前述の名前を規定する方法の他にも
いろいろな方法がありそうだね。
・N次配列に各メニューの名前(ID)を収める
・ChildNodeの有無を確認する
などなど。

ただ、いずれにしても、子要素（もしくは孫要素）がある限り、再帰的に展開させるための処理を呼び出すことになるかな。

ちょっとサンプルを作ってみようかと思うので、またあとで。
94
Re3:ツリーメニューで全展開のボタンをつけたい by ごだっち 2004/08/06 (Fri) 22:35
△up
res/edit
admin
 
とりあえず作りかけだし、きっと無駄な再帰処理が含まれていると思うのだけれど、こんな感じで行けると思う。

閉じるほうは未だ作っていないので、リロードで試してみてください。
また、チェックボックスをオフにすると、最初の階層しか展開されません。
デフォルトのオン状態のときは、子がある限り再帰的に展開メニューを呼びにいくので、全部展開されます。

<html>
<head>
<style type="text/css">
<!--
body{
font-size:24px;
}
.M1{
margin-left:1em;
font-size:1.0em;
display:block;
}
.M2{
margin-left:3em;
font-size:0.8em;
display:none;
}
.M3{
margin-left:5em;
font-size:0.8em;
display:none;
}
.M4{
margin-left:7em;
font-size:0.8em;
display:none;
}
-->
</style>
<script type="text/javascript">
<!--
var oobj;
var flg;
function kept(obj){
flg = document.getElementById("extract").checked;
toplevel = obj.id.length;
// alert(toplevel);
ext(obj);
}
function ext(obj){
if(obj){
if(obj.style.display=="none"){
obj.style.display="block";
}
if(obj.childNodes){
pid = obj.id;
// alert("pid "+pid);
for(i=1;5>i;i++){
cid = pid + "-" + i;
cobj = document.getElementById(cid);
if(cobj){
// alert("cid "+cid);
cobj.style.display="block";
if(flg){
ext(cobj);
}
} else {
oid = obj.id;
len = oid.length -1;
pid = oid.substr(0,len);
opn = oid.substr(len,oid.length) -0;
opn = opn + 1;
npid = pid + opn;
// alert("npid "+ npid);
npobj = document.getElementById(npid);
if(npobj){
if(flg){
ext(npobj);
}
}
}
}
// alert("len " + obj.id.length);
if( obj.id.length > toplevel ){
onum = obj.id.substr(obj.id.length - 1,obj.id.length) - 0;
onum = onum + 1;
nid = obj.id.substr(0,obj.id.length - 1) + onum;
// alert("nid "+nid);
npobj = document.getElementById(nid);
if(npobj){
if(flg){
ext(npobj);
}
}
}
}
}
}
//-->
</script>
</head>
<body>
<input type="checkbox" id="extract" checked>
<div id="m1" class="M1" onclick="kept(this);">
Menu.1
<div id="m1-1" class="M2" style="display:none;">
Menu.1-1
<div id="m1-1-1" class="M3" style="display:none;">
Menu.1-1-1
<div id="m1-1-1-1" class="M4" style="display:none;">
Menu.1-1-1-1
</div>
<div id="m1-1-1-2" class="M4" style="display:none;">
Menu.1-1-1-2
</div>
</div>
<div id="m1-1-2" class="M3" style="display:none;">
Menu.1-1-2
<div id="m1-1-2-1" class="M4" style="display:none;">
Menu.1-1-2-1
</div>
<div id="m1-1-2-2" class="M4" style="display:none;">
Menu.1-1-2-2
</div>
</div>
<div id="m1-1-3" class="M3" style="display:none;">
Menu.1-1-3
<div id="m1-1-3-1" class="M4" style="display:none;">
Menu.1-1-3-1
</div>
</div>
<div id="m1-1-4" class="M3" style="display:none;">
Menu.1-1-4
<div id="m1-1-4-1" class="M4" style="display:none;">
Menu.1-1-4-1
</div>
<div id="m1-1-4-2" class="M4" style="display:none;">
Menu.1-1-4-2
</div>
<div id="m1-1-4-3" class="M4" style="display:none;">
Menu.1-1-4-3
</div>
</div>
</div>
<div id="m1-2" class="M2" style="display:none;">
Menu.1-2
<div id="m1-2-1" class="M3" style="display:none;">
Menu.1-2-1
</div>
<div id="m1-2-2" class="M3" style="display:none;">
Menu.1-2-2
</div>
</div>
</div>
<div id="m2" class="M1" onclick="kept(this);">
Menu.2
<div id="m2-1" class="M2" style="display:none;">
Menu.2-1
<div id="m2-1-1" class="M3" style="display:none;">
Menu.2-1-1
</div>
<div id="m2-1-2" class="M3" style="display:none;">
Menu.2-1-2
</div>
</div>
<div id="m2-2" class="M2" style="display:none;">
Menu.2-2
<div id="m2-2-1" class="M3" style="display:none;">
Menu.2-2-1
</div>
<div id="m2-2-2" class="M3" style="display:none;">
Menu.2-2-2
</div>
</div>
</div>
</body>
</html>
95
Re4:ツリーメニューで全展開のボタンをつけたい by ごだっち 2004/08/07 (Sat) 07:18
△up
url
res/edit
admin
 
http://homepage2.nifty.com/godakaz/laboratory/0807.html

サンプルとして動くものをアップしました。

全展開（開閉）、個別展開（開閉）を盛り込んでいます。
（ただしIEのみ）
96
Re5:ツリーメニューで全展開のボタンをつけたい by cat 2004/08/08 (Sun) 22:12
△up
res/edit
 
さっそくの作成ありがとうございます！

JavaScriptの知識があまりないので、まだソースを完全には理解できていないのですが、このソースを利用して以下のようなこともできますか？

全展開ボタンを押すと、１．も２．もメニューが全展開される。再度ボタンを押すと、すべて折りたたまれる。

　　　1.*******
　　　2.*******
　　　　↓↑「全展開/折りたたみ」ボタンクリック　　　　　　　　　1.*******
　　　┗1.1*******
　　　　┗1.1.1******
　　　2.*******
　　　┗2.1*******
　　　　┗2.1.1******
97
Re6:ツリーメニューで全展開のボタンをつけたい by ごだっち 2004/08/09 (Mon) 11:41
△up
res/edit
admin
 
http://homepage2.nifty.com/godakaz/laboratory/0807x.html

できるよ。
98
Re7:ツリーメニューで全展開のボタンをつけたい by cat 2004/08/09 (Mon) 13:07
△up
res/edit
 
ありがとうございます☆

これを参考に作ってみます！
99
Re8:ツリーメニューで全展開のボタンをつけたい by cat 2004/08/09 (Mon) 13:42
△up
res/edit
 
作成していただいた「全展開」ボタンをいろいろといじっていたところ、Menu1だけクリックして開いた状態でボタンを押すと、Menu1は閉じてMenu2は開くと言う動きになってしまいます。

開いているメニューがあるなしにかかわらず、一括で閉じる、開くはできませんか？
100
Re9:ツリーメニューで全展開のボタンをつけたい by ごだっち 2004/08/09 (Mon) 16:41
△up
res/edit
admin
 
出来なくは無い、というよりも
これまでに提示したスクリプトを読めば
どこのパラメータを固定すれば出来るか程度の
見当は付くかと思うのだが？
101
Re10:ツリーメニューで全展開のボタンをつけたい by ごだっち 2004/08/09 (Mon) 17:01
△up
res/edit
admin
 
http://homepage2.nifty.com/godakaz/laboratory/0807xx.html
102
Re11:ツリーメニューで全展開のボタンをつけたい by cat 2004/08/09 (Mon) 20:37
△up
res/edit
 
ありがとうございます。無事全展開できました！
JavaScript超初心者なので、簡単なこともそれとわからず聞いてしまいすみませんでした。
精進します・・・。


ご迷惑ついでにもうひとつ教えてください。

下位メニューのあるもの（Menu1.、Menu1−1・・・）の前に画像をつけて、クリックしたら画像が変わるようにしようと思っています。"＋"から"−"といった感じです。

そこで、JavaScriptでクリックしたら画像が変わる関数を作って、ext(obj)の中から呼ぶようにしたのですが、下位メニューの画像と連携して画像が変化したりとうまくいきません・・・。

どのようにすればよいか教えていただけませんか？

画像が変わる関数はこんな感じです。
（ext(obj)からImageChange()を呼んでいます。）
↓
var imagefile = new Array("img/parent.gif", "img/parent-.gif");
var flag = 0;
var image = new Array(imagefile.length);
for(count = 0; count < (imagefile.length - 1); count++){
　　image[count] = new Image();
　　image[count].src = imagefile[count];
}
function ImageChange(){
　　if(flag == 0){
　　　　flag = 1;
　　}else{
　　　　flag = 0;
　　}
　　window.document.images["img1"].src = imagefile[flag];
}

呼び出し側
↓
<DIV class=M1 id=m1 onclick=kept(this);>
<IMG NAME="img1" SRC="img/parent.gif" BORDER="0">
Menu.1

よろしくお願いします。
103
Re12:ツリーメニューで全展開のボタンをつけたい by ごだっち 2004/08/09 (Mon) 21:34
△up
res/edit
admin
 
http://homepage2.nifty.com/godakaz/laboratory/0807xxx.html
104
Re13:ツリーメニューで全展開のボタンをつけたい by cat 2004/08/09 (Mon) 22:53
△up
res/edit
 
さっそくの回答ありがとうございます。

いろいろお騒がせしました。
本当にありがとうございました！

がんばってJavaScript勉強します！
p.ink