雨亭原创，转载注明

执行效果：

一窗体实现的功能：

1.鼠标拖动.

2.八个方向的拉伸.

3.可定制窗口标题,内容(文本或HTML),初始大小和位置,最小宽度,高度.

4.支持滚动条.

5.关闭窗体.

6.最大化,最小化窗体.

7.记录最大,最小化之前的位置,可还原回去.

8.可创建多个window窗口.

二浏览器支持情况:

浏览器 版本

1.Chrome 18.0.1025.152 2.Safari 5.1.5 3.Firefox 11.0 4.Opera 11.62 5.IE6,IE7,IE8,IE9

css代码：

/*窗口样式

.winDiv {position: absolute;background-color:#FFFFFF;}

/*拖动样式

.winHead {position: absolute;top:0px;height:

20px;width:100%;background-color:#336699; cursor:

move;z-index:2;}

/*窗体标题

.winTitle{float:left;color:white;font-size:14px;}

/*关闭窗口

.winClose{float:right;cursor:default;width:14px;height:14px;padding-right:1px;}

/*最大化

.winMax{float:right;cursor:default;width:14px;height:14px;padding-right:1px;}

/*最小化

.winMin{float:right;cursor:default;width:14px;height:14px;padding-right:1px;}

.IE6Hack{height:0px;margin:0px;border:0px;padding:0px;width:100%;*height:20px;}

/*窗体内容

.winContent{position:

absolute;top:20px;bottom:0px;width:100%;color:#336699;

overflow:scroll;*top:0px;*height:100%;*bottom:0px;z-index:1;}

/*拉伸主样式

.resize {position: absolute;width: 2px;height: 2px;background:

#336699;}

/*左上

.resize-tl {top: -2px;left: -2px;cursor: nw-resize;

font-size:0}

/*中上

.resize-tm {top: -2px;width:100%;cursor: n-resize;

font-size:0}

/*右上

.resize-tr {top: -2px;right: -2px;cursor: ne-resize;

font-size:0}

/*中右

.resize-ml {top: 0px;height:100%;left: -2px;cursor: w-resize;

font-size:0}

/*中左

.resize-mr {top: 0px;height:100%;right: -2px;cursor: e-resize;

font-size:0}

/*下左

.resize-bl {bottom: -2px;left: -2px;cursor: sw-resize;

font-size:0}

/*下中

.resize-bm {bottom: -2px;left: 0px;width:100%;cursor: s-resize;

font-size:0}

/*下右

.resize-br {bottom: -2px;right: -2px;cursor: se-resize;

font-size:0}

html代码：

/p>

Strict//EN" "DTD/xhtml1-strict.dtd">

lang="en" xml:lang="en">

content="text/html; charset=gb2312" />

测试窗口

rel="stylesheet"

href="win.css">

var content1 = "1.鼠标拖动
"+

"2.八个方向的拉伸
"+

"3.可定制窗口标题,内容(文本或HTML),初始大小和位置,最小宽度,高度.
"+

"4.支持滚动条
"+

"5.关闭窗体
"+

"6.最大化,最小化窗体
"+

"7.记录最大,最小化之前的位置,可还原回去
"+

"8.可创建多个window窗口
";

var content2 =

"浏览器 版本

"+ "Chrome 18.0.1025.152

"+ "Safari 5.1.5

"+ "Firefox 11.0 
"+ "Opera 11.62

"+ "IE6,IE7,IE8,IE9 ";

var win1 = new DivWindow({ winTitle:

"窗体支持的功能", winContent:content1 ,initX: 180,

initY: 80, initW: 200, initH: 200 });

runWindow(win1);

var win2 = new DivWindow({ winTitle: "浏览器支持情况", winContent:content2 ,initX: 280, initY: 180, initW: 200, initH: 200

});

runWindow(win2);

javascript代码:

var curSelected = null

; /*当前操作窗口

var winNumber = 0 ;

/*倒数第二个创建的窗口的Id

var winList = new

Array(); /*窗口对象列表

var winIdList = new

Array(); /*窗口对象Id列表

var mouseX = 0, mouseY = 0

; /*当前鼠标位置

var lastMouseX = 0, lastMouseY = 0 ;/*上次鼠标位置

var zIndex = 2

; /*z轴坐标,因为CSS中最大z-index为2,所以这里设为2

/*注册事件兼容代码

function addEvent(o , t , f )

{

if(o.addEventListener)

o.addEventListener(t,f ,false);

if(o.attachEvent)

o.attachEvent("on"+t,f); }

/*将窗体对象地址和窗体Id进行关联,将新创建窗口添加进body中

function runWindow(win)

{ winList[winList.length] = win ;

winIdList[winIdList.length] = win.winDiv.id

;

/*将窗体加入到Body中

document.body.a(win.winDiv);

}

/*根据窗体Id获得窗体对象地址

function getWinById(id)

{

for(var w in winIdList )

{

if(id == winIdList[w])

return

winList[w] ;

}

}

/*根据窗体对象地址删除窗体Id和窗体对象地址

function delWin(win)

{

for(var w in winList)

{

if(win == winList[w])

{

winList[w] =

null ;

winIdList[w]

= null ;

return

;

}

}

}

/*窗体构造函数

function DivWindow(config)

{

var props =

{

winTitle:

"窗口1", /*窗体标题

winContent:

"hellojames!", /*窗体内容

initX:

50,

initY:50, /*保留初始位置,最大,最小化时使用

initW:

50,

initH:50, /*保留初始大小,最大,最小化时使用

minWidth:200,

minHeight:20, /*最小宽度,最小高度

history:true, /*是否保存前一个窗体位置大小信息

elmX:

50, elmY:

50, /*当前窗体位置

elmW:

50, elmH:

50, /*当前窗体大小

handles:

["tl","tm","tr","ml","mr","bl","bm","br"], /*拉伸窗体的8个方向

element:

null, /*窗体元素

handle:

null, /*当前要触发事件的元素只针对拖拽和拉伸

ie6Hack:

1 , /*针对IE6下拉伸上下拉伸窗口时布局混乱的解决办法,鼠标每移动一次就增加或减少窗体宽度1px

isIE6:

false /*是否是IE6

};

for (var p in props)

this[p] =

(typeof config[p] == "undefined") ? props[p] : config[p];

this.isIE6 =

document.all&&!window.XMLHttpRequest;

/*判断是否是IE6

/*给当前窗体的大小和位置初始化

this.elmX = this.initX ;

this.elmY = this.initY ;

this.elmW = this.initW ;

this.elmH = this.initH ;

/*创建窗体

var winDiv = document_createElement_x("div");