チョコミントアイス

JavaScriptで質問があります。

解決済

  • 質問者：0423a
  • 質問日時：
  • 回答数：4件

http://bunjin.com/java/link_list.html
このスクリプトで質問があるんですが
このリストを何列か縦に並べることってできますか？
その時、間はあけたくないんですが
上のリストをクリックすると下のが下がり
メニューが現れるという感じなんですが。
自分はフレーム縦2分割の
ページなんですが
そのメニューをクリックするとどうしても
新しいウインドウで開いてしまうんですよ
フレームページの左側で選んで
右側に表示させたいんですが・・・・。
自分はJavaあまり詳しくないので
やり方を具体的に教えてくださると助かります。
わかりにくかったら補足します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： zzzzzz
  • 回答日時：

・レイアウト変更について


HTMLを変更すれば可能です。
例えばBODYの内容を

<a id="menu1" href="#"><font size="+1">検索エンジン</font></a><br>
<div id="sub1">
<a href="http://www.google.co.jp/">Google</a><br>
<a href="http://www.yahoo.co.jp/">Yahoo</a><br>
<a href="http://www.goo.ne.jp/">Goo</a><br>
</div>

<a id="menu2" href="#"><font size="+1">WWW</font></a><br>
<div id="sub2">
<a href="http://www.w3.org/">W3C</a><br>
</div>

<a id="menu3" href="#"><font size="+1">その他</font></a><br>
<div id="sub3">
<a href="http://www.microsoft.com/">Microsoft</a><br>
<a href="http://java.sun.com/">Java(SUN)</a><br>
</div>

のようにすれば間が空かなくなります。
HTML、スタイルシートで可能なレイアウト変更は全て対応しているはずです。
(対応していないのは、javascriptでのonclickイベントだけです)
(onclickに対応させることもできますが、面倒なので書いていません)

> サブメニューは画像でも機能すると書いてありますが
> メニューを画像ファイルにすることはできますか？
可能です。IMGタグにidを指定してください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

zzzzzzさん本当に助かりました。
どうもありがとうございました。
↓私のHPです、こんな感じで使わせていただきました。http://www.geocities.co.jp/Playtown-Rook/3945/

通報する
お礼日時：2002/03/23 00:03

No.3

  • 回答者： zzzzzz
  • 回答日時：

それでは使用法を書いておきます。


function init() {
の前に記述されているJavascriptに関しては変更しないでください。
(javascript部分はほとんど変更しないように作ってあります)

以下では、「Menu_List (ココをクリック)」に相当するものを「メニュー」、
メニューをクリックしたときに開くものを「サブメニュー」と呼ぶことにします。

１．HTMLの準備
サブメニューをすべて同時に開いた時の表示になるようにHTMLを書いてください。
下の例をJavascriptを切って閲覧していただけば大体の感じが分かると思います。

２．HTMLの修正
メニューとサブメニューに名前を付けます。
それぞれのタグ内に
id="menu"
という記述を追加してください。但し、"menu"は各タグごとに変えてください。
(異なるタグは異なるidを持つようにしてください)
下の例の<body>タグ以下を見ていただければ感じが掴めるかと思います。
下の例では、メニューのidに"menu1", "menu2", "menu3"という名前を付け、
サブメニューのidに"sub1", "sub2", "sub3"という名前を付けています。

３．Javascriptの修正
// ********* ここにサブメニューの記述を追加してください。**********
と書いてある行の直後に、
mc.append(<メニューのID>, <サブメニューのID>);
という行を、メニューとそのサブメニューの組の個数分だけ記述してください。
(元から書いてあるmc.append()の行は削除してください)
ここで、<メニューのID>および<サブメニューのID>は２．で決めたものを「"」でくくって書いてください。
例えば、２．までで
<span id="newmenu">新しいメニュー</span>
<div id="newsubmenu">このメニューに対応するサブメニュー</div>
というようにHTMLを書いていたならば、
mc.append("newmenu", "newsubmenu");
という行を追加してください。

以上です。

idをきちんとつける限り、HTMLには何を書いてもかまいません。
サブメニューの内容がリンクだろうと画像だろうと正しく機能します。
表示制御以外を全て通常のHTMLとして書けるようにしていますので、
右側フレームにリンク先を表示する、という件に関しては、
<a href="content.html" target="right">
のようにすればOKです。

不明なことがありましたら補足いたします。

この回答への補足

その通りにやったら
項目を増やすことができました。

しかし一つ聞きたいのですが
サブメニューをもう少し左に
寄せることはできませんか？後、メニューと
の間ももう少しなくしてほしいのですが・・・。
フレームなのでできるだけ幅をとりたくないんです。
今から変更可能なようでしたらやり方を
教えてくれませんか？

後もう一つ
サブメニューは画像でも機能すると書いてありますが
メニューを画像ファイルにすることはできますか？

補足日時：2002/03/22 01:22
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： zzzzzz
  • 回答日時：

> 「識別子がありません」


フレームの名前が間違っているか、あるいは変数名のうつし間違いだと思います。

> 確認ですが<>はいらないんですよね？
はい。フレーム名がrightなら
top.right.location.href = "http://" + url;
hideMenu(act_mnu);
top.right.focus();
と記述します。スペースは空けても空けなくてもかまいません。
但し、全角スペースは入れないでください。


縦に並べる、という話に移ります。
挙げられていたページの方法では、縦に並べた場合に表示間隔が開いてしまう、という問題があります。
(このページの方法は、サブメニューを静的に作成しておき、クリックで表示／非表示を切り替える、という方法をとっているため)
これを回避するために、全く別の方法でスクリプトを書いてみました。
(但しNetscape4以前ではうまく動作しないと思われますが、挙げられていたページのスクリプトの方もNetscape非対応の書き方がされています)
コピー＆ペーストして動きを見てみてください。
使う気がおありでしたら使用法を書きますので。

<HTML>
<HEAD>
<SCRIPT>
<!--
function __declare_Menu() {
function window.Menu(parent, submenu) {
this.isHidden = false;
this.parentId = parent;
this.parentRef = document.getElementById(parent);
this.alterNode = document.createElement("DIV");
this.menuId = submenu;
this.menuRef = document.getElementById(submenu);
this.prevParentOnclickHandler = null;
};
new Menu("", "");
Menu.prototype.alterOnclickHandler = function(newHandler) {
if (this.parentRef != null) {
if ((this.parentRef.onclick) && (this.prevParentOnclickHandler == null)) {
this.prevParentOnclickHandler = this.parentRef.onclick;
}
this.parentRef.onclick = newHandler;
return true;
}
return false;
};
Menu.prototype.restoreOnclickHandler = function() {
if (this.parentRef != null) {
if (this.prevParentOnclickHandler != null) {
this.parentRef.onclick = this.prevParentOnclickHandler;
this.prevParentOnclickHandler = null;
} else {
this.parentRef.onclick = null;
}
return true;
}
return false;
}
Menu.prototype.showMenu = function() {
if (this.isHidden) {
this.alterNode.parentNode.replaceChild(this.menuRef, this.alterNode);
this.isHidden = false;
}
};
Menu.prototype.hideMenu = function() {
if (!this.isHidden) {
this.menuRef.parentNode.replaceChild(this.alterNode, this.menuRef);
this.isHidden = true;
}
};
Menu.prototype.toString = function() {
return this.parentId + ", " + this.menuId;
};
} __declare_Menu();

function __declare_MenuCollection() {
function window.MenuCollection() {
this.aaa = "erere";
this.current = null;
this.elements = new Object();
}
new MenuCollection();
MenuCollection.prototype.append = function(parent, submenu) {
this.elements[parent] = new Menu(parent, submenu);
this.elements[parent].parentRef.mcObject = this;
this.elements[parent].alterOnclickHandler(new Function("", "this.mcObject.onclickHandler(this.id); return false;"));
};
MenuCollection.prototype.remove = function(parent) {
if (this.elements[parent] !== void(0)) {
this.elements[parent].hideMenu();
this.elements[parent].restoreOnclickHandler();
this.elements[parent].parentRef.mcObject = null;
var tmp = this.elements;
delete tmp[parent];
return true;
} else {
return false;
}
};
MenuCollection.prototype.removeAll = function() {
for (var menu in this.elements) {
this.remove(menu);
}
this.elements = null;
};
MenuCollection.prototype.hideAll = function() {
for (var menu in this.elements) {
this.elements[menu].hideMenu();
}
this.current = null;
};
MenuCollection.prototype.select = function(parent) {
this.elements[parent].showMenu();
this.current = parent;
};
MenuCollection.prototype.onclickHandler = function(id) {
if (this.current == id) {
this.hideAll();
} else {
this.hideAll();
this.select(id);
}
};
} __declare_MenuCollection();

function init() {
mc = new MenuCollection();
mc.append("menu1", "sub1");
mc.append("menu2", "sub2");
mc.append("menu3", "sub3");
// ********* ここにサブメニューの記述を追加してください。**********
mc.hideAll();
}
-->
</SCRIPT>
</head>
<body onload="init()" onunload="mc.removeAll()">

<a id="menu1" href="#"><font size="+1">検索エンジン</font></a><br>
<div id="sub1">
<ul>
<li><a href="http://www.google.co.jp/">Google</a></li>
<li><a href="http://www.yahoo.co.jp/">Yahoo</a></li>
<li><a href="http://www.goo.ne.jp/">Goo</a></li>
</ul>
</div>

<a id="menu2" href="#"><font size="+1">WWW</font></a><br>
<div id="sub2">
<ul>
<li><a href="http://www.w3.org/">W3C</a></li>
</ul>
</div>

<a id="menu3" href="#"><font size="+1">その他</font></a><br>
<div id="sub3">
<ul>
<li><a href="http://www.microsoft.com/">Microsoft</a></li>
<li><a href="http://java.sun.com/">Java(SUN)</a></li>
</ul>
</div>

</body>
</html>

この回答への補足

わざわざありがとうございます。
エラーもなく正常に動いています。
これを是非使いたいと思います！
使用法、よろしくお願いします。

補足日時：2002/03/21 22:25
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： zzzzzz
  • 回答日時：

「縦に並べる」という部分の意味がよく分からないので補足をお願いします。


「Menu_List (ココをクリック)」に該当するものを縦に並べる、ということでしょうか。
(もしそうであればDHTMLを使用することになると思います)

表示先をポップアップウィンドゥではなく、右側フレームにしたい、ということに関しては、
popup = window.open("http://"+url,"MenuPopup",win_param);
hideMenu(act_mnu);
popup.focus()
の部分を
top.<frame1>.location.href = "http://"+url;
hideMenu(act_mnu);
top.<frame1>.focus();
とすればできます。
ここで、<frame1>の部分には右側フレームの名前を記入してください。
例えば、右側フレームを
<frame src="content.html" name="bodyframe">
のように定義しているのなら、１行目は
top.bodyframe.location.href = "http://"+url;
とします。

この回答への補足

右側フレームに表示はなんとかできました。
しかし「行183」「識別子がありません」とエラーが
でてしまいます。183行目(修正したところです)
に間違いがあるらしいのですがどうしていいか
わからないです・・・。そのエラーがでると修正前の
popup = window.open("http://"+url,"MenuPopup",win_param);
hideMenu(act_mnu);
popup.focus()
に戻ってしまうんですよ。
確認ですが<>はいらないんですよね？勝手に修正されて<right(フレーム名)>になってます・・・。
後、半角2マスはあける必要があるのですか？

縦に並べるはその通りです。これについても
教えていただけると助かります＾＾;

補足日時：2002/03/21 00:56
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報