OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

JavaScriptで質問があります。

  • すぐに回答を!
  • 質問No.238573
  • 閲覧数88
  • ありがとう数1
  • 気になる数0
  • 回答数4
  • コメント数0

お礼率 11% (11/98)

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

質問者が選んだベストアンサー

  • 回答No.4
レベル10

ベストアンサー率 61% (70/113)

・レイアウト変更について
HTMLを変更すれば可能です。
例えばBODYの内容を

<a id="menu1" href="#"><font size="+1">検索エンジン</font></a><br>
<div id="sub1">
&nbsp;&nbsp;<a href="http://www.google.co.jp/">Google</a><br>
&nbsp;&nbsp;<a href="http://www.yahoo.co.jp/">Yahoo</a><br>
&nbsp;&nbsp;<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">
&nbsp;&nbsp;<a href="http://www.w3.org/">W3C</a><br>
</div>

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

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

> サブメニューは画像でも機能すると書いてありますが
> メニューを画像ファイルにすることはできますか?
可能です。IMGタグにidを指定してください。
お礼コメント
0423a

お礼率 11% (11/98)

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

その他の回答 (全3件)

  • 回答No.1
レベル10

ベストアンサー率 61% (70/113)

「縦に並べる」という部分の意味がよく分からないので補足をお願いします。 「Menu_List (ココをクリック)」に該当するものを縦に並べる、ということでしょうか。 (もしそうであればDHTMLを使用することになると思います) 表示先をポップアップウィンドゥではなく、右側フレームにしたい、ということに関しては、 popup = window.open("http://" ...続きを読む
「縦に並べる」という部分の意味がよく分からないので補足をお願いします。
「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">
のように定義しているのなら、1行目は
top.bodyframe.location.href = "http://"+url;
とします。
補足コメント
0423a

お礼率 11% (11/98)

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

縦に並べるはその通りです。これについても
教えていただけると助かります^^;
投稿日時 - 2002-03-21 00:56:42


  • 回答No.2
レベル10

ベストアンサー率 61% (70/113)

> 「識別子がありません」 フレームの名前が間違っているか、あるいは変数名のうつし間違いだと思います。 > 確認ですが<>はいらないんですよね? はい。フレーム名がrightなら top.right.location.href = "http://" + url; hideMenu(act_mnu); top.right.focus(); と記 ...続きを読む
> 「識別子がありません」
フレームの名前が間違っているか、あるいは変数名のうつし間違いだと思います。

> 確認ですが<>はいらないんですよね?
はい。フレーム名が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>
補足コメント
0423a

お礼率 11% (11/98)

わざわざありがとうございます。
エラーもなく正常に動いています。
これを是非使いたいと思います!
使用法、よろしくお願いします。
投稿日時 - 2002-03-21 22:25:21
  • 回答No.3
レベル10

ベストアンサー率 61% (70/113)

それでは使用法を書いておきます。 function init() { の前に記述されているJavascriptに関しては変更しないでください。 (javascript部分はほとんど変更しないように作ってあります) 以下では、「Menu_List (ココをクリック)」に相当するものを「メニュー」、 メニューをクリックしたときに開くものを「サブメニュー」と呼ぶことにします。 1.HTMLの ...続きを読む
それでは使用法を書いておきます。
function init() {
の前に記述されているJavascriptに関しては変更しないでください。
(javascript部分はほとんど変更しないように作ってあります)

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

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

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

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

以上です。

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

不明なことがありましたら補足いたします。
補足コメント
0423a

お礼率 11% (11/98)

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

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

後もう一つ
サブメニューは画像でも機能すると書いてありますが
メニューを画像ファイルにすることはできますか?
投稿日時 - 2002-03-22 01:22:13
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ