最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
全新无边框窗口实现方式(转自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"; //窗口右上角关闭“按钮”的图片
我给这个全新的无边框窗口起名为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"; //窗口右上角关闭“按钮”的图片
相关文章
- 《无限暖暖》天星之羽获得位置介绍 12-20
- 《流放之路2》重铸台解锁方法介绍 12-20
- 《无限暖暖》瞄准那个亮亮的成就怎么做 12-20
- 《无限暖暖》魔气怪终结者完成方法 12-20
- 《无限暖暖》曙光毛团获得位置介绍 12-20
- 《无限暖暖》日光果获得位置介绍 12-20