Tip: you can modify some code before running
Javascript imitation window multi-window desktop effect (with simulated alert () Prompts. And confirm ())<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Window type</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><script type="text/javascript">/*************************************** * *********** EasyWindow. js * 30.5.2008 ************************************* * ************* msn: danxinju@hotmail.com * author: xj. d *************************************** * *********/var EasyWindow = function (title/* title */, content/* Display content */, type/* type */, style/* window style */) {this. title = title; // title this. name = parseInt (Math. random () * 100000); // window name this. style = style; // window Style this. content = content; // display the content this. type = typeof type = "undefined "? "Common": type; // type this. height = ""; // window height this. width = "" // window width this. init = function () {// Initialization window // storage window string var strInit = new EasyWindow. stringBuild (); strInit. push ("<div );strInit.push("font-family: 宋,sans-serif;font-size:12px;top:0px;left:0px;");strInit.push("border-bottom:2px solid #E0E0E0;border-right:2px solid #E0E0E0;" id=""+ this.name +"">"); StrInit. push ("<table ");strInit.push("cellpadding="0" cellspacing="0">"); StrInit. push ("<tr>"); StrInit. push ("<td >"+ This. title +"</td>"); StrInit. push ("<td >"); StrInit. push ("</td></tr></table>"); StrInit. push ("<div ></div></div>"); // Load the window var divInit = document. createElement ("div"); divInit. innerHTML = strInit. toString (); document. body. appendChild (divInit); // sets the part command this. setCss (); // Set the window property this. startDrag (); // you can drag this. setContent (); // set the content this. setTop (); // Set the window priority this. setCommond (); // Set to Close EasyWindow. arrayW. push (document. getElementById (this. name); // store the window to the array}; this. init () ;}; // store the window to the array EasyWindow. arrayW = new Array (); // string connection class EasyWindow. string Build = function () {this. arr = new Array (); this. push = function (str) {this. arr. push (str) ;}; this. toString = function () {return this. arr. join ("") ;};}; // drag EasyWindow. drag = function (o, oRoot) {var _ self = this; // Drag the object this. obj = (typeof oRoot! = "Undefined ")? ORoot: o; this. relLeft = 0; // record the abscissa this. relTop = 0; // record y coordinate o. onselectstart = function () {return false ;}; o. onmousedown = function (e) {// Press e = _ self with the mouse. fixE (e); _ self. relLeft = e. clientX-_ self. fixU (_ self. obj. style. left); _ self. relTop = e. clientY-_ self. fixU (_ self. obj. style. top); document. onmousemove = function (e) {_ self. drag (e); _ self. obj. style. border = "1px dashed #000000"; _ self. obj. style. filter = "alpha (Opacity = 30) "; _ self. obj. style. opacity = "0.3" ;}; document. onmouseup = function () {_ self. end (); _ self. obj. style. border = "1px solid # cccccc"; _ self. obj. style. borderBottom = "2px solid # E0E0E0"; _ self. obj. style. borderRight = "2px solid # E0E0E0"; _ self. obj. style. filter = "alpha (opacity = 100)"; _ self. obj. style. opacity = "1" ;};}; this. drag = function (e) {// drag e = this. fixE (e); var l = e. clientX-this. relLeft; var T = e. clientY-this. relTop; if (t <0) {t = 0; // prevents the head from disappearing} this. obj. style. left = l + "px"; this. obj. style. top = t + "px" ;}; this. end = function () {// drag document. onmousemove = null; document. onmouseup = null;}; this. fixE = function (e) {// fixed the event if (typeof e = "undefined") e = window. event; return e ;}; this. fixU = function (u) {// process the px unit return parseInt (u. split ("p") [0]) ;};// set the window property EasyWindow. prototype. setCss = functio N () {// set the style var obj = document. getElementById (this. name); if (typeof this. style! = "Undefined") {if (typeof this. style. width! = "Undefined") obj. style. width = this. style. width; // set the width if (typeof this. style. height! = "Undefined") obj. style. height = this. style. height; // set the height if (typeof this. style. top! = "Undefined") obj. style. top = this. style. top; // Set topif (typeof this. style. left! = "Undefined") obj. style. left = this. style. left; // Set leftif (typeof this. style. background! = "Undefined") // sets the background {obj. getElementsByTagName ("table") [0]. style. background = "url (" + this. style. background + ")" ;}}// storage width and height this. height = obj. style. height; this. width = obj. style. width;} // drag EasyWindow to the window. prototype. startDrag = function () {var obj = document. getElementById (this. name); new EasyWindow. drag (obj. childNodes [0], obj) ;}; // sets EasyWindow. prototype. setContent = function () {var obj = document. getElementById (this. name ). childNodes [1]; if (this. type = "common") {obj. innerHTML = this. content;} else {var iframe = document. createElement ("iframe"); iframe. width = "100%"; iframe. height = "100%"; iframe. frameBorder = 0; iframe. src = this. content; obj. appendChild (iframe) ;}}; // sets the window priority EasyWindow. prototype. setTop = function () {document. getElementById (this. name ). onclick = document. getElementById (this. name ). onmousedown = function () {for (var I = 0; I<EasyWindow.ArrayW.length;i++){EasyWindow.ArrayW[i].style.zIndex = 1;}this.style.zIndex = 100;};};//设置关闭EasyWindow.prototype.setCommond = function(){var _self = this;//根对象var obj = document.getElementById(this.name);//设置隐藏obj.childNodes[0].getElementsByTagName("a")[0].onclick = function(){if (obj.childNodes[1].style.display == ""){obj.style.height = "25px";obj.style.width = "350px";obj.childNodes[1].style.display = "none";this.getElementsByTagName("img")[0].src = "images/show.gif";}else{obj.style.height = _self.height;obj.style.width = _self.width;obj.childNodes[1].style.display = "";this.getElementsByTagName("img")[0].src = "images/hide.gif";}};//设置关闭obj.childNodes[0].getElementsByTagName("a")[1].onclick = function(){obj.style.display = "none";obj.removeNode(true);};};//获取值EasyWindow.prototype.getValue = function(){return this.content;};//设置值EasyWindow.prototype.setValue = function(Value){this.content = Vlaue;this.setContent();};//加载实例window.onload = function(){ example1 = new EasyWindow("测试窗口2" ,"这里是自定义:<br /><input type='text' />输入文字" ,"common") example2 = new EasyWindow("测试窗口1" ,"http://www.baidu.com" ,"url" ,{left:"300px" ,top:"100px" ,width:"750px" ,height:"600px" ,background:"images/gray.gif"}); example3 = new EasyWindow("测试窗口3" ,"http://www.google.cn" ,"url" ,{left:"400px" ,top:"200px" ,width:"750px" ,height:"600px" ,background:"images/green.gif"}); }</script></head><body></body></html>
Tip: you can modify some code before running
