html+css+js实现简易的xp window界面

XP WINDOW 由细小图片组成的，共有几十个小图片，拼出一个完整的xp window界面！

XP WINDOW仅用来联系html+css+js的知识，不足之处请见谅！

代码地址：(代码可优化，此代码在IE8上测试无问题，其他浏览器未测试)

http://download.csdn.net/detail/hai8902882/5205746

//JS代码，mywindow.js

function MyWindow(windowName, top, left, width, height) {
	// old values of window
	var oldTop = 100;
	var oldLeft = 200;
	var oldWidth = 500;
	var oldHeight = 400;
	
	// record x,y coordinate of click top div
	var clickTopDivX;
	var clickTopDivY;
	
	// record whether window is max size
	var maxSize = false;
	
	// record whether window is adjust 
	var adjust = true;
	
	// record whether user click in window
	var clickInWindow = false;
	
	// five component div
	var bgDiv;
	var bottomDiv;
	var rightDiv;
	var leftDiv;
	var centralDiv;
	var topDiv;
	
	// other child div
	var bottomRightCorner;
	var topLeftDivCorner;
	var topTitileDiv;
	var topButtonDiv;
	var topRightCorner;
	
	// image button 
	var closeButton;
	var maxButton;
	var minButton;
	
	// drag div
	var dragTopRightCorner;
	var dragTopLeftCorner;
	var dragBottomLeftCorner;
	var dragTop;
	var dragBottom;
	
	
	/**
	 * create element and set attribute
	 */ 
	// background div
	bgDiv = document.createElement("div");
	bgDiv.setAttribute("id", "mywindow");
	document.body.appendChild(bgDiv);
	
	// bottom div and child div
	bottomDiv = document.createElement("div");
	bottomDiv.setAttribute("id", "mywindow_bottom");
	bgDiv.appendChild(bottomDiv);
	
	bottomRightCorner = document.createElement("div");
	bottomRightCorner.setAttribute("id", "mywindow_bottom_right_corner");
	bottomDiv.appendChild(bottomRightCorner);
	
	// right div
	rightDiv = document.createElement("div");
	rightDiv.setAttribute("id", "mywindow_right");
	bgDiv.appendChild(rightDiv);
	
	// left div
	leftDiv = document.createElement("div");
	leftDiv.setAttribute("id", "mywindow_left");
	bgDiv.appendChild(leftDiv);
	
	// central div
	centralDiv = document.createElement("div");
	centralDiv.setAttribute("id", "mywindow_central");
	bgDiv.appendChild(centralDiv);	
	
	//top div and child div
	topDiv = document.createElement("div");
	topDiv.setAttribute("id", "mywindow_top"); 
	bgDiv.appendChild(topDiv);
	
	topLeftDivCorner = document.createElement("div");
	topLeftDivCorner.setAttribute("id", "mywindow_top_left_corner");
	topDiv.appendChild(topLeftDivCorner);
	
	topTitileDiv = document.createElement("div");
	topTitileDiv.setAttribute("id", "mywindow_top_title");
	topTitileDiv.innerHTML = "@Pluser";
	topDiv.appendChild(topTitileDiv);
	
	topButtonDiv = document.createElement("div");
	topButtonDiv.setAttribute("id", "mywindow_top_button");
	topDiv.appendChild(topButtonDiv);
	
	closeButton = document.createElement("img");
	closeButton.setAttribute("id", "top_close_button");
	closeButton.setAttribute("class", "button");
	closeButton.src = "image/window_control_close_blur.bmp";
	topButtonDiv.appendChild(closeButton);
	
	maxButton = document.createElement("img");
	maxButton.setAttribute("id", "top_max_button");
	maxButton.setAttribute("class", "button");
	maxButton.src = "image/window_control_max_blur.bmp";
	topButtonDiv.appendChild(maxButton);
	
	minButton = document.createElement("img");
	minButton.setAttribute("id", "top_min_button");
	minButton.setAttribute("class", "button");
	minButton.src = "image/window_control_min_blur.bmp";
	topButtonDiv.appendChild(minButton);
	
	topRightCorner = document.createElement("div");
	topRightCorner.setAttribute("id", "mywindow_top_right_corner");
	topDiv.appendChild(topRightCorner);
	
	// drag and scale div
	dragTopRightCorner = document.createElement("div");
	dragTopRightCorner.setAttribute("id", "mywindow_top_right_drag");
	bgDiv.appendChild(dragTopRightCorner);
	
	dragTopLeftCorner = document.createElement("div");
	dragTopLeftCorner.setAttribute("id", "mywindow_top_left_drag");
	bgDiv.appendChild(dragTopLeftCorner);
	
	dragBottomLeftCorner = document.createElement("div");
	dragBottomLeftCorner.setAttribute("id", "mywindow_bottom_left_drag");
	bgDiv.appendChild(dragBottomLeftCorner);
	
	dragTop = document.createElement("div");
	dragTop.setAttribute("id", "mywindow_top_drag");
	bgDiv.appendChild(dragTop);
	
	dragBottom = document.createElement("div");
	dragBottom.setAttribute("id", "mywindow_bottom_drag");
	bgDiv.appendChild(dragBottom);
	
	// intialize window
	changeWindowSize(top, left, width, height, true);
	topTitileDiv.innerHTML = windowName + "\t\t@Pluser";
	
	
	/**
	 * private function
	 * normal function, not response function of event
	 * order by initial of function's name
	 */
	/**
	 * add event handler function
	 * parameter: 
	 * @object: object of added event handler
	 * @eventName: name of added event
	 * @fun: added function's name
	 * @param: parameter of added function
	 */
	function addEventHandler(object, eventName, fun, param){
    	var fn = fun;
    	if(param) {
        	fn = function(e) {
            	fun.call(this, param);  //继承监听函数,并传入参数以初始化;
        	}
    	}
    	  
        object.attachEvent(eventName, fn);
	}
	
	/* change image of assign idName */
	function changeImage(idName, imgSrc) {
		var image = document.getElementById(idName);
		image.src = imgSrc;
	}
	
	/**
	 * chang window size function 
	 * curTop curLeft: new top left corner coordinate
	 * curRight curBottom: new bottom right corner coordinate
	 * curWidth curHeight: new width and height
	 * Boolean: whether record new data
	 */
	function changeWindowSize(curTop, curLeft, curWidth, curHeight, Boolean) {
		bgDiv.style.top = curTop;
		bgDiv.style.left = curLeft;
		bgDiv.style.width = curWidth;
		bgDiv.style.height = curHeight;
		
		/* record new data */
		if (Boolean) {
			oldTop = curTop;
			oldLeft = curLeft;
			oldWidth = curWidth;
			oldHeight = curHeight;
		}

		bottomDiv.style.top = curHeight - 26;
		bottomRightCorner.style.left = curWidth - 12; 
		topButtonDiv.style.left = curWidth - 74;
		topRightCorner.style.left = curWidth - 2;
		centralDiv.style.width = curWidth - 10;
		var tempHeight = curHeight - 60;
		if (tempHeight < 0) {
			tempHeight = 0;
		} 
		centralDiv.style.height = tempHeight;
	}
	
	/** 
     * get mouse location
     * return [x, y]: x and y coordinate of mouse
     */
	function getMouseXY() {
		var x = event.pageX || (event.clientX 
				+ (document.documentElement.scrollLeft  
    				|| document.body.scrollLeft
				   )
				);  
		
		var y= event.pageY || (event.clientY 
				+ (document.documentElement.scrollTop  
    				|| document.body.scrollTop
				   )
				);
		return [x, y];
	}
	
	/**
	 * set cursor of drag and scale div
	 * @cursorName: only two style of  cursor 
	 * one is default style 
	 * the other one is normal drag style
	 */ 
	function setDragCursor(cursorName) {
		if ("default" == cursorName) {
			dragBottom.style.cursor = cursorName;
			dragTop.style.cursor = cursorName;
			leftDiv.style.cursor = cursorName;
			rightDiv.style.cursor = cursorName;
			
			dragTopLeftCorner.style.cursor = cursorName;
			dragTopRightCorner.style.cursor = cursorName;
			dragBottomLeftCorner.style.cursor = cursorName;
			bottomRightCorner.style.cursor = cursorName;
		} else {
			dragBottom.style.cursor = "n-resize";
			dragTop.style.cursor = "n-resize";
			leftDiv.style.cursor = "e-resize";
			rightDiv.style.cursor = "e-resize";
			
			dragTopLeftCorner.style.cursor = "nw-resize";
			dragTopRightCorner.style.cursor = "ne-resize";
			dragBottomLeftCorner.style.cursor = "ne-resize";
			bottomRightCorner.style.cursor = "nw-resize";
		}
	}
	
	
	/**
	 * public function 
	 * user can use these function by mywindow object
	 * normal function, not response function of event
	 * order by initial of function's name
	 */
	/* add child object to window */
	this.addObject = function(htmlTag) {
		var tempObject = document.createElement(htmlTag);
		centralDiv.appendChild(tempObject);
	} 
	
	/* delete child object of window */
	this.deleteObject = function() {
		if(centralDiv.lastChild != null) {
			var childObject = centralDiv.lastChild;
			centralDiv.removeChild(childObject);
		}
	}
	
	/* get height values of window */
	this.getHeight = function() {
		alert("My height pixel of window is: " + bgDiv.offsetHeight);
	}
	
	/* get left values of window */
	this.getLeft = function() {
		alert("My Left pixel of window is: " + bgDiv.offsetLeft);
	}
	
	/* get top values of window */
	this.getTop = function() {
		alert("My top pixel of window is: " + bgDiv.offsetTop);
	}
	
	/* get width values of window */
	this.getWidth = function() {
		alert("My width pixel of window is: " + bgDiv.offsetWidth);
	}
	
	/* hidd window */
	this.hidden = function() {
		if (adjust) {
			bgDiv.style.display = "none";
		}
	};
	
	/* release window object */
	this.removeWindow = function() {
		if (adjust && bgDiv != null) {
			bgDiv.parentNode.removeChild(bgDiv);
		}
	}
	
	/* show window */
	this.show = function() {
		bgDiv.style.display="";
	};
	
	
	/* show max size of window */
	this.showMaxSize = function() {
		if (adjust) {
			maxSize = true;
			
			changeImage("top_max_button", "image/window_control_resile_normall.bmp");
			
			var maxWidth = screen.availWidth;
			var maxHeight = screen.availHeight;
			changeWindowSize(0, 0, maxWidth, maxHeight, false);
		}
	} 
	
	/* set whether window is adjust */
	this.setAdjust =  function(Boolean) {
		adjust = Boolean;
		if(!Boolean) {
			setDragCursor("default");
			
			closeButton.src = "image/window_control_close_blur.bmp";
			if(maxSize == true) {
				maxButton.src = "image/window_control_resile_blur.bmp";
			} else {
				maxButton.src = "image/window_control_max_blur.bmp";	
			}
			minButton.src = "image/window_control_min_blur.bmp";
		} else {
			setDragCursor("normal");
		}
	}
	
	
	/**
	 * private function
	 * response function of event
	 */
	/* respond mouse down function of close button */
	function closeMouseDown() {
		if(adjust) {
			changeImage("top_close_button", "image/window_control_close_mousedown.bmp");	
		}
	}
	
	/* respond mouse over function of close button */
	function closeMouseOver() {
		if(clickInWindow == true) {
			changeImage("top_close_button", "image/window_control_close_mouseon.bmp");
		} else {
			changeImage("top_close_button", "image/window_control_close_blur.bmp");
		}
	}
	
	/* respond mouse out function of close button */
	function closeMouseOut() {
		if(clickInWindow == true) {
			changeImage("top_close_button", "image/window_control_close_normall.bmp");
		} else {
			changeImage("top_close_button", "image/window_control_close_blur.bmp");
		}
	}
	// set close button event response function
	closeButton.onclick = this.hidden;
	closeButton.onmouseover = closeMouseOver;
	closeButton.onmouseout = closeMouseOut;
	closeButton.onmousedown = closeMouseDown;
		
	/** 
	 * judge mouse click whether in window
	 * in other words, judge window whether is activated
	 */
	function judgeClick() {
		// get mouse click site
		var coor = getMouseXY();
								
		// judge whether in window		
		if (adjust && coor[0] >= bgDiv.offsetLeft && coor[0] <= (bgDiv.offsetLeft + bgDiv.offsetWidth) 
		&& coor[1] >= bgDiv.offsetTop && coor[1] <= (bgDiv.offsetHeight + bgDiv.offsetTop)) {
			clickInWindow = true;
			
			closeButton.src = "image/window_control_close_normall.bmp";
				
			if(maxSize == true) {
				maxButton.src = "image/window_control_resile_normall.bmp";
			} else {
				maxButton.src = "image/window_control_max_normall.bmp";	
			}
			
			minButton.src = "image/window_control_min_normall.bmp";
			
		} else {	
			clickInWindow = false;
			
			closeButton.src = "image/window_control_close_blur.bmp";
			
			if(maxSize == true) {
				maxButton.src = "image/window_control_resile_blur.bmp";
			} else {
				maxButton.src = "image/window_control_max_blur.bmp";	
			}
			
			minButton.src = "image/window_control_min_blur.bmp";
		}
	}
	// set document onclick event response function
	document.onclick = judgeClick;
	
	/* respond mouse down function of max button */
	function maxMouseDown(){
		if (adjust) {
			if (maxSize == true) {
				changeImage("top_max_button", "image/window_control_resile_mousedown.bmp");
			}
			else {
				changeImage("top_max_button", "image/window_control_max_mousedown.bmp");
			}
		}
	}
	
	/* respond mouse on function of max button */
	function maxMouseOn(){
		if (adjust) {
			if (maxSize) {
				maxSize = false;
				changeWindowSize(oldTop, oldLeft, oldWidth, oldHeight, true);
				setDragCursor("normal");
			}
			else {
				showMaxSize();
				setDragCursor("default");
			}
		}
	}
	
	/* respond mouse over function of max button */
	function maxMouseOver() {
		if (clickInWindow == true) {
			if (maxSize == true) {
				changeImage("top_max_button", "image/window_control_resile_mouseon.bmp");
			}
			else {
				changeImage("top_max_button", "image/window_control_max_mouseon.bmp");
			}
		}
		else {
			if (maxSize == true) {
				changeImage("top_max_button", "image/window_control_resile_blur.bmp");
			}
			else {
				changeImage("top_max_button", "image/window_control_max_blur.bmp");
			}
		}
	}
	
	/* respond mouse out function of max button */	
	function maxMouseOut() {
		if(clickInWindow == true) {
			if (maxSize == true) {
				changeImage("top_max_button", "image/window_control_resile_normall.bmp");
			} else {
				changeImage("top_max_button", "image/window_control_max_normall.bmp");
			}
		} else {
			if (maxSize == true) {
				changeImage("top_max_button", "image/window_control_resile_blur.bmp");
			} else {
				changeImage("top_max_button", "image/window_control_max_blur.bmp");
			}
		}
	}
	// set max button event response function
	maxButton.onmouseover = maxMouseOver;
	maxButton.onmouseout = maxMouseOut;
	maxButton.onmousedown = maxMouseDown;
	maxButton.onclick = maxMouseOn;
	
	/* respond mouse down function of min button */	
	function minMouseDown() {
		if (adjust) {
			changeImage("top_min_button", "image/window_control_min_mousedown.bmp");
		}
	}
	
	// respond mouse on function of min button
	function minMouseOn() {
		if(adjust) {
			var tempWidth = 80;
			var tempHeight = 50;
			var tempTop = 200;
			var tempLeft = 300;
			changeWindowSize(tempTop, tempLeft, tempWidth, tempHeight, true);
			maxSize = false;
			setDragCursor("normal");	
		}
	}
	
	/* respond mouse over function of min button */	
	function minMouseOver() {
		if(clickInWindow == true) {
			changeImage("top_min_button", "image/window_control_min_mouseon.bmp");
		} else {
			changeImage("top_min_button", "image/window_control_min_blur.bmp");
		}
	}
	/* respond mouse out function of min button */	
	function minMouseOut() {
		if(clickInWindow == true) {
			changeImage("top_min_button", "image/window_control_min_normall.bmp");
		} else {
			changeImage("top_min_button", "image/window_control_min_blur.bmp");
		}
	}
	// set min button event response function
	minButton.onmouseover = minMouseOver;
	minButton.onmouseout = minMouseOut;
	minButton.onmousedown = minMouseDown;
	minButton.onclick = minMouseOn;
	
	/** 
	 * drag event response function
	 * move and up event must be based on down event
	 */
	function dragEvent(idName) {
		var dv = document.getElementById(idName);
      	
		// capture event
		if(dv.setCapture){
			dv.setCapture();
      	}else if(window.captureEvents){
            window.captureEvents(event.mousemove | event.mouseup);
      	}
		
		//if drag top, then must record click location
		if(idName == "mywindow_top") {
			var coor = getMouseXY();
			clickTopDivX = coor[0];
			clickTopDivY = coor[1];
		}
     
	 	//move event
      	document.onmousemove = function(){
			var curTop = oldTop;
			var curLeft = oldLeft;
			var curWidth = oldWidth;
			var curHeight = oldHeight;
			var coor = getMouseXY();
			
			if (adjust && !maxSize) {
				if (idName == "mywindow_bottom_left_drag") {
					curLeft = coor[0];
					curWidth += oldLeft - curLeft;
					curHeight = coor[1] - oldTop;
					if (curWidth < 80) {
						curLeft = oldLeft + oldWidth - 80;
					}
				} else if (idName == "mywindow_top_left_drag") {
					curTop = coor[1];
					curLeft = coor[0];
					curWidth += oldLeft - curLeft;
					curHeight += oldTop - curTop;
					if (curHeight < 50) {
						curTop = oldTop + oldHeight - 50;
					}
					if (curWidth < 80) {
						curLeft = oldLeft + oldWidth - 80;
					}
				} else if (idName == "mywindow_top_right_drag") {
					curTop = coor[1];
					curWidth = coor[0] - curLeft;
					curHeight = oldHeight + oldTop - curTop;
					if (curHeight < 50) {
						curTop = oldTop + oldHeight - 50;
					}
				} else if (idName == "mywindow_top") {
					curTop = curTop + coor[1] - clickTopDivY;
					curLeft = curLeft + coor[0] - clickTopDivX;
					clickTopDivX = coor[0];
					clickTopDivY = coor[1];
				} else if (idName == "mywindow_right") {
					curWidth = coor[0] - oldLeft;
				} else if (idName == "mywindow_left") {
					curLeft = coor[0];
					curWidth += oldLeft - curLeft;
					if (curWidth < 80) {
						curLeft = oldLeft + oldWidth - 80;
					}
				} else if (idName == "mywindow_top_drag") {
					curTop = coor[1];
					curHeight += oldTop - curTop;
					if (curHeight < 50) {
						curTop = oldTop + oldHeight - 50;
					}
				} else if (idName == "mywindow_bottom_drag") {
					curHeight = coor[1] - oldTop;
				} else {
					// drag top right corner of window
					curWidth = coor[0] - oldLeft;
					curHeight = coor[1] - oldTop;
			    }
				
				if (curWidth < 80) {
					curWidth = 80;
				}
				
				if (curHeight < 50) {
					curHeight = 50;
				}
				changeWindowSize(curTop, curLeft, curWidth, curHeight, true);
			}
		}

		//if mouse up, release event
      	document.onmouseup = function(){
           //release capture 
           if(dv.releaseCapture){
              dv.releaseCapture();
           }else if(window.captureEvents){
              window.captureEvents(event.mousemove | event.mouseup);
           }
           
           //clear events
           document.onmousemove=null;
           document.onmouseup=null;
      	}
	}
	/* add event handler to drag div */
	addEventHandler(dragTop, "onmousedown", dragEvent, "mywindow_top_drag");
	addEventHandler(dragBottom, "onmousedown", dragEvent, "mywindow_bottom_drag");
	addEventHandler(rightDiv, "onmousedown", dragEvent, "mywindow_right");
	addEventHandler(leftDiv, "onmousedown", dragEvent, "mywindow_left");
	addEventHandler(dragTopRightCorner, "onmousedown", dragEvent, "mywindow_top_right_drag");
	addEventHandler(dragTopLeftCorner, "onmousedown", dragEvent, "mywindow_top_left_drag");
	addEventHandler(dragBottomLeftCorner, "onmousedown", dragEvent, "mywindow_bottom_left_drag");
	addEventHandler(bottomRightCorner, "onmousedown", dragEvent, "mywindow_bottom_right_corner");
	addEventHandler(topDiv, "onmousedown", dragEvent, "mywindow_top");
}

//css文件，mywindow.css

/**
 * set every div style of mywindow
 * root div: mywindow
 * five component div: mywindow_bottom, mywindow_right, 
 * 		mywindow_left, mywindow_central, mywindow_top
 * other child div: mywindow_bottom_right_corner, and so on
 */
div {
	position: absolute;
}

/* set window */
#mywindow{
	/* assign default value */
	top: 100px;
	left: 200px;
	width: 500px;
	height: 400px;
	background-color: white;
}
	
/* set bottom div of window */
#mywindow_bottom {
	top: 374px;
	left: 0px;
	width: 100%;
	height: 26px;
	background-image: url("image/window_bottom_middle_border.bmp");
	background-repeat: repeat-x;
}

/* set drag div of bottom */
#mywindow_bottom_right_corner {
	top: 8px;
	left: 486px;
	width: 12px;
	height: 12px;
	cursor: nw-resize;
	background-image: url("image/window_control_drag.bmp");
	background-repeat: no-repeat;
}

/* set right div of window */
#mywindow_right {
	top: 0px;
	left: 100%;
	width: 4px;
	height: 100%;
	cursor: e-resize;
	background-image: url("image/window_right_border.bmp");
	background-repeat: repeat-y;
}
		
/* set left div of window */
#mywindow_left {
	top: 0px;
	left: 0px;
	width: 4px;
	height: 100%;
	cursor: e-resize;
	background-image: url("image/window_left_border.bmp");
	background-repeat: repeat-y;
}

/* set central div */
#mywindow_central {
	top: 30px;
	left: 4px;
	width: 490px;
	height: 340px;
    overflow: hidden;
}
		
/*  set top div of window */
#mywindow_top {
	top: 0px;
	left: 0px;
	width: 100%;
	height: 30px;
	background-image: url("image/window_top_header.bmp");
	background-repeat: repeat-x;
}

/* set left corner div of top */
#mywindow_top_left_corner {
	top: 0px;
	left: 0px;
	width: 8px;
	height: 100%;
	background-image: url("image/window_top_left_corner.gif");
    background-repeat: no-repeat;
}

/* set title div of top */
#mywindow_top_title {
	top: 6px;
	left: 6px;
	height: 15px;
	color: white;
	cursor: default;
	overflow: hidden;
}

/* set middle div of top, and set buttom image */
#mywindow_top_button {
	top: 0px;
	left: 425px;
}

/* use image as button */
img.button {
	float: right;
	margin: 5px 1px;
}

/* set right corner div of top */
#mywindow_top_right_corner {
	top: 0px;
	left: 498px;
	width: 8px;
	height: 100%;
	background-image: url("image/window_top_right_corner.bmp");
	background-repeat: no-repeat;
}

/** 
 * drag div, client drag or scale window 
 */
#mywindow_top_right_drag {
	top: 0%;
	left: 100%;
	width: 4px;
	height: 4px;
	cursor: ne-resize;
}

#mywindow_top_left_drag {
	top: 0%;
	left: 0%;
	width: 4px;
	height: 4px;
	cursor: nw-resize;
}

#mywindow_bottom_left_drag {
	top: 99%;
	left: 0%;
	width: 4px;
	height: 4px;
	cursor: ne-resize;
}

#mywindow_top_drag {
	top: 0%;
	left: 2%;
	width: 96%;
	height: 1px;
	cursor: n-resize;
}

#mywindow_bottom_drag {
	top: 99%;
	left: 2%;
	width: 96%;
	height: 4px;
	cursor: n-resize;
}

		

//client.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>Insert title here</title>
	<!-- call mywindow external file(.css, .js) -->
	<link rel="stylesheet" href="mywindow.css" type="text/css" />
	<script language="JavaScript" src="mywindow.js"> </script>
	
	<style>
	 
 	/* set button style, use list as button */
	li {
		float: left;
		display: inline;
		white-space: nowrap;
		border: 0 solid white;
		border-right-width: 2px;
		border-bottom-width: 10px;
	}

	/* set <a> style */
	a {
		background-color: purple;
		color: white;
		text-decoration: none;
		padding: 4px 6px;
	}
	
	/* set hover of <a> */
	a:hover {
		background-color: #FF5500;
	}
	</style>
</head>
<body>
	<!--  set list button -->
	<ul>
		<li><a href="#" onclick="hiddenWindow();">隐藏窗口</a></li> 
		<li><a href="#" onclick="showWindow();">显示窗口</a></li>
		<li><a href="#" onclick="setAdjust(true);">设置窗口可调整大小</a></li> 
		<li><a href="#" onclick="setAdjust(false);">设置窗口不可调整大小</a></li>
		<li><a href="#" onclick="showMaxSize();">最大化窗口</a></li>
		<li><a href="#" onclick="addObject();">在窗口中添加对象 </a></li>
		<li><a href="#" onclick="deleteObject();">删除对象</a></li>
		<li><a href="#" onclick="getTop();">得到Top的值</a></li>
		<li><a href="#" onclick="getLeft();">得到Left的值</a></li>
		<li><a href="#" onclick="getWidth();">得到Width的值</a></li>
		<li><a href="#" onclick="getHeight();">得到Height的值</a></li>
		<li><a href="#" onclick="removeWindow();">释放窗口资源</a></li>
	</ul><br> 
	
	<!-- create MyWindow, and create function -->	
	<script type="text/javascript">
		// create MyWindow variable
	    var myWindow = new MyWindow("favorite window", 150, 250, 600, 400);
	
	    /* 
	     * set onclick function
	     */
		function hiddenWindow() {
			myWindow.hidden();
		}
		
		function showWindow() {
			myWindow.show();
		}
		
		function setAdjust(adj) {
			myWindow.setAdjust(adj);
		}
		
		function showMaxSize() {
			myWindow.showMaxSize();
		}
		
		function getTop() {
			myWindow.getTop();
		}
		
		function getLeft() {
			myWindow.getLeft();
		}
		
		function getWidth() {
			myWindow.getWidth();
		}
		
		function getHeight() {
			myWindow.getHeight();
		}
		
		function removeWindow() {
			myWindow.removeWindow();
		}
		
		function addObject() {
			var s = prompt("请输入您要添加的对象", "HTML Tag");
			myWindow.addObject(s);
		}
		
		function deleteObject() {
			myWindow.deleteObject();
		}
		
	</script>

</body>
</html>