一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

全新无边框窗口实现方式(转自yesky)

时间:2022-06-30 09:56:31 编辑:袖梨 来源:一聚教程网

一种没有边框及菜单栏、工具栏、地址栏、状态栏等的无边框窗口(CW)曾经一度很流行,被很多网站尤其是个人网站所采用,CW也有现成的源码供网友们使用,但是最初的CW使用起来很不方便,有两个JS文件,还要设置一些参数,这对一些初学者来讲是很困难的事情。所以我就有了一个想法:重新写一个全新的无边框窗口,只用一个函数实现,以供网友方便使用。
  我给这个全新的无边框窗口起名为NBW,NBW即No Border Window的缩写,只是想区别于CW。这个无边框窗口可以随意拖动、最小化、关闭等等,不仅在IE5/IE6中测试通过,在腾讯的TE中测试也没有问题。
  首先看一下实际效果:
  
  调用的过程如下:(noBorderWin函数是事先定义好的,后面会对函数的实现过程进行分析)
  noBorderWin(fileName,w,h,titleBg,moveBg,titleColor,titleWord,scr)
  各参数的说明如下:
  fileName :要打开的文件。
  w     :窗口的宽度(px)。
  h     :窗口的高度(px)。
  titleBg  :窗口“标题栏”的背景色以及窗口边框颜色。
  moveBg  :拖动窗口时“标题栏”的背景色以及窗口边框颜色。
  titleColor:窗口“标题栏”文字的颜色。
  titleWord :窗口“标题栏”中显示的文字。
  scr    :窗口中是否出现滚动条。取值yes/no或者1/0。
  我们看到,窗口样式全部在函数的参数中设置,从而保证了使用的便捷。比如,上面例子的代码如下:
  <a href=#none onclick=noBorderWin('test.html','400','240','#000000','#333333','#CCCCCC','一个无边窗口的测试例子','yes');>点击此处将弹出NBW窗口</a>
  如何使用已经说完了,那么,这个函数具体是如何实现的呢?下面,我们就以直接给出源码并加以注释的方式进行讲解。为了容易区分阅读,代码部分使用灰色,注释部分使用红色。
  代码和注释如下:
//--------------------------------------------------------------------------------------------------
<script language=javascript>
//*****定制NBW窗口中几个用到的图片的路径*****
minimizebar="minimize.gif";     //窗口右上角最小化“按钮”的图片
minimizebar2="minimize2.gif"; //鼠标悬停时最小化“按钮”的图片
closebar="close.gif";    //窗口右上角关闭“按钮”的图片

热门栏目