ラウンジ(兼FAQ掲示板)

ツリー式メニューを二つ
過去ログ NO.1095565272
□ nexfer [2004年09月08日23時28分]
JavaScriptMarketのツリー式メニューを使わせて頂いてるのですが、こちらで分からない事があったので質問させて頂きます。
ツリーを二つ連続出すにはどうしたらいいのでしょうか?
つまりサンプル上(
http://jsm.suepon.com/script/jsm30_smp.html)の「親リスト2」の下にまた「ホーム」をつくり、違うツリーを表示させたいのです。(一つのページに2つのツリーを作る)
同じスクリプトをコピー&ペーストしただけでは二つ出ずにエラーになってしまったので質問させていただきました。
□ NXer [2004年09月12日09時19分]
はじめまして。NXerです。

最近、このスクリプトのことを知りました。よろしく。
http://lounge.suepon.com/data/1093706749.html

>サンプル上の「親リスト2」の下にまた「ホーム」をつくり、違うツリーを表示
るという目的のために、
>同じスクリプトをコピー&ペースト
されました。結果は、エラーということから、少しスクリプトの分析に
お役に立てばと過去ログを照会しました。

当方で1)別窓でのメニュー表示例と2)窓の中の窓(インラインフレーム)の例
を試してみました。
後者は試作です。少なくとも窓内窓に表示できたことをお知らせするものです。
完成版には、さらに、改善が必要と思います。

その1)別窓の表示

listの配列を見てください。
---------------------------------------
list[0] = ",親リスト1";
list[1] = "0,親リスト1-1";
list[2] = "1,親リスト1-1-1";
list[3] = "2,link:1-1-1-1,1-1-1-1.html";
途中省略
list[13] = ",親リスト2";
list[14] = "13,親リスト2-1"
list[15] = "14,link:2-1-1,2-1-1.html";
---------------------------------

ご要望が親リスト2となっていますので、以下に考え方の提案をしてみます。
当方で、動作確認はしています。もし、ご理解いただき、さらに、実際に
運用可能なスクリプトやindex.htmlページを作成していただけることになれば
幸いです。

その1.1)ウィンドウの概念図:
出来上がり図です。二代目親リスト配下のツリーメニュを
新たな窓で表示をします。
-------------------------------------
|初代親リスト1
|....|-0,親リスト1-1
|....途中略
|初代親リスト2
|....|-13,親リスト2-1
|....|-14,link:2-1-1,2-1-1.html-->|二代目親リスト1.|
----------------------------------------------------

その1.3)別窓で2つ目のツリー式メニュを表示する
この目的のために、次の配列の構成要素をそのまま使います。
-------------------------------------------
list[15] = "14,link:2-1-1,2-1-1.html";
--------------------------------------------
-------------
2-1-1.html
--------------
このhtmlページにツリー式メニューを作成します。
単純にコピーペーストをされたわけですが、2-1-1.htmlにそうされていたら
別窓にとても簡易に、ご希望のツリー式メニューは完成していたものと思います。

その1.4)ウィンドウの処理

23行目付近に別窓の定義があります。
------------------------------
/* ターゲットウィンドウ */
tgt = "_blank";
-------------------------------

この考え方で、三代目、四代目、(、、、)と増やすことが可能です。

ウェブサイトの目的が不明ですが、ツリー式メニューは、
1、家系図 2、組織図 3 動植物の分類図、など、人間界、自然界の
すべての木構造を持つ体系を、理論上ですが、処理できます。


その2)窓内窓にツリー式メニューを表示するには
試作ですが、結果は、ご期待以上のものがあるかもしれません。

次のようなメニューで試しました。
------------------------------------------------------
list = new Array();
list[0] = ",初代親リスト1";
list[1] = "0,親リスト1-1";
list[2] = "1,親リスト1-1-1";
list[3] = "2,2代目親リスト,2ndgeneration.htm"; 
-------------------------------------------
2ndgeneration.htmにツリー式メニューが入っています。

スクリプト変更点です。
----------------------------------------------行はその付近です。
119 else if ((link) && (p != 3)) {
val = "<img src='" + ico_list + "' " + img_parm + "> "
+ "<a href='" + link + "' target='" + tgt + "'>" + val + "</a>";
}

125 else if ((link) && (p == 3)) {
val = "<img src='" + ico_list + "' " + img_parm + "> "
+ val+ "<iframe src='" +link + "'>" + "</iframe>";
}
----------------------------------------------------------
条件判断文は、linkがあり、かつ、list[3]に限って、リンク先を
インラインフレームで表示するというものです。

125行目の+val+が窓の下のラインの左横にでるという点は
上のラインに合わせたいところです。
窓の大きさの設定width="500" height="200"など属性の指定は
さすがに、javascript,htmlを熟知していないために失敗
しました。このあたりの参考文献は、すえぽんさんの『ハイブリッド
スクリプト』しか、おそらく、ないと思います。

上記のようなウェブサイトのメニューに、このツリー式メニューが
最適であるという確信が、試作ですが、生まれました。
そちらでお試しいただき、よりユニバーサルなツリー式メニュー
を、完成してください。ご成功を、こころから祈念いたします。
□ nexfer [2004年09月19日12時40分]
NXerさま。
ご指導有難うございます。こちらの希望していたものになり大変嬉しい限りです。
有難うございました。

suepon.com | CGI作成/CGI制作 | JavaScript | ドメイン検索 | バナー自動作成 | Google ダンスツール | 松浦亜弥 | H.P.memo | パソコン | ネイル

Copyright (C) 2002 - 2009 suepon , All rights reserved. Powered by CGI Script Market.