<!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>窗口類 </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="drag.js"></script>
<script type="text/javascript">
/**************************************************
* EasyWindow.js
* 30.5.2008
**************************************************
* msn:danxinju@hotmail.com
* author:xj.d
**************************************************/
var System = new Object(); //設(shè)定命名空間
System.UI = new Object();
System.UI.EasyWindow = function(title/*標(biāo)題*/ ,content/*顯示內(nèi)容*/ ,type/*類型*/ ,style/*窗口樣式*/){
this.title = title; //標(biāo)題
this.name = parseInt(Math.random()*100000); //窗口名稱
this.style = style; //窗口樣式
this.content = content; //顯示內(nèi)容
this.type = typeof type == "undefined"?"common" : type; //類型
this.init = function(){ //初始化窗口
//加載窗口
var strInit = "<div style=\"width:350px;height:400px;border:1px solid #5CC6F8;" +
"border-right:2px solid #06577D;position:absolute;" +
"border-bottom:2px solid #06577D;font-family: 宋,sans-serif;font-size:12px;\" id=\""+ this.name +"\">" +
"<table style=\"margin:0px;padding:0px;width:100%;height:23px;background:#CEE3FF;cursor:move;\">" +
"<tr><td style=\"font-weight:bold;width:90%;padding-left:2px;\">"+ this.title +"</td>" +
"<td style=\"width:10%;text-align:right;padding-right:2px;\">" +
"<a href=\"#\" style=\"color:#848484;\">關(guān)閉</a></td></tr></table>" +
"<div style=\"height:90%;padding:3px;overflow:auto;background:#ffffff;\"></div></div>";
var divInit = document.createElement("div");
divInit.innerHTML = strInit;
document.body.appendChild(divInit);
this.setCss();//設(shè)置窗口屬性
this.startDrag();//設(shè)置拖動(dòng)
this.setContent();//設(shè)置內(nèi)容
this.setTop();//設(shè)置窗口優(yōu)先級(jí)
this.setClose();//設(shè)置關(guān)閉
};this.init();
};
//窗口優(yōu)先級(jí)
System.UI.EasyWindow.zIndex = 100;
//設(shè)置窗口屬性
System.UI.EasyWindow.prototype.setCss = function(){
if(typeof this.style != "undefined")
{
var obj = document.getElementById(this.name);
if(typeof this.style.width != "undefined")
obj.style.width = this.style.width;
if(typeof this.style.height != "undefined")
obj.style.height = this.style.height;
if(typeof this.style.top != "undefined")
obj.style.top = this.style.top;
if(typeof this.style.left != "undefined")
obj.style.left = this.style.left;
}
}
//窗口拖動(dòng)
System.UI.EasyWindow.prototype.startDrag = function(){
var obj = document.getElementById(this.name);
Drag.init(obj.childNodes[0] ,obj);
};
//設(shè)置內(nèi)容
System.UI.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);
}
};
//設(shè)定窗口優(yōu)先級(jí)
System.UI.EasyWindow.prototype.setTop = function(){
document.getElementById(this.name).onclick = function(){
System.UI.EasyWindow.zIndex++;
this.style.zIndex = System.UI.EasyWindow.zIndex;
};
};
//設(shè)置關(guān)閉
System.UI.EasyWindow.prototype.setClose = function(){
var obj = document.getElementById(this.name);
obj.childNodes[0].rows[0].cells[1].childNodes[0].onclick = function(){
obj.style.display = "none";
obj.removeNode(true);
};
};
//獲取內(nèi)容
System.UI.EasyWindow.prototype.getValue = function(){
return this.content;
};
//設(shè)置內(nèi)容
System.UI.EasyWindow.prototype.setValue = function(Value){
this.content = Vlaue;
this.setContent();
};
//加載實(shí)例
window.onload = function(){
example1 = new System.UI.EasyWindow("測試窗口2" ,"這里是自定義:<br /><input type='text' />輸入文字" ,"common")
example2 = new System.UI.EasyWindow("測試窗口1" ,"http://www.baidu.com" ,"url" ,{
left:"300px" ,top:"100px" ,width:"750px" ,height:"600px"
});
}
</script>
</head>
<body>
</body>
</html>
Jquery太簡練了，簡練是不錯(cuò)的，但是這樣一來，官方的UI部分就沒有了，網(wǎng)友開發(fā)的UI插件倒是有，可惜都沒幾個(gè)好看的。
http://jquery.org.cn/demo/UI/demos/ui.dialog.html
這個(gè)也還真不錯(cuò)了！，但是一旦移動(dòng)到屏幕的右下角.....總是不太爽?。。。?br>
