打印

[原创]xWin之JS版(2-26更新)

hutia [楼主]

诘屈聱牙

荣誉管理团队

帖子: 4719
体力: 14636
威望: 383
当前: 江苏苏州
离线: 1 天

专长 JS,PHP,ASP

1^# 大中小发表于 2006-2-18 18:14

俺最近似乎在反反复复的折腾xWin。。。。希望版主不要打我.......

之所以又开一帖是因为上一贴的侧重点在htc上，俺现在决定抛弃这个很有前途的东西，把侧重点放到兼容性上，开发一个x系列. So 大家把那个HTC的忘记了吧........

目前的代码兼容IE6.0 & FF 1.5 (因为俺以前一直都是IE Only, 所以转头研究兼容性实在是水平有限，目前的代码在FF上还是有许多Bug.....伤心啊)

构思中的x系列都是采用JS, 在JS中导入相应的css, 使用的时候还是一样简便：一个<script src="...">后就可以直接使用了

--------------------------更新分割线--------------------------
bound0大哥说得对啊，兼容性真的能把人折腾死.........

目前代码应该没什么bug了，兼容IE6.0 & FF 1.5, 通过xHTML 的Transitional验证和 CSS 验证

为了能通过验证，只好再次改变使用的方式，改为用DIV实现，方法：

复制内容到剪贴板

代码:

<div class="xWin">

    <span class="xWinSetting"> width="200" top="270" left="140" title="我就是传说中那个超长的窗口标题"</span>

    content

</div>

下面是演示版：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>xWin HTC Demo</title>
<style type="text/css">
body {
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	overflow:auto;
}
.xWin {
	position:absolute;
	cursor:default;
	border-width:2px;
	border-style:outset;
	padding:0px;
	font-size:12px;
	overflow:hidden;
	display:block;
}
.xWin .xWinSetting {
	display:none;
}
.xWin .xTitle {
	color:#FFFFFF;
	height:20px;
	display:block;
}
.xWin .xTitle input {
	background-color:transparent;
	color:#FFFFFF;
	border-width:0px;
	border-style:solid;
	height:20px;
	width:16px;
	line-height:20px;
	font-family:webdings;
	font-size:10px;
	margin:0px;
	padding:0px;
	text-align:center;
	float:right;
	display:block;
}
.xWin .xTitle .xWinTitleCloseButton {
	
}
.xWin .xTitle .xWinTitleMaxButton {
	
}
.xWin .xTitle .xWinTitleMinButton {
	
}
.xWin .xTitle .xWinTitleContent {
	color:#FFFFFF;
	font-size:12px;
	height:18px;
	line-height:20px;
	margin:0px;
	padding-left:3px;
	float:left;
	display:block;
	overflow:hidden;
	white-space:nowrap;
	text-align:left;
	cursor:default;
}
.xWin .xWinBody {
	margin:0px;
	background-color:#FFFFFF;
	color:#000000;
	padding:3px;
	font-size:12px;
	overflow:auto;
	position:relative;
	display:block;
}
.xShadow {
	position:absolute;
	display:block;
	background-Color:#000000;
	color:#FFFFFF;
}
</style>
<script type="text/javascript">
//<![CDATA[
//********************/
//  x 系列之 xWin
//  作者：Hutia
//  未经同意不得转载或用于商业用途
//********************/
/*
说明：
  x系列是Hutia开发的系列JS代码，配合相应的css后可以实现快速的自定义标签
  目前x系列支持的浏览器类型为：IE5.5, FF1.5
  xWin的标签为 <div class="xwin">content</div>
  支持属性：
    int left, int top, int width, int height
  支持方法：
    Close(), Destroy(), Max([bolean Variable]), Min([bolean Variable]), 
    MoveTo(int x, int y), ResizeTo(int x, int y), SetContent(string Variable | htmlObject Variable)
	SetTitle(string Variable), ShowHide()
*/
//**载入CSS*****
var xWinCssFilePath="sp\/css\/xwin.css";
//document.write("<style>@import url("+xWinCssFilePath+");</style>");
//**检测浏览器种类*****
var BROWSERNAME="";
switch(navigator.appName.toLowerCase()){
	case "netscape":
		BROWSERNAME="ns";
	break;
	case "microsoft internet explorer":
	default:
		BROWSERNAME="ie";
	break;
}
//**设置初始化变量******
switch(BROWSERNAME){
	case "ns":
		window.addEventListener("load",_xWin_init,false);
	break;
	case "ie":
	default:
		window.attachEvent("onload",_xWin_init);
}
//**设置全局定时器******
if(typeof(__xSeriaTimer__)=="undefined"){
	var __xSeriaTimer__={
		events:new Array(),
		objs:new Array(),
		handle:null,
		exec:function(){
			for(var i=0;i<__xSeriaTimer__.events.length;i++){
				try{
					with(__xSeriaTimer__.objs[i]){
						eval(__xSeriaTimer__.events[i]);
					}
				}catch(e){}
			}
		},
		pop:function(i){
			__xSeriaTimer__.events[i]=null;
			__xSeriaTimer__.objs[i]=null;
		},
		push:function(strV,obj){
			for(var i=0;i<__xSeriaTimer__.events.length;i++){
				if(__xSeriaTimer__.events[i]==null){
					__xSeriaTimer__.events[i]=strV;
					__xSeriaTimer__.objs[i]=obj;
					return(i);
				}
			}
			__xSeriaTimer__.events[i]=strV;
			__xSeriaTimer__.objs[i]=obj;
			return(i);
		},
		start:function(){
			__xSeriaTimer__.stop();
			__xSeriaTimer__.handle=setInterval(__xSeriaTimer__.exec,30);
		},
		stop:function(){
			clearInterval(__xSeriaTimer__.handle);
		}
	};
	__xSeriaTimer__.start();
}
//**初始化函数******
function _xWin_init(){
	var allTheWindows=document.getElementsByTagName("div");
	for(var i=0;i<allTheWindows.length;i++){
		if(allTheWindows[i].className=="xWin")_xWin_event_doInit(allTheWindows[i]);
	}
}
//**事件响应函数区******
function _xWin_event_doInit(element){
	//初始化变量
	element.ownerDocument.index=isNaN(element.ownerDocument.index)?10000:parseInt(element.ownerDocument.index)+1;
	element.x0=0;element.y0=0;
	element.x1=0;element.y1=0;
	element.w0=0;element.h0=0;
	element.offx=6;element.offy=6;
	element.padx=0;element.pady=0;
	element.minW=90;element.minH=(BROWSERNAME=="ns"?20:20);
	element.moveable=false;
	element.resizable=false;
	element.hover='orange';element.normal='#336699';
	element.minButton=BROWSERNAME=="ie"?"0":"_";
	element.maxButton=BROWSERNAME=="ie"?"1":"=";
	element.normalButton=BROWSERNAME=="ie"?"2":"+";
	element.closeButton=BROWSERNAME=="ie"?"r":"X";
	element._title="Untitled Window";
	element._body="";
	element._winRect={l:0,t:0,w:0,h:0};
	element._restoredWinRect={l:0,t:0,w:0,h:0};
	element._windowState="normal";
	element.settingNode=getElementByClassName(element,"xWinSetting");
	if(!element.settingNode){
		element.settingNode=document.createElement("div");
		element.settingNode.className="xWinSetting";
		element.settingNode.xwin=element;
		element.appendChild(element.settingNode);
	}
	element.xwin=element;
	
	//设置方法
	element.Close=_xWin_method_Close;
	element.Destroy=_xWin_method_Destroy;
	element.GetSetting=_xWin_method_GetSetting;
	element.Max=_xWin_method_Max;
	element.Min=_xWin_method_Min;
	element.MoveTo=_xWin_method_MoveTo;
	element.ResizeTo=_xWin_method_ResizeTo;
	element.SetContent=_xWin_method_SetContent;
	element.SetTitle=_xWin_method_SetTitle;
	element.ShowHide=_xWin_method_ShowHide;
	
	//设置事件
	element.onmousedown=_xWin_event_doMDown;
	element.onmouseup=element.onlosecapture=_xWin_event_doMUp;
	element.onmousemove=_xWin_event_doMMove;
	element.onclick=_xWin_event_doClick;
	element.onselectstart=element.onselect=_xWin_event_doSelect;
	
	//记录显示风格
	var tempDisplay=element.style.display;
	//改变显示风格
	element.style.display="block";
	//设置窗口变量
	var w=parseInt(element.GetSetting("width"));
	w=isNaN(w)?(element.offsetWidth+10):parseInt(w);
	w=w<element.minW?element.minW:w;
	var h=parseInt(element.GetSetting("height"));
	h=isNaN(h)?(element.offsetHeight+30):parseInt(h);
	h=h<element.minH?element.minH:h;
	var l=parseInt(element.GetSetting("left"));
	l=isNaN(l)?element.offsetLeft:parseInt(l);
	l=l<1?1:l;
	var t=parseInt(element.GetSetting("top"));
	t=isNaN(t)?element.offsetTop:parseInt(t);
	t=t<1?1:t;
	var z=element.ownerDocument.index;
	var title=new String(element.GetSetting("title"));
	
	//设置窗口标题
	element.oTitle=element.ownerDocument.createElement("div");
	element.oTitle.xwin=element;
	element.oTitle.className="xTitle";
	element.appendChild(element.oTitle);
	
	//设置窗口标题内容
	element.oTitleContent=element.ownerDocument.createElement("span");
	element.oTitleContent.xwin=element;
	element.oTitleContent.className="xWinTitleContent";
	element.oTitle.appendChild(element.oTitleContent);
	element.oTitleContent.ondblclick=function(){this.xwin.Max();};
	element.SetTitle(title);
	
	//设置窗口标题关闭按钮
	element.oTitleCButton=element.ownerDocument.createElement("input");
	element.oTitleCButton.xwin=element;
	element.oTitleCButton.type="button";
	element.oTitleCButton.className="xWinTitleCloseButton";
	element.oTitle.appendChild(element.oTitleCButton);
	element.oTitleCButton.onclick=function(){this.xwin.ShowHide("none");};
	element.oTitleCButton.value=element.closeButton;
	
	//设置窗口标题最大化按钮
	element.oTitleMaButton=element.ownerDocument.createElement("input");
	element.oTitleMaButton.xwin=element;
	element.oTitleMaButton.type="button";
	element.oTitleMaButton.className="xWinTitleMaxButton";
	element.oTitle.appendChild(element.oTitleMaButton);
	element.oTitleMaButton.onclick=function(){this.xwin.Max();};
	element.oTitleMaButton.value=element.maxButton;
	
	//设置窗口标题最小化按钮
	element.oTitleMButton=element.ownerDocument.createElement("input");
	element.oTitleMButton.xwin=element;
	element.oTitleMButton.type="button";
	element.oTitleMButton.className="xWinTitleMinButton";
	element.oTitle.appendChild(element.oTitleMButton);
	element.oTitleMButton.onclick=function(){this.xwin.Min();};
	element.oTitleMButton.value=element.minButton;
	
	//设置窗口内容
	element.oContent=element.ownerDocument.createElement("div");
	element.oContent.xwin=element;
	element.oContent.className="xWinBody";
	element.appendChild(element.oContent);
	oC=element.firstChild;
	while(oC){
		tC=oC.nextSibling;
		if(oC!=element.oTitle&&oC!=element.oContent){			
			element.oContent.appendChild(oC);
		}
		oC=tC;
	}
	
	//设置窗口阴影
	element.oShadow=element.ownerDocument.createElement("div");
	element.oShadow.xwin=element;
	element.oShadow.className="xShadow";
	element.parentNode.insertBefore(element.oShadow,element.nextSibling);
	element.oShadow.style.zIndex=z-1;
	
	element.MoveTo(l,t);
	element.ResizeTo(w,h);
	
	//恢复显示风格
	element.style.display=tempDisplay;
	//设置窗口样式
	with(element.style){
		zIndex=z;
		backgroundColor=element.normal;
		color=element.normal;
	}
	padx=element.offsetWidth-element.clientWidth;
	pady=element.offsetHeight-element.clientHeight;
	
}
function _xWin_event_doMDown(evt){
	var e=evt?evt:window.event;
	var eSrc=e.srcElement?e.srcElement:e.target;
	var leftButton=e.srcElement?e.button==1:e.button==0;
	if(this.style.zIndex!=this.ownerDocument.index){//将窗口放到最前
		this.ownerDocument.index+=2;
		var idx = this.ownerDocument.index;
		this.style.zIndex=idx;
		this.nextSibling.style.zIndex=idx-1;
	}
	if(eSrc==this.oTitleContent&&leftButton&&this._windowState=="normal"){//如果开始拖动
		//锁定标题栏;
		document.captureEvents?document.captureEvents("mousemove",this.oTitle):this.oTitle.setCapture();
		//定义对象;
		var win = this;
		var sha = win.nextSibling;
		//记录鼠标和层位置;
		this.x0 = e.clientX;
		this.y0 = e.clientY;
		this.x1 = parseInt(win.style.left);
		this.y1 = parseInt(win.style.top);
		//改变风格;
		this.oTitle.style.backgroundColor = this.hover;
		win.style.borderColor = this.hover;
		this.oTitle.nextSibling.style.color = this.hover;
		sha.style.left = this.x1 + this.offx;
		sha.style.top  = this.y1 + this.offy;
		this.moveable = true;
		return(true);
	}
	if(this.style.cursor!="default"&&this._windowState=="normal"){//开始改变大小
		//锁定标题栏;
		document.captureEvents?document.captureEvents("mousemove",this.oTitle):this.oTitle.setCapture();
		//定义对象;
		var win = this;
		var sha = win.nextSibling;
		//记录鼠标位置和层位置和大小;
		this.x0=e.clientX;
		this.y0=e.clientY;
		this.x1=parseInt(win.offsetLeft);
		this.y1=parseInt(win.offsetTop);
		this.w0=parseInt(win.offsetWidth);
		this.h0=parseInt(win.offsetHeight);
		//改变风格;
		this.oTitle.style.backgroundColor = this.hover;
		win.style.borderColor = this.hover;
		this.oTitle.nextSibling.style.color = this.hover;
		sha.style.left = this.x1 + this.offx;
		sha.style.top  = this.y1 + this.offy;
		this.resizable = true;
		return(true);
	}
}
function _xWin_event_doMUp(evt){
	var e=evt?evt:window.event;
	document.releaseEvents?document.releaseEvents("mousemove",this.oTitle):this.oTitle.releaseCapture();
	if(this.moveable){
		var win = this;
		var sha = win.nextSibling;
		var msg = this.oTitle.nextSibling;
		win.style.borderColor     = "";
		this.oTitle.style.backgroundColor = "";
		msg.style.color           = "";
		sha.style.left = this.oTitle.parentNode.style.left;
		sha.style.top  = this.oTitle.parentNode.style.top;
		this.moveable = false;
		return(false);
	}
	if(this.resizable){
		var win = this;
		var sha = win.nextSibling;
		var msg = this.oTitle.nextSibling;
		win.style.borderColor     = "";
		this.oTitle.style.backgroundColor = "";
		msg.style.color           = "";
		sha.style.left = this.oTitle.parentNode.style.left;
		sha.style.top  = this.oTitle.parentNode.style.top;
		sha.style.width = this.oTitle.parentNode.style.width;
		sha.style.height = this.oTitle.parentNode.style.height;
		this.style.cursor="default";
		this.resizable = false;
		return(false);
	}
}
function _xWin_event_doMMove(evt){
	var e=evt?evt:window.event;
	if(this.moveable){//拖动窗口
		this.MoveTo(this.x1 + e.clientX - this.x0, this.y1 + e.clientY - this.y0);
		return(true);
	}
	if(this.resizable){//改变窗口大小
		var xxx=this.style.cursor.substring(0,2).match(/[we]/i);
		var yyy=this.style.cursor.substring(0,2).match(/[ns]/i);
		l=this.offsetLeft;
		t=this.offsetTop;
		w=parseInt(this.style.width);
		h=parseInt(this.style.height);
		if(xxx=="w"){
			l=this.x1+e.clientX - this.x0;
			w=this.w0+this.x0-e.clientX;
			if(l<0){w+=l;l=0;}
			if(w<this.minW){l=l+w-this.minW;w=this.minW;}
		}
		if(xxx=="e"){
			w=this.w0+e.clientX-this.x0;
			w=w<this.minW?this.minW:w;
		}
		if(yyy=="n"){
			t=this.y1+e.clientY - this.y0;
			h=this.h0+this.y0-e.clientY;
			if(t<0){h+=t;t=0;}
			if(h<this.minH){t=t+h-this.minH;h=this.minH;}
		}
		if(yyy=="s"){
			h=this.h0+e.clientY-this.y0;
			h=h<this.minH?this.minH:h;
		}
		this.MoveTo(l,t);
		this.ResizeTo(w,h);
		
		return(true);
	}
	if(this._windowState=="normal"){
		var cc="";
		x=window.getRealLeft(this);
		y=window.getRealTop(this);
		w=parseInt(this.offsetWidth);
		h=parseInt(this.offsetHeight);
		if(e.clientY-y<5)cc+="n";
		if(y+h-e.clientY<5)cc+="s";
		if(e.clientX-x<5)cc+="w";
		if(x+w-e.clientX<5)cc+="e";
		if(cc!=""){
			this.style.cursor=cc+"-resize";
			return(true);
		}
		if(this.style.cursor!="default"){
			this.style.cursor="default";
		}
	}
}
function _xWin_event_doClick(evt){
	var e=evt?evt:window.event;
	var eSrc=e.srcElement?e.srcElement:e.target;
	switch(eSrc){
		
	}
}
function _xWin_event_doSelect(evt){
	var e=evt?evt:window.event;
	var eSrc=e.srcElement?e.srcElement:e.target;
	if(eSrc==this.oTitle||this.oTitle.contains(eSrc)){
		e.cancelBubble=true;
		e.returnValue=false;
		return(false);
	}
}
function _xWinParentNode_event_doScroll(evt){
	if(!this.minimizedWindows)return(true);
	for(var i=0;i<this.minimizedWindows.length;i++){
		this.minimizedWindows[i].Min(true);
	}
}
//**方法函数区******
function _xWin_method_Close(){
	this.Destroy();
}
function _xWin_method_Destroy(){
	if(this.minIndex){
		this.parentNode.minimizedWindows[this.minIndex]=null;
		this.minIndex=null;
	}
	this.outerHTML="";
}
function _xWin_method_GetSetting(attributeName){
	var settingString=this.settingNode.innerHTML;
	if(!attributeName)return(settingString);
	var regE=new RegExp(attributeName+"=[ \t]*\"?([^\"]*)","i");
	var re=settingString.match(regE);
	if(re){
		return(re[1]);
	}else{
		return(re);
	}
}
function _xWin_method_Max(reV){
	if(this._windowState=="maximize"&&(!reV)){
		//还原父节点overflow属性
		this.parentNode.style.overflow=this.parentNode.restoredStyle_overflow;
		
		this.MoveTo(this._restoredWinRect.l,this._restoredWinRect.t);
		this.ResizeTo(this._restoredWinRect.w,this._restoredWinRect.h);
		this.oTitleMButton.value = this.minButton;
		this.oTitleMaButton.value = this.maxButton;
		this._windowState="normal";
	}else{
		if(this._windowState=="normal"){
			this._restoredWinRect.l=this._winRect.l;this._restoredWinRect.t=this._winRect.t;
			this._restoredWinRect.w=this._winRect.w;this._restoredWinRect.h=this._winRect.h;
		}
		if(this.minIndex!=null){
			this.parentNode.minimizedWindows[this.minIndex]=null;
			this.minIndex=null;
		}
		if(this.minTimeHandle!=null){
			__xSeriaTimer__.pop(this.minTimeHandle);
			this.minTimeHandle=null;
		}
		//纪录父节点overflow属性
		this.parentNode.restoredStyle_overflow=this.parentNode.style.overflow;
		//改变父节点overflow属性
		this.parentNode.style.overflow="hidden";
		
		this.MoveTo(0,0);
		if(this.parentNode!=document.body){
			w=this.parentNode.clientWidth-5;
			h=this.parentNode.clientHeight-4;
		}else{
			w=document.documentElement.clientWidth-5;
			h=document.documentElement.clientHeight-4;
		}
		this.ResizeTo(w,h);
		this.oTitleMButton.value = this.minButton;
		this.oTitleMaButton.value = this.normalButton;
		this._windowState="maximize";
		this.scrollIntoView();
	}
}
function _xWin_method_Min(reV){
	if(this._windowState=="minimize"&&(!reV)){
		this.MoveTo(this._restoredWinRect.l,this._restoredWinRect.t);
		this.ResizeTo(this._restoredWinRect.w,this._restoredWinRect.h);
		this.oTitleMButton.value = this.minButton;
		this.oTitleMaButton.value = this.maxButton;
		this._windowState="normal";
		this.parentNode.minimizedWindows[this.minIndex]=null;
		this.minIndex=null;
		if(this.minTimeHandle!=null){
			__xSeriaTimer__.pop(this.minTimeHandle);
			this.minTimeHandle=null;
		}
	}else{
		if(this._windowState=="normal"){
			this._restoredWinRect.l=this._winRect.l;this._restoredWinRect.t=this._winRect.t;
			this._restoredWinRect.w=this._winRect.w;this._restoredWinRect.h=this._winRect.h;
		}else{
			//还原父节点overflow属性
			try{
				this.parentNode.style.overflow=this.parentNode.restoredStyle_overflow;
			}catch(e){}
		}
		if(!this.parentNode.minimizedWindows)this.parentNode.minimizedWindows=new Array();
		if(this._windowState!="minimize"){
			for(var i=0;i<this.parentNode.minimizedWindows.length;i++){
				if(this.parentNode.minimizedWindows[i]==null)break;
			}
			this.parentNode.minimizedWindows[i]=this;
		}else{
			i=this.minIndex;
		}
		this.ResizeTo(0,0);
		var w=this.offsetWidth;
		var h=this.offsetHeight;
		var mw=getParentRect(this).mw;
		var mh=getParentRect(this).mh;
		var n=parseInt(mw/w);
		var t=parseInt(i/n)+1;
		this.MoveTo(w*(i%n),mh-t*h-1);
		if(mh>getParentRect(this).mh){
			this.MoveTo(w*(i%n),mh-t*h-200);
			mh=getParentRect(this).mh;
			this.MoveTo(w*(i%n),mh-t*h-1);
		}
		this.minIndex=i;
		this.oTitleMButton.value = this.normalButton;
		this.oTitleMaButton.value = this.maxButton;
		this._windowState="minimize";
		if(this.minTimeHandle==null){
			this.minTimeHandle=__xSeriaTimer__.push("Min(true)",this);
			this.scrollIntoView();
		}
	}
}
function _xWin_method_MoveTo(x,y){
	var win = this.oTitle.parentNode;
	var sha = win.nextSibling;
	
	x=isNaN(x)?0:parseInt(x);
	y=isNaN(y)?0:parseInt(y);
	x=x<0?0:x;
	y=y<0?0:y;
	this.style.left=x+"px";
	this.style.top=y+"px";
	
	sha.style.left = parseInt(win.style.left) + ((this.moveable||this.resizable)?this.offx:0)+"px";
	sha.style.top  = parseInt(win.style.top) + ((this.moveable||this.resizable)?this.offy:0)+"px";
	this._winRect.l=x;
	this._winRect.t=y;
}
function _xWin_method_ResizeTo(w,h){
	var win = this;
	var sha = win.nextSibling;
		
	var w=isNaN(w)?this.minW:parseInt(w);
	var h=isNaN(h)?this.minH:parseInt(h);
	var w=w<this.minW?this.minW:w;
	var h=h<this.minH?this.minH:h;
	
	this.style.width=w+"px";
	this.style.height=h+"px";
	this.oTitle.style.width=parseInt(this.clientWidth)+"px";
	var wTC=this.clientWidth;
	for(var i=0;i<this.oTitle.childNodes.length;i++){
		if(this.oTitle.childNodes[i]!=this.oTitleContent){wTC-=this.oTitle.childNodes[i].offsetWidth;}
	}
	wTC-=8;
	this.oTitleContent.style.width=(wTC<1?1:wTC)+"px";
	
	var wC=this.clientHeight-this.oTitle.offsetHeight-6;
	this.oContent.style.height=(wC<1?1:wC)+"px";
	this.oContent.style.width=parseInt(this.clientWidth-6)+"px";
	sha.style.left = parseInt(win.style.left) + ((this.moveable||this.resizable)?this.offx:0)+"px";
	sha.style.top  = parseInt(win.style.top) + ((this.moveable||this.resizable)?this.offy:0)+"px";
	sha.style.width = parseInt(win.style.width)+"px";
	sha.style.height = parseInt(win.style.height)+"px";
	
	this._winRect.w=w;
	this._winRect.h=h;
}
function _xWin_method_SetContent(v){
	if(this.oContent){
		if(v==null||v==undefined||v==""){this._body=this.oContent.innerHTML="";return(this.oContent);}
		if(typeof(v)=="string"){
			this._body=this.oContent.innerHTML=v;
			return(this.oContent);
		}else{
			try{
				this.oContent.innerHTML="";
				this._body=this.oContent.appendChild(v);
				return(this.oContent);
			}catch(e){
				throw(e);
			}
		}
	}else{
		this._body=v;
		return(null);
	}
}
function _xWin_method_SetTitle(strT){
	this._title=strT==null?this._title:strT;
	if(this.oTitleContent){
		setInnerText(this.oTitleContent,this._title);
	}
}
function _xWin_method_ShowHide(dis){
	var bdisplay = (dis==null)?((this.style.display=="none")?"":"none"):dis;
	this.style.display = bdisplay;
	this.nextSibling.style.display = bdisplay;
	if(bdisplay=="none"){
		if(this._windowState=="minimize"){
			this.parentNode.minimizedWindows[this.minIndex]=null;
			this.minIndex=null;
		}
	}else{
		if(this._windowState=="minimize"){
			this.Min();
		}
	}
}
//**通用函数区***
function getRealLeft(o){
	var l=o.offsetLeft-o.scrollLeft;
	while(o=o.offsetParent){
		l+=o.offsetLeft-o.scrollLeft;
	}
	return(l);
}
function getRealTop(o){
	var t=o.offsetTop-o.scrollTop;
	while(o=o.offsetParent){
		t+=o.offsetTop-o.scrollTop;
	}
	return(t);
}
function setInnerText(obj,text){
	switch(BROWSERNAME){
		case "ns":
			obj.textContent=text;
		break;
		case "ie":
		default:
			obj.innerText=text;
	}
}
function getElementByClassName(obj,className){
	for(var i=0;i<obj.childNodes.length;i++){
		if(obj.childNodes[i].className==className)return(obj.childNodes[i]);
	}
	return(null);
}
function getParentRect(obj){
	var re=new Object();
	if(obj.parentNode!=document.body){
		re.mw=Math.max(obj.parentNode.scrollWidth,obj.parentNode.clientWidth);
		re.mh=Math.max(obj.parentNode.scrollHeight,obj.parentNode.clientHeight);
	}else{
		re.mw=Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
		re.mh=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
	}
	return(re);
}	
//]]>
</script>
</head>
<body>
<div class="xWin" id="win1" >
	<span class="xWinSetting">width="400" height="400" top="300" left="100" title="我就是传说中那个超长的窗口标题"</span>
	我就是传说中那个超长的窗口标题我就是传说
	<div class="xWin" id="win30" >
		<span class="xWinSetting"> width="100" top="20" left="20" title="我就是传说中那个超长的窗口标题"</span>
		中那个超长的窗口标题我就是传说中那个超<br/>长的窗口标题我就是传说中那个超长
	</div>
	的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题
	我就是传说中那个超长的
	<div class="xWin" id="win31" >
		<span class="xWinSetting">width="100" top="40" left="40" title="我就是传说中那个超长的窗口标题" </span>
		中那个超长的窗口标题我就是传说中那个超<br/>长的窗口标题我就是传说中那个超长
	</div>
	窗口标题我就是传说中那
	个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那
	个超长的窗口标题我就是传说中那个超长的窗口标题
	c<br/>
	12345
</div>
<div class="xWin" id="win2">
	<span class="xWinSetting"> width="200" top="270" left="140" title="我就是传说中那个超长的窗口标题"</span>
	我是窗口2<br/>
	我是窗口2<br/>
	我是窗口2<br/>
	我是窗口2<br/>
	<a href="javascript:void(0);">更换标题</a>
	我是窗口2<br/>
	我是窗口2<br/>
	我是窗口2<br/>
	我是窗口2<br/>
</div>
<a href="javascript:win1.ShowHide('');void(0);">win1</a>
<a href="javascript:win2.ShowHide('');void(0);">win2</a>
<a href="javascript:document.getElementById('win3').ShowHide('');void(0);">win3</a>
<a href="javascript:document.getElementById('win4').ShowHide('');void(0);">win4</a>
<div id="ssss"></div>
</body>
</html>

提示：您可以先修改部分代码再运行

xWin由三个文件组成：
页面文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>xWin HTC Demo</title>
<script type="text/javascript" src="sp/js/xwin.js"></script>
</head>
<body>
<div class="xWin" id="win1" >
	<span class="xWinSetting">width="400" height="400" top="300" left="100" title="我就是传说中那个超长的窗口标题"</span>
	我就是传说中那个超长的窗口标题我就是传说
	<div class="xWin" id="win30" >
		<span class="xWinSetting"> width="100" top="20" left="20" title="我就是传说中那个超长的窗口标题"</span>
		中那个超长的窗口标题我就是传说中那个超<br/>长的窗口标题我就是传说中那个超长
	</div>
	的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题
	我就是传说中那个超长的
	<div class="xWin" id="win31" >
		<span class="xWinSetting">width="100" top="40" left="40" title="我就是传说中那个超长的窗口标题" </span>
		中那个超长的窗口标题我就是传说中那个超<br/>长的窗口标题我就是传说中那个超长
	</div>
	窗口标题我就是传说中那
	个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那
	个超长的窗口标题我就是传说中那个超长的窗口标题
	c<br/>
	12345
</div>
<div class="xWin" id="win2">
	<span class="xWinSetting"> width="200" top="270" left="140" title="我就是传说中那个超长的窗口标题"</span>
	我是窗口2<br/>
	我是窗口2<br/>
	我是窗口2<br/>
	我是窗口2<br/>
	<a href="javascript:void(0);">更换标题</a>
	我是窗口2<br/>
	我是窗口2<br/>
	我是窗口2<br/>
	我是窗口2<br/>
</div>
<a href="javascript:win1.ShowHide('');void(0);">win1</a>
<a href="javascript:win2.ShowHide('');void(0);">win2</a>
<a href="javascript:document.getElementById('win3').ShowHide('');void(0);">win3</a>
<a href="javascript:document.getElementById('win4').ShowHide('');void(0);">win4</a>
<div id="ssss"></div>
</body>
</html>

提示：您可以先修改部分代码再运行

JS:

//<![CDATA[
//********************/
//  x 系列之 xWin
//  作者：Hutia
//  未经同意不得转载或用于商业用途
//********************/
/*
说明：
  x系列是Hutia开发的系列JS代码，配合相应的css后可以实现快速的自定义标签
  目前x系列支持的浏览器类型为：IE5.5, FF1.5
  xWin的标签为
  	<div class="xwin">
  		<span class="xWinSetting"> width="200" top="270" left="140" title="我就是传说中那个超长的窗口标题"</span>
  		content
  	</div>
  
  支持属性：
    int left, int top, int width, int height
  支持方法：
    Close(), Destroy(), Max([bolean Variable]), Min([bolean Variable]), 
    MoveTo(int x, int y), ResizeTo(int x, int y), SetContent(string Variable | htmlObject Variable)
	SetTitle(string Variable), ShowHide()
*/
//**载入CSS*****
var xWinCssFilePath="sp\/css\/xwin.css";
document.write("<style>@import url("+xWinCssFilePath+");</style>");
//**检测浏览器种类*****
var BROWSERNAME="";
switch(navigator.appName.toLowerCase()){
	case "netscape":
		BROWSERNAME="ns";
	break;
	case "microsoft internet explorer":
	default:
		BROWSERNAME="ie";
	break;
}
//**设置初始化变量******
switch(BROWSERNAME){
	case "ns":
		window.addEventListener("load",_xWin_init,false);
	break;
	case "ie":
	default:
		window.attachEvent("onload",_xWin_init);
}
//**设置全局定时器******
if(typeof(__xSeriaTimer__)=="undefined"){
	var __xSeriaTimer__={
		events:new Array(),
		objs:new Array(),
		handle:null,
		exec:function(){
			for(var i=0;i<__xSeriaTimer__.events.length;i++){
				try{
					with(__xSeriaTimer__.objs[i]){
						eval(__xSeriaTimer__.events[i]);
					}
				}catch(e){}
			}
		},
		pop:function(i){
			__xSeriaTimer__.events[i]=null;
			__xSeriaTimer__.objs[i]=null;
		},
		push:function(strV,obj){
			for(var i=0;i<__xSeriaTimer__.events.length;i++){
				if(__xSeriaTimer__.events[i]==null){
					__xSeriaTimer__.events[i]=strV;
					__xSeriaTimer__.objs[i]=obj;
					return(i);
				}
			}
			__xSeriaTimer__.events[i]=strV;
			__xSeriaTimer__.objs[i]=obj;
			return(i);
		},
		start:function(){
			__xSeriaTimer__.stop();
			__xSeriaTimer__.handle=setInterval(__xSeriaTimer__.exec,30);
		},
		stop:function(){
			clearInterval(__xSeriaTimer__.handle);
		}
	};
	__xSeriaTimer__.start();
}
//**初始化函数******
function _xWin_init(){
	var allTheWindows=document.getElementsByTagName("div");
	for(var i=0;i<allTheWindows.length;i++){
		if(allTheWindows[i].className=="xWin")_xWin_event_doInit(allTheWindows[i]);
	}
}
//**事件响应函数区******
function _xWin_event_doInit(element){
	//初始化变量
	element.ownerDocument.index=isNaN(element.ownerDocument.index)?10000:parseInt(element.ownerDocument.index)+1;
	element.x0=0;element.y0=0;
	element.x1=0;element.y1=0;
	element.w0=0;element.h0=0;
	element.offx=6;element.offy=6;
	element.padx=0;element.pady=0;
	element.minW=90;element.minH=(BROWSERNAME=="ns"?20:20);
	element.moveable=false;
	element.resizable=false;
	element.hover='orange';element.normal='#336699';
	element.minButton=BROWSERNAME=="ie"?"0":"_";
	element.maxButton=BROWSERNAME=="ie"?"1":"=";
	element.normalButton=BROWSERNAME=="ie"?"2":"+";
	element.closeButton=BROWSERNAME=="ie"?"r":"X";
	element._title="Untitled Window";
	element._body="";
	element._winRect={l:0,t:0,w:0,h:0};
	element._restoredWinRect={l:0,t:0,w:0,h:0};
	element._windowState="normal";
	element.settingNode=getElementByClassName(element,"xWinSetting");
	if(!element.settingNode){
		element.settingNode=document.createElement("div");
		element.settingNode.className="xWinSetting";
		element.settingNode.xwin=element;
		element.appendChild(element.settingNode);
	}
	element.xwin=element;
	
	//设置方法
	element.Close=_xWin_method_Close;
	element.Destroy=_xWin_method_Destroy;
	element.GetSetting=_xWin_method_GetSetting;
	element.Max=_xWin_method_Max;
	element.Min=_xWin_method_Min;
	element.MoveTo=_xWin_method_MoveTo;
	element.ResizeTo=_xWin_method_ResizeTo;
	element.SetContent=_xWin_method_SetContent;
	element.SetTitle=_xWin_method_SetTitle;
	element.ShowHide=_xWin_method_ShowHide;
	
	//设置事件
	element.onmousedown=_xWin_event_doMDown;
	element.onmouseup=element.onlosecapture=_xWin_event_doMUp;
	element.onmousemove=_xWin_event_doMMove;
	element.onclick=_xWin_event_doClick;
	element.onselectstart=element.onselect=_xWin_event_doSelect;
	
	//记录显示风格
	var tempDisplay=element.style.display;
	//改变显示风格
	element.style.display="block";
	//设置窗口变量
	var w=parseInt(element.GetSetting("width"));
	w=isNaN(w)?(element.offsetWidth+10):parseInt(w);
	w=w<element.minW?element.minW:w;
	var h=parseInt(element.GetSetting("height"));
	h=isNaN(h)?(element.offsetHeight+30):parseInt(h);
	h=h<element.minH?element.minH:h;
	var l=parseInt(element.GetSetting("left"));
	l=isNaN(l)?element.offsetLeft:parseInt(l);
	l=l<1?1:l;
	var t=parseInt(element.GetSetting("top"));
	t=isNaN(t)?element.offsetTop:parseInt(t);
	t=t<1?1:t;
	var z=element.ownerDocument.index;
	var title=new String(element.GetSetting("title"));
	
	//设置窗口标题
	element.oTitle=element.ownerDocument.createElement("div");
	element.oTitle.xwin=element;
	element.oTitle.className="xTitle";
	element.appendChild(element.oTitle);
	
	//设置窗口标题内容
	element.oTitleContent=element.ownerDocument.createElement("span");
	element.oTitleContent.xwin=element;
	element.oTitleContent.className="xWinTitleContent";
	element.oTitle.appendChild(element.oTitleContent);
	element.oTitleContent.ondblclick=function(){this.xwin.Max();};
	element.SetTitle(title);
	
	//设置窗口标题关闭按钮
	element.oTitleCButton=element.ownerDocument.createElement("input");
	element.oTitleCButton.xwin=element;
	element.oTitleCButton.type="button";
	element.oTitleCButton.className="xWinTitleCloseButton";
	element.oTitle.appendChild(element.oTitleCButton);
	element.oTitleCButton.onclick=function(){this.xwin.ShowHide("none");};
	element.oTitleCButton.value=element.closeButton;
	
	//设置窗口标题最大化按钮
	element.oTitleMaButton=element.ownerDocument.createElement("input");
	element.oTitleMaButton.xwin=element;
	element.oTitleMaButton.type="button";
	element.oTitleMaButton.className="xWinTitleMaxButton";
	element.oTitle.appendChild(element.oTitleMaButton);
	element.oTitleMaButton.onclick=function(){this.xwin.Max();};
	element.oTitleMaButton.value=element.maxButton;
	
	//设置窗口标题最小化按钮
	element.oTitleMButton=element.ownerDocument.createElement("input");
	element.oTitleMButton.xwin=element;
	element.oTitleMButton.type="button";
	element.oTitleMButton.className="xWinTitleMinButton";
	element.oTitle.appendChild(element.oTitleMButton);
	element.oTitleMButton.onclick=function(){this.xwin.Min();};
	element.oTitleMButton.value=element.minButton;
	
	//设置窗口内容
	element.oContent=element.ownerDocument.createElement("div");
	element.oContent.xwin=element;
	element.oContent.className="xWinBody";
	element.appendChild(element.oContent);
	oC=element.firstChild;
	while(oC){
		tC=oC.nextSibling;
		if(oC!=element.oTitle&&oC!=element.oContent){			
			element.oContent.appendChild(oC);
		}
		oC=tC;
	}
	
	//设置窗口阴影
	element.oShadow=element.ownerDocument.createElement("div");
	element.oShadow.xwin=element;
	element.oShadow.className="xShadow";
	element.parentNode.insertBefore(element.oShadow,element.nextSibling);
	element.oShadow.style.zIndex=z-1;
	
	element.MoveTo(l,t);
	element.ResizeTo(w,h);
	
	//恢复显示风格
	element.style.display=tempDisplay;
	//设置窗口样式
	with(element.style){
		zIndex=z;
		backgroundColor=element.normal;
		color=element.normal;
	}
	padx=element.offsetWidth-element.clientWidth;
	pady=element.offsetHeight-element.clientHeight;
	
}
function _xWin_event_doMDown(evt){
	var e=evt?evt:window.event;
	var eSrc=e.srcElement?e.srcElement:e.target;
	var leftButton=e.srcElement?e.button==1:e.button==0;
	if(this.style.zIndex!=this.ownerDocument.index){//将窗口放到最前
		this.ownerDocument.index+=2;
		var idx = this.ownerDocument.index;
		this.style.zIndex=idx;
		this.nextSibling.style.zIndex=idx-1;
	}
	if(eSrc==this.oTitleContent&&leftButton&&this._windowState=="normal"){//如果开始拖动
		//锁定标题栏;
		document.captureEvents?document.captureEvents("mousemove",this.oTitle):this.oTitle.setCapture();
		//定义对象;
		var win = this;
		var sha = win.nextSibling;
		//记录鼠标和层位置;
		this.x0 = e.clientX;
		this.y0 = e.clientY;
		this.x1 = parseInt(win.style.left);
		this.y1 = parseInt(win.style.top);
		//改变风格;
		this.oTitle.style.backgroundColor = this.hover;
		win.style.borderColor = this.hover;
		this.oTitle.nextSibling.style.color = this.hover;
		sha.style.left = this.x1 + this.offx;
		sha.style.top  = this.y1 + this.offy;
		this.moveable = true;
		return(true);
	}
	if(this.style.cursor!="default"&&this._windowState=="normal"){//开始改变大小
		//锁定标题栏;
		document.captureEvents?document.captureEvents("mousemove",this.oTitle):this.oTitle.setCapture();
		//定义对象;
		var win = this;
		var sha = win.nextSibling;
		//记录鼠标位置和层位置和大小;
		this.x0=e.clientX;
		this.y0=e.clientY;
		this.x1=parseInt(win.offsetLeft);
		this.y1=parseInt(win.offsetTop);
		this.w0=parseInt(win.offsetWidth);
		this.h0=parseInt(win.offsetHeight);
		//改变风格;
		this.oTitle.style.backgroundColor = this.hover;
		win.style.borderColor = this.hover;
		this.oTitle.nextSibling.style.color = this.hover;
		sha.style.left = this.x1 + this.offx;
		sha.style.top  = this.y1 + this.offy;
		this.resizable = true;
		return(true);
	}
}
function _xWin_event_doMUp(evt){
	var e=evt?evt:window.event;
	document.releaseEvents?document.releaseEvents("mousemove",this.oTitle):this.oTitle.releaseCapture();
	if(this.moveable){
		var win = this;
		var sha = win.nextSibling;
		var msg = this.oTitle.nextSibling;
		win.style.borderColor     = "";
		this.oTitle.style.backgroundColor = "";
		msg.style.color           = "";
		sha.style.left = this.oTitle.parentNode.style.left;
		sha.style.top  = this.oTitle.parentNode.style.top;
		this.moveable = false;
		return(false);
	}
	if(this.resizable){
		var win = this;
		var sha = win.nextSibling;
		var msg = this.oTitle.nextSibling;
		win.style.borderColor     = "";
		this.oTitle.style.backgroundColor = "";
		msg.style.color           = "";
		sha.style.left = this.oTitle.parentNode.style.left;
		sha.style.top  = this.oTitle.parentNode.style.top;
		sha.style.width = this.oTitle.parentNode.style.width;
		sha.style.height = this.oTitle.parentNode.style.height;
		this.style.cursor="default";
		this.resizable = false;
		return(false);
	}
}
function _xWin_event_doMMove(evt){
	var e=evt?evt:window.event;
	if(this.moveable){//拖动窗口
		this.MoveTo(this.x1 + e.clientX - this.x0, this.y1 + e.clientY - this.y0);
		return(true);
	}
	if(this.resizable){//改变窗口大小
		var xxx=this.style.cursor.substring(0,2).match(/[we]/i);
		var yyy=this.style.cursor.substring(0,2).match(/[ns]/i);
		l=this.offsetLeft;
		t=this.offsetTop;
		w=parseInt(this.style.width);
		h=parseInt(this.style.height);
		if(xxx=="w"){
			l=this.x1+e.clientX - this.x0;
			w=this.w0+this.x0-e.clientX;
			if(l<0){w+=l;l=0;}
			if(w<this.minW){l=l+w-this.minW;w=this.minW;}
		}
		if(xxx=="e"){
			w=this.w0+e.clientX-this.x0;
			w=w<this.minW?this.minW:w;
		}
		if(yyy=="n"){
			t=this.y1+e.clientY - this.y0;
			h=this.h0+this.y0-e.clientY;
			if(t<0){h+=t;t=0;}
			if(h<this.minH){t=t+h-this.minH;h=this.minH;}
		}
		if(yyy=="s"){
			h=this.h0+e.clientY-this.y0;
			h=h<this.minH?this.minH:h;
		}
		this.MoveTo(l,t);
		this.ResizeTo(w,h);
		
		return(true);
	}
	if(this._windowState=="normal"){
		var cc="";
		x=window.getRealLeft(this);
		y=window.getRealTop(this);
		w=parseInt(this.offsetWidth);
		h=parseInt(this.offsetHeight);
		if(e.clientY-y<5)cc+="n";
		if(y+h-e.clientY<5)cc+="s";
		if(e.clientX-x<5)cc+="w";
		if(x+w-e.clientX<5)cc+="e";
		if(cc!=""){
			this.style.cursor=cc+"-resize";
			return(true);
		}
		if(this.style.cursor!="default"){
			this.style.cursor="default";
		}
	}
}
function _xWin_event_doClick(evt){
	var e=evt?evt:window.event;
	var eSrc=e.srcElement?e.srcElement:e.target;
	switch(eSrc){
		
	}
}
function _xWin_event_doSelect(evt){
	var e=evt?evt:window.event;
	var eSrc=e.srcElement?e.srcElement:e.target;
	if(eSrc==this.oTitle||this.oTitle.contains(eSrc)){
		e.cancelBubble=true;
		e.returnValue=false;
		return(false);
	}
}
function _xWinParentNode_event_doScroll(evt){
	if(!this.minimizedWindows)return(true);
	for(var i=0;i<this.minimizedWindows.length;i++){
		this.minimizedWindows[i].Min(true);
	}
}
//**方法函数区******
function _xWin_method_Close(){
	this.Destroy();
}
function _xWin_method_Destroy(){
	if(this.minIndex){
		this.parentNode.minimizedWindows[this.minIndex]=null;
		this.minIndex=null;
	}
	this.outerHTML="";
}
function _xWin_method_GetSetting(attributeName){
	var settingString=this.settingNode.innerHTML;
	if(!attributeName)return(settingString);
	var regE=new RegExp(attributeName+"=[ \t]*\"?([^\"]*)","i");
	var re=settingString.match(regE);
	if(re){
		return(re[1]);
	}else{
		return(re);
	}
}
function _xWin_method_Max(reV){
	if(this._windowState=="maximize"&&(!reV)){
		//还原父节点overflow属性
		this.parentNode.style.overflow=this.parentNode.restoredStyle_overflow;
		
		this.MoveTo(this._restoredWinRect.l,this._restoredWinRect.t);
		this.ResizeTo(this._restoredWinRect.w,this._restoredWinRect.h);
		this.oTitleMButton.value = this.minButton;
		this.oTitleMaButton.value = this.maxButton;
		this._windowState="normal";
	}else{
		if(this._windowState=="normal"){
			this._restoredWinRect.l=this._winRect.l;this._restoredWinRect.t=this._winRect.t;
			this._restoredWinRect.w=this._winRect.w;this._restoredWinRect.h=this._winRect.h;
		}
		if(this.minIndex!=null){
			this.parentNode.minimizedWindows[this.minIndex]=null;
			this.minIndex=null;
		}
		if(this.minTimeHandle!=null){
			__xSeriaTimer__.pop(this.minTimeHandle);
			this.minTimeHandle=null;
		}
		//纪录父节点overflow属性
		this.parentNode.restoredStyle_overflow=this.parentNode.style.overflow;
		//改变父节点overflow属性
		this.parentNode.style.overflow="hidden";
		
		this.MoveTo(0,0);
		if(this.parentNode!=document.body){
			w=this.parentNode.clientWidth-5;
			h=this.parentNode.clientHeight-4;
		}else{
			w=document.documentElement.clientWidth-5;
			h=document.documentElement.clientHeight-4;
		}
		this.ResizeTo(w,h);
		this.oTitleMButton.value = this.minButton;
		this.oTitleMaButton.value = this.normalButton;
		this._windowState="maximize";
		this.scrollIntoView();
	}
}
function _xWin_method_Min(reV){
	if(this._windowState=="minimize"&&(!reV)){
		this.MoveTo(this._restoredWinRect.l,this._restoredWinRect.t);
		this.ResizeTo(this._restoredWinRect.w,this._restoredWinRect.h);
		this.oTitleMButton.value = this.minButton;
		this.oTitleMaButton.value = this.maxButton;
		this._windowState="normal";
		this.parentNode.minimizedWindows[this.minIndex]=null;
		this.minIndex=null;
		if(this.minTimeHandle!=null){
			__xSeriaTimer__.pop(this.minTimeHandle);
			this.minTimeHandle=null;
		}
	}else{
		if(this._windowState=="normal"){
			this._restoredWinRect.l=this._winRect.l;this._restoredWinRect.t=this._winRect.t;
			this._restoredWinRect.w=this._winRect.w;this._restoredWinRect.h=this._winRect.h;
		}else{
			//还原父节点overflow属性
			try{
				this.parentNode.style.overflow=this.parentNode.restoredStyle_overflow;
			}catch(e){}
		}
		if(!this.parentNode.minimizedWindows)this.parentNode.minimizedWindows=new Array();
		if(this._windowState!="minimize"){
			for(var i=0;i<this.parentNode.minimizedWindows.length;i++){
				if(this.parentNode.minimizedWindows[i]==null)break;
			}
			this.parentNode.minimizedWindows[i]=this;
		}else{
			i=this.minIndex;
		}
		this.ResizeTo(0,0);
		var w=this.offsetWidth;
		var h=this.offsetHeight;
		var mw=getParentRect(this).mw;
		var mh=getParentRect(this).mh;
		var n=parseInt(mw/w);
		var t=parseInt(i/n)+1;
		this.MoveTo(w*(i%n),mh-t*h-1);
		if(mh>getParentRect(this).mh){
			this.MoveTo(w*(i%n),mh-t*h-200);
			mh=getParentRect(this).mh;
			this.MoveTo(w*(i%n),mh-t*h-1);
		}
		this.minIndex=i;
		this.oTitleMButton.value = this.normalButton;
		this.oTitleMaButton.value = this.maxButton;
		this._windowState="minimize";
		if(this.minTimeHandle==null){
			this.minTimeHandle=__xSeriaTimer__.push("Min(true)",this);
			this.scrollIntoView();
		}
	}
}
function _xWin_method_MoveTo(x,y){
	var win = this.oTitle.parentNode;
	var sha = win.nextSibling;
	
	x=isNaN(x)?0:parseInt(x);
	y=isNaN(y)?0:parseInt(y);
	x=x<0?0:x;
	y=y<0?0:y;
	this.style.left=x+"px";
	this.style.top=y+"px";
	
	sha.style.left = parseInt(win.style.left) + ((this.moveable||this.resizable)?this.offx:0)+"px";
	sha.style.top  = parseInt(win.style.top) + ((this.moveable||this.resizable)?this.offy:0)+"px";
	this._winRect.l=x;
	this._winRect.t=y;
}
function _xWin_method_ResizeTo(w,h){
	var win = this;
	var sha = win.nextSibling;
		
	var w=isNaN(w)?this.minW:parseInt(w);
	var h=isNaN(h)?this.minH:parseInt(h);
	var w=w<this.minW?this.minW:w;
	var h=h<this.minH?this.minH:h;
	
	this.style.width=w+"px";
	this.style.height=h+"px";
	this.oTitle.style.width=parseInt(this.clientWidth)+"px";
	var wTC=this.clientWidth;
	for(var i=0;i<this.oTitle.childNodes.length;i++){
		if(this.oTitle.childNodes[i]!=this.oTitleContent){wTC-=this.oTitle.childNodes[i].offsetWidth;}
	}
	wTC-=8;
	this.oTitleContent.style.width=(wTC<1?1:wTC)+"px";
	
	var wC=this.clientHeight-this.oTitle.offsetHeight-6;
	this.oContent.style.height=(wC<1?1:wC)+"px";
	this.oContent.style.width=parseInt(this.clientWidth-6)+"px";
	sha.style.left = parseInt(win.style.left) + ((this.moveable||this.resizable)?this.offx:0)+"px";
	sha.style.top  = parseInt(win.style.top) + ((this.moveable||this.resizable)?this.offy:0)+"px";
	sha.style.width = parseInt(win.style.width)+"px";
	sha.style.height = parseInt(win.style.height)+"px";
	
	this._winRect.w=w;
	this._winRect.h=h;
}
function _xWin_method_SetContent(v){
	if(this.oContent){
		if(v==null||v==undefined||v==""){this._body=this.oContent.innerHTML="";return(this.oContent);}
		if(typeof(v)=="string"){
			this._body=this.oContent.innerHTML=v;
			return(this.oContent);
		}else{
			try{
				this.oContent.innerHTML="";
				this._body=this.oContent.appendChild(v);
				return(this.oContent);
			}catch(e){
				throw(e);
			}
		}
	}else{
		this._body=v;
		return(null);
	}
}
function _xWin_method_SetTitle(strT){
	this._title=strT==null?this._title:strT;
	if(this.oTitleContent){
		setInnerText(this.oTitleContent,this._title);
	}
}
function _xWin_method_ShowHide(dis){
	var bdisplay = (dis==null)?((this.style.display=="none")?"":"none"):dis;
	this.style.display = bdisplay;
	this.nextSibling.style.display = bdisplay;
	if(bdisplay=="none"){
		if(this._windowState=="minimize"){
			this.parentNode.minimizedWindows[this.minIndex]=null;
			this.minIndex=null;
		}
	}else{
		if(this._windowState=="minimize"){
			this.Min();
		}
	}
}
//**通用函数区***
function getRealLeft(o){
	var l=o.offsetLeft-o.scrollLeft;
	while(o=o.offsetParent){
		l+=o.offsetLeft-o.scrollLeft;
	}
	return(l);
}
function getRealTop(o){
	var t=o.offsetTop-o.scrollTop;
	while(o=o.offsetParent){
		t+=o.offsetTop-o.scrollTop;
	}
	return(t);
}
function setInnerText(obj,text){
	switch(BROWSERNAME){
		case "ns":
			obj.textContent=text;
		break;
		case "ie":
		default:
			obj.innerText=text;
	}
}
function getElementByClassName(obj,className){
	for(var i=0;i<obj.childNodes.length;i++){
		if(obj.childNodes[i].className==className)return(obj.childNodes[i]);
	}
	return(null);
}
function getParentRect(obj){
	var re=new Object();
	if(obj.parentNode!=document.body){
		re.mw=Math.max(obj.parentNode.scrollWidth,obj.parentNode.clientWidth);
		re.mh=Math.max(obj.parentNode.scrollHeight,obj.parentNode.clientHeight);
	}else{
		re.mw=Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
		re.mh=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
	}
	return(re);
}
//]]>

提示：您可以先修改部分代码再运行

CSS：

body {
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	overflow:auto;
}
.xWin {
	position:absolute;
	cursor:default;
	border-width:2px;
	border-style:outset;
	padding:0px;
	font-size:12px;
	overflow:hidden;
	display:block;
}
.xWin .xWinSetting {
	display:none;
}
.xWin .xTitle {
	color:#FFFFFF;
	height:20px;
	display:block;
}
.xWin .xTitle input {
	background-color:transparent;
	color:#FFFFFF;
	border-width:0px;
	border-style:solid;
	height:20px;
	width:16px;
	line-height:20px;
	font-family:webdings;
	font-size:10px;
	margin:0px;
	padding:0px;
	text-align:center;
	float:right;
	display:block;
}
.xWin .xTitle .xWinTitleCloseButton {
	
}
.xWin .xTitle .xWinTitleMaxButton {
	
}
.xWin .xTitle .xWinTitleMinButton {
	
}
.xWin .xTitle .xWinTitleContent {
	color:#FFFFFF;
	font-size:12px;
	height:18px;
	line-height:20px;
	margin:0px;
	padding-left:3px;
	float:left;
	display:block;
	overflow:hidden;
	white-space:nowrap;
	text-align:left;
	cursor:default;
}
.xWin .xWinBody {
	margin:0px;
	background-color:#FFFFFF;
	color:#000000;
	padding:3px;
	font-size:12px;
	overflow:auto;
	position:relative;
	display:block;
}
.xShadow {
	position:absolute;
	display:block;
	background-Color:#000000;
	color:#FFFFFF;
}

提示：您可以先修改部分代码再运行

这个破东西终于可以算是告一段落了，俺在兼容性方面也学到了不少，哈哈哈

发现bug欢迎回帖告诉我，请多多指教

ps:
加上那个DOCTYPE和不加的区别真大啊，通过了验证好高兴啊呵呵

hutia归来...
老婆的小店
hutia的个人站点 - 有问题去这里问我

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

hutia [楼主]

诘屈聱牙

荣誉管理团队

帖子: 4719
体力: 14636
威望: 383
当前: 江苏苏州
离线: 1 天

专长 JS,PHP,ASP

2^# 大中小发表于 2006-2-18 18:22

[原创]还是xWin....这次是JS版

补充说明：

1. 可以通过在CSS中自定义背景图片的方式来更改xWin的外观效果. 预留了.xWinTitleCloseButton， .xWinTitleMinButton， .xWinTitleMaxButton 用于自定义按钮图片

2. 页面初始化用的是window的attachEvent/addEventListener, 如果页面xWin脚本后有重定义window.onload=xxx可能造成无法初始化。建议所有需要初始化的脚本都采用attachEvent/addEventListener避免冲突

3.目前较HTC版的改进：
  3.1兼容了FF 1.5
  3.2修改了窗口最大化时的滚动条问题
  3.3修改了窗口最小化时的位置问题

hutia归来...
老婆的小店
hutia的个人站点 - 有问题去这里问我

TOP

美橙vps独立IP月付189元

adleyliu

初级会员

帖子: 42
体力: 157
威望: 0
离线: 291 天

3^# 大中小发表于 2006-2-18 20:23

[原创]还是xWin....这次是JS版

看不懂，不过还是顶

QQ群联盟：
www.115000.com.cn/liuy/main_qq_index.asp
易点通WEB源：
www.115000.com.cn/
JS→CSS→ASP→PHP→QQ群:4052

TOP

中央美院远程平面设计进修班

ruxpinsp1

中级会员

帖子: 233
体力: 210
威望: 3
离线: 40 天

4^# 大中小发表于 2006-2-19 00:43

[原创]还是xWin....这次是JS版

对 FF 的支持已经比以前好多了，赞一下
但是在 FF 下，最小化后不能还原和最大化窗口，只能关闭。在窗口有滚动条的时候，resize 也有些 bug。在 Opera 和 Safari 下则完全乱掉了。
期待楼主做出更好的版本，呵呵

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

hutia [楼主]

诘屈聱牙

荣誉管理团队

帖子: 4719
体力: 14636
威望: 383
当前: 江苏苏州
离线: 1 天

专长 JS,PHP,ASP

5^# 大中小发表于 2006-2-19 14:08

[原创]还是xWin....这次是JS版

ruxpinsp1在上个帖子中说

引用:

对 FF 的支持已经比以前好多了，赞一下
但是在 FF 下，最小化后不能还原和最大化窗口，只能关闭。在窗口有滚动条的时候，resize 也有些 bug。在 Opera 和 Safari 下则完全乱掉了。
期待楼主做出更好的版本，呵呵

其实FF 下，最小化后可以还原和最大化窗口的，但是不能点在字上.......让我无比郁闷，FF的DOM模型还真是见鬼阿......明明按钮内部没有任何子节点了可是text上的click事件就是无法激发..........有知道怎么回事的达人拜托指教一下谢谢呵呵。由于没有自己的电脑，所以没时间进一步开发了.....期待这个月的工资中.........俺这个可怜的月光.......

hutia归来...
老婆的小店
hutia的个人站点 - 有问题去这里问我

TOP

ruxpinsp1

中级会员

帖子: 233
体力: 210
威望: 3
离线: 40 天

6^# 大中小发表于 2006-2-19 17:12

[原创]还是xWin....这次是JS版

hutia在上个帖子中说

引用:

ruxpinsp1在上个帖子中说
[quote] 对 FF 的支持已经比以前好多了，赞一下
但是在 FF 下，最小化后不能还原和最大化窗口，只能关闭。在窗口有滚动条的时候，resize 也有些 bug。在 Opera 和 Safari 下则完全乱掉了。
期待楼主做出更好的版本，呵呵

其实FF 下，最小化后可以还原和最大化窗口的，但是不能点在字上.......让我无比郁闷，FF的DOM模型还真是见鬼阿......明明按钮内部没有任何子节点了可是text上的click事件就是无法激发..........有知道怎么回事的达人拜托指教一下谢谢呵呵。由于没有自己的电脑，所以没时间进一步开发了.....期待这个月的工资中.........俺这个可怜的月光....... [/quote]

这个我也发现了，这个是是一种情况，还有几种类似情况，似乎就是没有任何子结点的节点的父结点上的事件，Opera和 safari 的响应都很正常，只有FF不听话，似乎会被子节点挡住，至今也没相处很好的办法解决，只能尽量避免。

TOP

bound0

老饕

版主

帖子: 3390
体力: 8412
威望: 273
当前: 北京海淀区
离线: 2 天

专长 JS,Perl,产品设计

7^# 大中小发表于 2006-2-19 17:58

[原创]还是xWin....这次是JS版

要我说，兼容性会把人的创意熬干，所以我做的东西全是IE only，甚至是IE5.5+only，不兼容用户给个提示就拉倒。（有人说，这就是业余和职业的区别，不过我不以为然。不用IE活该——暴虐倾向）

————————————————————————————————————————————
以上言论已经过时。现在不正视兼容性的要求是不行的。而且很多人开始提倡优先在FF中实现（当然这只是一种观点）。

[ 本帖最后由 bound0 于 2007-3-15 19:35 编辑 ]

[Bound0 专题列表]QUE SAIS-JE?
生物信息技术支持动漫论坛动漫分享群：45274013

TOP

jmtgj

中级会员

帖子: 65
体力: 200
威望: 0
当前: 广东江门

8^# 大中小发表于 2006-2-19 20:50

[原创]还是xWin....这次是JS版

bound0在上个帖子中说

引用:

要我说，兼容性会把人的创意熬干，所以我做的东西全是IE only，甚至是IE5.5+only，不兼容用户给个提示就拉倒。（有人说，这就是业余和职业的区别，不过我不以为然。不用IE活该——暴虐倾向）

我也有同感,有好好的IE不用偏要用其它的.为了几个人的幸福就要,熬几天的夜,真痛苦!

TOP

designervip

中级会员

帖子: 128
体力: 230
威望: 0
离线: 2 天

9^# 大中小发表于 2006-2-21 01:23

[原创]还是xWin....这次是JS版

也不是这么说的.................
如果你希望自己的作品让更多的人欣赏或认同,兼容性那是要考虑的.
当然如果做给自己看的那就随便了,甚至是IE3.0+only也没人理你

TOP

hutia [楼主]

诘屈聱牙

荣誉管理团队

帖子: 4719
体力: 14636
威望: 383
当前: 江苏苏州
离线: 1 天

专长 JS,PHP,ASP

10^# 大中小发表于 2006-2-26 13:51

ruxpinsp1在上个帖子中说

引用:

对 FF 的支持已经比以前好多了，赞一下
但是在 FF 下，最小化后不能还原和最大化窗口，只能关闭。在窗口有滚动条的时候，resize 也有些 bug。在 Opera 和 Safari 下则完全乱掉了。
期待楼主做出更好的版本，呵呵

俺更新了哈哈，不能还原和最大化的bug已经去掉了

通过了xHTML的验证了哦哈哈哈哈哈

hutia归来...
老婆的小店
hutia的个人站点 - 有问题去这里问我

TOP

fmt00

高级会员

帖子: 220
体力: 724
威望: 0
离线: 203 天

11^# 大中小发表于 2006-2-27 22:49

好东西。学习了。

TOP

dg244

高级会员

帖子: 182
体力: 626
威望: 0
当前: 北京西城区
离线: 19 天

12^# 大中小发表于 2006-3-23 14:31

好东西

TOP

windkoo

中级会员

帖子: 146
体力: 313
威望: 0
当前: 四川成都
离线: 1 天

专长 前端制作,JS,PHP

13^# 大中小发表于 2006-3-23 23:59

好好研究

TOP

usepc

初级会员

帖子: 13
体力: 50
威望: 0
离线: 933 天

14^# 大中小发表于 2006-3-24 08:51

问题报告：

1、往左和往下拖动窗口时可以超出现有屏幕区域，也就是说会出现纵向或者横向的滚动条，可能您是故意允许这样的，不过我感觉似乎不是很爽，只是个小建议。

2、在遨游浏览器里边有个比较重要的问题，如下图：
启用遨游的浮动广告过滤功能

拖动独立的那个窗口，就会出现下面的情况（有子窗口的那个倒是不会被屏蔽）：

很棒的作品，希望再接再厉～：）

TOP

twostone

高级会员

帖子: 276
体力: 840
威望: 0

15^# 大中小发表于 2006-3-24 18:42

发现错误报告

在IE6。0下，点 win3 win4
都报错误

有别的同志发现吗？

TOP

koofox

中级会员

帖子: 156
体力: 386
威望: 0
当前: 广东肇庆
离线: 4 天

专长 网页设计,ASP,MSSQL

16^# 大中小发表于 2006-3-30 11:11

twostone在上个帖子中说

引用:

在IE6。0下，点 win3 win4
都报错误

有别的同志发现吗？

发现了，不能正常打开win3,win4
***********************
呵呵，原来是定义ID时写错了：
<div class="xWin" id="win30" >
<div class="xWin" id="win31" >
应该改成
<div class="xWin" id="win3" >
<div class="xWin" id="win4" >

TOP

liaodan11

高级会员

帖子: 193
体力: 574
威望: 0
离线: 2 天

17^# 大中小发表于 2006-3-31 13:10

能否保存布局?

TOP

pobaby

中级会员

帖子: 108
体力: 240
威望: 0
当前: 河南郑州
离线: 38 天

18^# 大中小发表于 2006-5-18 21:03

看不太懂，不过还要顶一下。。

http://www.zhuiguanxiazhai.cn

TOP

carontdj

高级会员

帖子: 161
体力: 528
威望: 0
离线: 157 天

19^# 大中小发表于 2006-5-23 10:45

强哟,收藏老~~~~~~

TOP