20CN网络安全小组论坛 - 网站建设 - 一个不错的无边框窗口

论坛: 网站建设标题: 一个不错的无边框窗口

作者: wuhuan [wuhuan]

论坛用户

http://www.webucn.com/zz/nbw/
代码如下
<html>

<head>
<script language=javascript>

minimizebar="minimize.gif";   //窗口右上角最小化“按钮”的图片
minimizebar2="minimize2.gif"; //鼠标悬停时最小化“按钮”的图片
closebar="close.gif";         //窗口右上角关闭“按钮”的图片
closebar2="close2.gif";       //鼠标悬停时关闭“按钮”的图片
icon="icon.gif";              //窗口左上角的小图标

function noBorderWin(fileName,w,h,titleBg,moveBg,titleColor,titleWord,scr)  //定义一个弹出无边窗口的函数，能数意义见下面“参数说明”，实际使用见最后的实例。
/*
------------------参数说明-------------------
fileName   ：无边窗口中显示的文件。
w　　　　   ：窗口的宽度。
h　　　　   ：窗口的高度。
titleBg    ：窗口“标题栏”的背景色以及窗口边框颜色。
moveBg     ：窗口拖动时“标题栏”的背景色以及窗口边框颜色。
titleColor ：窗口“标题栏”文字的颜色。
titleWord  ：窗口“标题栏”的文字。
scr        ：是否出现滚动条。取值yes/no或者1/0。
--------------------------------------------
*/
{
  var allWin="<head>"+
             "  <OBJECT id=hhctrl type='application/x-oleobject' classid='clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11'><param name='Command' value='minimize'></object>"+
"</head>"+
             "<frameset rows='19,*' border=0 frameborder=0 id=tw>"+
             "  <frame name=header scrolling=no noresize>"+
     "  <frame name=main src="+fileName+" scrolling="+scr+">"+
     "</frameset>";  //变量allWin为整个窗口中的内容
  var topWin="<body topmargin=0 leftmargin=0>"+
             "  <table cellpadding=0 cellspacing=0 width=100% height=100%>"+
"    <tr height=20 bgcolor="+titleBg+" onselectstart='return false' onmousedown='x=event.x;y=event.y;setCapture();top.main.document.body.style.border=\"1px solid "+moveBg+"\";this.bgColor=\""+moveBg+"\"' onmouseup='releaseCapture();top.main.document.body.style.border=\"1px solid "+titleBg+"\";this.bgColor=\""+titleBg+"\"' onmousemove='if(event.button==1)top.moveTo(screenLeft+event.x-x,screenTop+event.y-y);'>"+
"      <td width=21 align=center><img width=12 width=12 src="+icon+"></td>"+
"      <td style=\"font-family:宋体; font-size:12px; color:"+titleColor+";\"><span style='top:1;position:relative;cursor:default;'>"+titleWord+"</span></td>"+
"    </tr>"+
"  </table>"+
"  <div style='position:absolute; left:"+(w-30)+"px; top:4px; width:12px; height:12px; z-index:100'><img border=0 width=12 height=12 alt=最小化 src="+minimizebar+" onmousedown=top.hhctrl.Click(); onmouseover=this.src='"+minimizebar2+"' onmouseout=this.src='"+minimizebar+"'></div>"+
"  <div style='position:absolute; left:"+(w-14)+"px; top:4px; width:12px; height:12px; z-index:100'><img border=0 width=12 height=12 alt=关闭 src="+closebar+" onmousedown=top.close(); onmouseover=this.src='"+closebar2+"' onmouseout=this.src='"+closebar+"'></div>"+
"</body>";  //变量topWin为Title部分的内容
  nbw=window.open('','','fullscreen=yes');  //打开一个全屏窗口
  nbw.resizeTo(w,h);  //重新定制窗口大小
  nbw.moveTo((screen.width-w)/2,(screen.height-h)/2);  //把窗口移动到屏幕中央
  nbw.document.writeln(allWin);  //向整个窗口中写入内容
  nbw.header.document.writeln(topWin);  //向Title部分写入内容
  nbw.main.document.body.style.border="1px solid "+titleBg;
}
</script>
</head>

<body>


<button onclick=noBorderWin('test.html','400','240','#000000','#333333','#CCCCCC','一个无边窗口的测试例子','yes');>open</button>

<br><br>


<a href=#none onclick=noBorderWin('test.html','400','240','#000000','#333333','#CCCCCC','一个无边窗口的测试例子','yes');>open</a>

<br><br>


<img src=none height=30 width=60 alt=open style="cursor:hand" onclick=noBorderWin('test.html','400','240','#000000','#333333','#CCCCCC','一个无边窗口的测试例子','yes');>

</body>

</html>

[此贴被玉蝴蝶(wuhuan) 在 5月22日4时26分编辑过]

地主发表时间: 5/22 4:12

论坛: 网站建设