真是孤陋寡闻了,搞个javascript会有这么多问题,新手就是新手啊
满以为原来做的那个浮动窗口很不错了,几乎没有什么多余的代码
而且,在IE和FireFox上测试没有任何错误。但把这个东西放到实际的应用场景里就傻了,
SELECT元素总是覆盖浮动DIV。让我极度郁闷,还有有发达的网络,让我明白怎么回事鸟。
如今原来那段代码改成以下的代码了。
恩,这下OK了,放个空的frame做背景跟着拖动,HOHO
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test sWin</title>
<script type="text/javascript">
function inittitle(frame,odiv,title)
{
title.onmousedown=function(e) {
if (e==null) e=window.event;
var x=e.layerX?e.layerX:e.offsetX;
var y=e.layerY?e.layerY:e.offsetY;
if(title.setCapture) { // for ie brower
title.setCapture();
document.onmousemove=function(e) {
if (e==null) e=window.event;
if (!e.pageX) e.pageX=e.clientX;
if (!e.pageY) e.pageY=e.clientY;
var tx=e.pageX-x;
var ty=e.pageY-y;
odiv.style.left=tx + "px";
odiv.style.top=ty + "px";
frame.style.left = odiv.style.left;
frame.style.top = odiv.style.top;
};
document.onmouseup=function(){
title.releaseCapture();
document.onmousemove=null;
document.onmouseup=null;
};
} else if(document.addEventListener)
{
function mousemove(e) {
if (e==null) e=window.event;
if (!e.pageX) e.pageX=e.clientX;
if (!e.pageY) e.pageY=e.clientY;
var tx=e.pageX-x;
var ty=e.pageY-y;
odiv.style.left=tx + "px";
odiv.style.top=ty + "px";
frame.style.left = odiv.style.left;
frame.style.top = odiv.style.top;
};
function mouseup(e) {
document.removeEventListener("mousemove",mousemove, false);
document.removeEventListener("mouseup",mouseup,false);
};
document.addEventListener("mousemove",mousemove, false);
document.addEventListener("mouseup", mouseup, false);
}
};
}
function initclose(frame,odiv,close)
{
close.onmouseout=function(e)
{
var css = "text-decoration:none; font-size:13px; "
+ "font-weight:bold; color:#ffffff";
close.style.cssText = css;
};
close.onmouseover=function(e)
{
var css = "text-decoration:none; font-size:13px; "
+ "font-weight:bold; background-color:#FFD0F0";
close.style.cssText = css;
};
close.onmousedown=function(e)
{
;
}
close.onclick=function(e)
{
odiv.style.display="none";
frame.style.display="none";
}
}
function closeswin(){}
function donothing(){}
function sWin()
{
var csst= "position:absolute; "
+ "border:2px solid #0040A0; "
+ "left:10px; top:10px; "
+ "width:322px; height:280px; "
+ "z-index:10000";
var cssf= "position:absolute; "
+ "left:10px; top:10px; "
+ "width:322px; height:280px; "
+ "386px;z-index:9000; ";
var cssf2= "position:absolute; "
+ "left:10px; top:10px; "
+ "width:326px; height:284px; "
+ "386px;z-index:9000; ";
var css1= "height:18px; "
+ "background-color:#0040A0; ";
var css2 = "height:262px; background-color:#FFFFFF; ";
var d1 = document.createElement("div");
var d2 = document.createElement("div");
var odiv = document.createElement("div");
var frame = document.createElement("iframe");
frame.src = "javascript:return false;";
frame.frameborder="0";
frame.scrolling = "no";
odiv.appendChild(d1);
odiv.appendChild(d2);
document.body.appendChild(odiv);
document.body.appendChild(frame);
odiv.style.cssText = csst;
frame.style.cssText = cssf;
d1.style.cssText = css1;
d2.style.cssText = css2;
if (d1.setCapture) frame.style.cssText = cssf2;
d1.innerHTML="<table border=/"0/" width=/"100%/" cellpadding=/"0/" cellspacing=/"0/">"
+"<tr><td style=/"color:#ffffff; font-size:13px; font-weight:bold;"
+"padding-left:2px; width:500px; cursor:default;/" "
+"id=/"sWin_title/" valign=/"top/">WINDOWS风格DIV浮动窗口...</td>"
+"<td align=/"center/" onmousedown=/"javascript:donothing();/">"
+"<a href=/"javascript:closeswin();/" id=/"sWin_close/" "
+"style=/"text-decoration:none; font-size:13px; "
+"font-weight:bold; color:#ffffff/">×</td></tr></table>";
var title = document.getElementById("sWin_title");
var close = document.getElementById("sWin_close");
inittitle(frame,odiv,title);
initclose(frame,odiv,close);
this.client = d2;
}
var win1;
window.onload = function(){ win1=sWin();}
</script>
</head>
<body>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<select id="Select1" style="width: 325px">
<option selected="selected">Red</option>
<option>Gray</option>
<option>Green</option>
<option>Yellow</option>
<option>Black</option>
<option>White</option>
<option>Pink</option>
<option>Blue</option>
<option></option>
</select>
</body>
</html>
满以为原来做的那个浮动窗口很不错了,几乎没有什么多余的代码
而且,在IE和FireFox上测试没有任何错误。但把这个东西放到实际的应用场景里就傻了,
SELECT元素总是覆盖浮动DIV。让我极度郁闷,还有有发达的网络,让我明白怎么回事鸟。
如今原来那段代码改成以下的代码了。
恩,这下OK了,放个空的frame做背景跟着拖动,HOHO
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test sWin</title>
<script type="text/javascript">
function inittitle(frame,odiv,title)
{
title.onmousedown=function(e) {
if (e==null) e=window.event;
var x=e.layerX?e.layerX:e.offsetX;
var y=e.layerY?e.layerY:e.offsetY;
if(title.setCapture) { // for ie brower
title.setCapture();
document.onmousemove=function(e) {
if (e==null) e=window.event;
if (!e.pageX) e.pageX=e.clientX;
if (!e.pageY) e.pageY=e.clientY;
var tx=e.pageX-x;
var ty=e.pageY-y;
odiv.style.left=tx + "px";
odiv.style.top=ty + "px";
frame.style.left = odiv.style.left;
frame.style.top = odiv.style.top;
};
document.onmouseup=function(){
title.releaseCapture();
document.onmousemove=null;
document.onmouseup=null;
};
} else if(document.addEventListener)
{
function mousemove(e) {
if (e==null) e=window.event;
if (!e.pageX) e.pageX=e.clientX;
if (!e.pageY) e.pageY=e.clientY;
var tx=e.pageX-x;
var ty=e.pageY-y;
odiv.style.left=tx + "px";
odiv.style.top=ty + "px";
frame.style.left = odiv.style.left;
frame.style.top = odiv.style.top;
};
function mouseup(e) {
document.removeEventListener("mousemove",mousemove, false);
document.removeEventListener("mouseup",mouseup,false);
};
document.addEventListener("mousemove",mousemove, false);
document.addEventListener("mouseup", mouseup, false);
}
};
}
function initclose(frame,odiv,close)
{
close.onmouseout=function(e)
{
var css = "text-decoration:none; font-size:13px; "
+ "font-weight:bold; color:#ffffff";
close.style.cssText = css;
};
close.onmouseover=function(e)
{
var css = "text-decoration:none; font-size:13px; "
+ "font-weight:bold; background-color:#FFD0F0";
close.style.cssText = css;
};
close.onmousedown=function(e)
{
;
}
close.onclick=function(e)
{
odiv.style.display="none";
frame.style.display="none";
}
}
function closeswin(){}
function donothing(){}
function sWin()
{
var csst= "position:absolute; "
+ "border:2px solid #0040A0; "
+ "left:10px; top:10px; "
+ "width:322px; height:280px; "
+ "z-index:10000";
var cssf= "position:absolute; "
+ "left:10px; top:10px; "
+ "width:322px; height:280px; "
+ "386px;z-index:9000; ";
var cssf2= "position:absolute; "
+ "left:10px; top:10px; "
+ "width:326px; height:284px; "
+ "386px;z-index:9000; ";
var css1= "height:18px; "
+ "background-color:#0040A0; ";
var css2 = "height:262px; background-color:#FFFFFF; ";
var d1 = document.createElement("div");
var d2 = document.createElement("div");
var odiv = document.createElement("div");
var frame = document.createElement("iframe");
frame.src = "javascript:return false;";
frame.frameborder="0";
frame.scrolling = "no";
odiv.appendChild(d1);
odiv.appendChild(d2);
document.body.appendChild(odiv);
document.body.appendChild(frame);
odiv.style.cssText = csst;
frame.style.cssText = cssf;
d1.style.cssText = css1;
d2.style.cssText = css2;
if (d1.setCapture) frame.style.cssText = cssf2;
d1.innerHTML="<table border=/"0/" width=/"100%/" cellpadding=/"0/" cellspacing=/"0/">"
+"<tr><td style=/"color:#ffffff; font-size:13px; font-weight:bold;"
+"padding-left:2px; width:500px; cursor:default;/" "
+"id=/"sWin_title/" valign=/"top/">WINDOWS风格DIV浮动窗口...</td>"
+"<td align=/"center/" onmousedown=/"javascript:donothing();/">"
+"<a href=/"javascript:closeswin();/" id=/"sWin_close/" "
+"style=/"text-decoration:none; font-size:13px; "
+"font-weight:bold; color:#ffffff/">×</td></tr></table>";
var title = document.getElementById("sWin_title");
var close = document.getElementById("sWin_close");
inittitle(frame,odiv,title);
initclose(frame,odiv,close);
this.client = d2;
}
var win1;
window.onload = function(){ win1=sWin();}
</script>
</head>
<body>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<select id="Select1" style="width: 325px">
<option selected="selected">Red</option>
<option>Gray</option>
<option>Green</option>
<option>Yellow</option>
<option>Black</option>
<option>White</option>
<option>Pink</option>
<option>Blue</option>
<option></option>
</select>
</body>
</html>