C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[3]: javascriptからframesetタグのフレーム線変更


(過去ログ 24 を表示中)

[トピック内 4 記事 (1 - 4 表示)]  << 0 >>

■10371 / inTopicNo.1)  javascriptからframesetタグのフレーム線変更
  
□投稿者/ たろ (19回)-(2007/11/16(Fri) 13:45:49)

分類:[JavaScript] 

初歩的な質問ですが、

javascriptからframesetタグのフレーム線を変更したいのですがうまくいきません。
やりたい事は、「初期表示はデフォルトのフレーム線を表示して、ボタンが押されたら黒のsolid線に変更する。」です。


【ソース】

function ChangeFrameBorder()
{

document.all("test").frameborder= "0"; →これがうまくいかない。

document.all("test2").style.borderBottomStyle = "solid";
document.all("test2").style.borderBottomWidth = "1px";
document.all("test2").style.borderBottomColor = "black";
}

<frameset id="test" rows="20%,*" border="0" framespacing="0" frameborder="1"/>
<frame id="test2" src="HTML/test.htm" scrolling="auto" style="" noresize/>

引用返信 編集キー/
■10420 / inTopicNo.2)  Re[1]: javascriptからframesetタグのフレーム線変更
□投稿者/ mあ@反省中 (21回)-(2007/11/17(Sat) 01:24:24)
No10371 (たろ さん) に返信
> 初歩的な質問ですが、
>
> javascriptからframesetタグのフレーム線を変更したいのですがうまくいきません。
> やりたい事は、「初期表示はデフォルトのフレーム線を表示して、ボタンが押されたら黒のsolid線に変更する。」です。
>

初歩的じゃないよ。というか、初歩の質問で凡例一杯あるなら誰でも探せるはず。

結論はたぶん無理。

http://www.tohoho-web.com/html/frameset.htm

どうしても、ってなら、MSDN-OnLine のように、メニューとコンテンツをテーブルか div で囲って、
グリップバーを自前で用意してあげる、しか無いかな。グリップバーのグリップの部分は、Mozilla
のサイトに行けばたぶんダウンロードできるかもしれない。
今時フレーム分割ははやらないから止めた方がいいんじゃないかな。業務用でも。


[Frame.html]
<FRAMESET cols="30%,*" id="PFRAME" border="30" style="border:solid 100px red;color:black">
<FRAME name="MENU" src="Menu.html">
<FRAME name="MAIN" src="Main.html">
</FRAMESET>


function kuro() {
with(top.document.getElementById("PFRAME")) {
frameborder = "no";
setAttribute("borderspacing", "10");
border = "100";
}
}

↑がうまくいけば、枠が消えるはずだけど、消えない。
frameborder="no" をコメントすると、100 幅の分割線になるはずだが実際にはならない。

frameset への style:border は、枠、マージンみたいになるね。>IE、他は知らん。




引用返信 編集キー/
■10424 / inTopicNo.3)  Re[2]: javascriptからframesetタグのフレーム線変更
□投稿者/ mあ@反省中 (22回)-(2007/11/17(Sat) 02:16:44)
2007/11/17(Sat) 02:26:51 編集(投稿者)
2007/11/17(Sat) 02:26:40 編集(投稿者)

<pre><pre>> どうしても、ってなら、MSDN-OnLine のように、メニューとコンテンツをテーブルか div で囲って、
> グリップバーを自前で用意してあげる

このスクリプトは結構めんどくさいな。以前作ったことがあるけどイベント一杯使うからね。

こんな感じ。
マウスを高速に動かすとバーから外れてしまい、バーの移動が止まってしまうので、外れた時の工夫が
ちょいと必要だけど。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD> 
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>GripBarSample</TITLE>
<script>
var gripOn = false;
var shadow = null;
function init() {
	var grip = document.getElementById("gripBar");
	grip.onmousedown = function() {
		gripOn = true;
		var o = event.srcElement;
		shadow = o.cloneNode(true);
		shadow.style.filter = "alpha(opacity=50)";
		shadow.style.position = "absolute";
		shadow.style.zIndex = 100;
		window.status = o.offsetTop + "::" + o.offsetLeft + "::" + o.offsetHeight + "::" +o.offsetWidth;
		shadow.style.top = o.offsetTop + "px";
		shadow.style.left = o.offsetLeft + "px";
		
		document.body.appendChild(shadow);
		document.body.style.cursor = "wait";
		shadow.onmousemove = function() {
			if (gripOn) {
				if (shadow) {
					shadow.style.left = (event.x-10) + "px";
				}
			}
		};
		shadow.onmouseup = function() {
			gripOn = false;
			shadow.removeNode();
			document.body.style.cursor = "default";
		};
	};
}
window.onload = function() {
	init();
}
</script>
<style>
#mainFrame {
	margin:0px;
	width:100%;
	height:100%;
	border:solid 4px red;
	background-color:pink;
}
#leftContent {
	margin:0px;
	width:35%;
	height:90%;
	border:solid 2px lime;
	background-color:tomato;
	float:left;
}
#rightContent {
	margin:0px;
	width:100%;
	height:90%;
	border:dotted 2px yellow;
	background-color:snow;
	clear:none;
}
#gripBar {
	margin:0px;
	width:20px;
	height:90%;
	border:outset 2px blue;
	background-color:orange;
	float:left;
}
</style>
</HEAD>
<BODY style="margin:0px">
<div id="mainFrame">
<div id="leftContent"></div>
<div id="gripBar"></div>
<div id="rightContent"></div>
</div>


</BODY>
</HTML>

追記:
色変更はこれで問題なし。幅を細くするのも問題なし。幅を細くすると、右コンテンツ枠がその分広がる。
マウスドラッグ&リリース時のグリップバーの左位置から、全体の横幅から何%の位置にあるのかを割り出し
て左コンテンツにその値を設定してあげればOK。
左コンテンツだけでOK。なぜかっていうと、float 指定しているから。

がんばって下さい。

# 砂時計にしているのは、マウスドラッグは基本的に範囲選択なので、それを防ぐため。MSDN もドラッグ中
# は砂時計になっていますね。
</pre></pre>

引用返信 編集キー/
■10578 / inTopicNo.4)  Re[3]: javascriptからframesetタグのフレーム線変更
□投稿者/ たろ (20回)-(2007/11/21(Wed) 09:56:42)
丁寧なご回答ありがとうございます!

結局、FRAMESETのボーダーは消して、フレームのボーダーを操作するようにしました。


解決済み
引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

管理者用

- Child Tree -