2023年6月20日发(作者:)
html5窗⼝最⼩化,js实现窗⼝(⽀持拉伸,拖拽,最⼤化,最⼩化,滚动条,可定制,兼容五。。。⾬亭原创,转载注明执⾏效果:⼀窗体实现的功能:1.⿏标拖动.2.⼋个⽅向的拉伸.3.可定制窗⼝标题,内容(⽂本或HTML),初始⼤⼩和位置,最⼩宽度,⾼度.4.⽀持滚动条.5.关闭窗体.6.最⼤化,最⼩化窗体.7.记录最⼤,最⼩化之前的位置,可还原回去.8.可创建多个window窗⼝.⼆浏览器⽀持情况:浏览器 版本 18.0.1025.152 5.1.5 x 11.0 11.62 6,IE7,IE8,IE9css代码:/*窗⼝样式.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/">lang="en" xml:lang="en">content="text/html; charset=gb2312" />测试窗⼝rel="stylesheet"href="">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 ;/*倒数第⼆个创建的窗⼝的Idvar winList = newArray(); /*窗⼝对象列表var winIdList = newArray(); /*窗⼝对象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(ntListener)ntListener(t,f ,false);if(Event)Event("on"+t,f); }/*将窗体对象地址和窗体Id进⾏关联,将新创建窗⼝添加进body中function runWindow(win){ winList[] = win ;winIdList[] = ;/*将窗体加⼊到Body中.a();}/*根据窗体Id获得窗体对象地址function getWinById(id){for(var w in winIdList ){if(id == winIdList[w])returnwinList[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下拉伸上下拉伸窗⼝时布局混乱的解决办法,⿏标每移动⼀次就增加或减少窗体宽度1pxisIE6:false /*是否是IE6};for (var p in props)this[p] =(typeof config[p] == "undefined") ? props[p] : config[p];6 =&&!pRequest;/*判断是否是IE6/*给当前窗体的⼤⼩和位置初始化 = ; = ; = ; = ;/*创建窗体var winDiv = document_createElement_x("div");
2023年6月20日发(作者:)
html5窗⼝最⼩化,js实现窗⼝(⽀持拉伸,拖拽,最⼤化,最⼩化,滚动条,可定制,兼容五。。。⾬亭原创,转载注明执⾏效果:⼀窗体实现的功能:1.⿏标拖动.2.⼋个⽅向的拉伸.3.可定制窗⼝标题,内容(⽂本或HTML),初始⼤⼩和位置,最⼩宽度,⾼度.4.⽀持滚动条.5.关闭窗体.6.最⼤化,最⼩化窗体.7.记录最⼤,最⼩化之前的位置,可还原回去.8.可创建多个window窗⼝.⼆浏览器⽀持情况:浏览器 版本 18.0.1025.152 5.1.5 x 11.0 11.62 6,IE7,IE8,IE9css代码:/*窗⼝样式.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/">lang="en" xml:lang="en">content="text/html; charset=gb2312" />测试窗⼝rel="stylesheet"href="">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 ;/*倒数第⼆个创建的窗⼝的Idvar winList = newArray(); /*窗⼝对象列表var winIdList = newArray(); /*窗⼝对象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(ntListener)ntListener(t,f ,false);if(Event)Event("on"+t,f); }/*将窗体对象地址和窗体Id进⾏关联,将新创建窗⼝添加进body中function runWindow(win){ winList[] = win ;winIdList[] = ;/*将窗体加⼊到Body中.a();}/*根据窗体Id获得窗体对象地址function getWinById(id){for(var w in winIdList ){if(id == winIdList[w])returnwinList[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下拉伸上下拉伸窗⼝时布局混乱的解决办法,⿏标每移动⼀次就增加或减少窗体宽度1pxisIE6:false /*是否是IE6};for (var p in props)this[p] =(typeof config[p] == "undefined") ? props[p] : config[p];6 =&&!pRequest;/*判断是否是IE6/*给当前窗体的⼤⼩和位置初始化 = ; = ; = ; = ;/*创建窗体var winDiv = document_createElement_x("div");
发布评论