【www.gdgbn.com--js教程】

一种没有边框及菜单栏、工具栏、地址栏、状态栏等的无边框窗口(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=http:///htmldata/2005-03-19/1111163004.html#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";         //窗口右上角关闭“按钮”的图片
closebar2="close2.gif";       //鼠标悬停时关闭“按钮”的图片
icon="icon.gif";              //窗口左上角的小图标
//***************定制结束*****************

//*******开始定义noBorderWin()函数********
function noBorderWin(fileName,w,h,titleBg,moveBg,titleColor,titleWord,scr)
{
  var contents="<html>"+ //变量contents是一个字符串变量,它是NBW窗口中的所有代码。

本文来源:http://www.gdgbn.com/wangyezhizuo/14036/