<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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(); //设定命名空间
System.UI = new Object();
System.UI.EasyWindow = function(title/*标题*/ ,content/*显示内容*/ ,type/*类型*/ ,style/*窗口样式*/){
this.title = title; //标题
this.name = parseInt(Math.random()*100000); //窗口名称
this.style = style; //窗口样式
this.content = content; //显示内容
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;\">关闭</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();//设置窗口属性
this.startDrag();//设置拖动
this.setContent();//设置内容
this.setTop();//设置窗口优先级
this.setClose();//设置关闭
};this.init();
};
//窗口优先级
System.UI.EasyWindow.zIndex = 100;
//设置窗口属性
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;
}
}
//窗口拖动
System.UI.EasyWindow.prototype.startDrag = function(){
var obj = document.getElementById(this.name);
Drag.init(obj.childNodes[0] ,obj);
};
//设置内容
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);
}
};
//设定窗口优先级
System.UI.EasyWindow.prototype.setTop = function(){
document.getElementById(this.name).onclick = function(){
System.UI.EasyWindow.zIndex++;
this.style.zIndex = System.UI.EasyWindow.zIndex;
};
};
//设置关闭
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);
};
};
//获取内容
System.UI.EasyWindow.prototype.getValue = function(){
return this.content;
};
//设置内容
System.UI.EasyWindow.prototype.setValue = function(Value){
this.content = Vlaue;
this.setContent();
};
//加载实例
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太简练了，简练是不错的，但是这样一来，官方的UI部分就没有了，网友开发的UI插件倒是有，可惜都没几个好看的。
http:///demo/UI/demos/ui.dialog.html
这个也还真不错了！，但是一旦移动到屏幕的右下角.....总是不太爽啊！！！
