html5窗⼝最⼩化,js实现窗⼝（⽀持拉伸，拖拽，最⼤化，最⼩化,
滚动条，可定制，兼容五。。。
⾬亭原创，转载注明
执⾏效果：
⼀窗体实现的功能：
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
html横向滚动条样式"+ "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,

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。