html+css+js兑现xp window界面及有关功能-HTML教程-爱易网页

html+css+js兑现xp window界面及有关功能

日期：2014-05-17　浏览次数：20663 次

html+css+js实现xp window界面及有关功能

注意： 该程序在IE调试的，其他浏览器可能有BUG，见谅！


<!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>
	<!-- 
	  -- CSS  
	  -- set window style
	  -->
	<link rel="stylesheet" type="text/css" href="main.css" />
	
	<!--  
	  -- JavaScript
	  -- set function
	  -->
	<script language="JavaScript" src="mywindow.js"> </script>
	<script>
		alert("XP Window以IE测试,其他浏览器可能有BUG请见谅! 基本功能+四边四角顶部拖拉都已实现!")
		alert("进行操作前,记得先初始化窗口哦!");
		
		/*
		 * create xp window and initialize
		 */
	    var myW = new MyWindow();
		function initialize() {
			myW.setBackgroundDiv("mywindow");
			myW.setLeftDiv("mywindow_left");
			myW.setRightDiv("mywindow_right");
			myW.setBottomDiv("mywindow_bottom");
			myW.setTopDiv("mywindow_top");
			myW.initialEvent();
		}
		
		/*
		 * list button event function
		 */
		function hiddenWindow() {
			myW.hidden();
		}
		
		function showWindow() {
			myW.show();
		}
		
		function setAdjust(adj) {
			myW.setAdjust(adj);
		}
		
		function showMaxSize() {
			myW.showMaxSize();
		}
		
		function getTop() {
			myW.getTop();
		}
		
		function getLeft() {
			myW.getLeft();
		}
		
		function getWidth() {
			myW.getWidth();
		}
		
		function getHeight() {
			myW.getHeight();
		}
		
		function removeWindow() {
			myW.removeWindow();
		}
		
		function addObject() {
			myW.addObject();
		}
		
		function deleteObject() {
			myW.deleteObject();
		}
		
		/*
		 * drag operation event function
		 */
		function start(idName) {
			myW.start(idName);
		}
		
		function move(idName) {
			myW.move(idName);
		}
		
		function end(idName) {
			myW.end(idName);
		}
		
	</script>
</head>
<body>
	<!-- 
	  -- set list button
	  -->
	<ul>
		<li><a href="#" onclick="initialize();">初始化窗口</a></li>
		<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>
	
	<!-- 
	  -- set every div of window
	  -- because cover proble, so order of set div is bottom, right/left, central, last top
	  -->
	<div id="mywindow">
		<!-- set bottom div -->
		<div id="mywindow_bottom">
			<div id="mywindow_botton_right_corner" onmousedown="start('mywindow_botton_right_corner');" 
				onmousemove="move('mywindow_botton_right_corner');"
				onmouseup="end('mywindow_botton_right_corner');">
			</d

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

html+css+js兑现xp window界面及有关功能

相关资料更多>

推荐阅读更多>