<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="brull@163.com,brull" />
<script type="text/javascript">
/**
*JWindow,Jchat窗口类
*version 1.0
*@author brull
*@email brull@163.com
*@date 2007-01-31
*/
/*
*新建一个窗口视图,并显示在浏览器容器里
*类里有实例方法,min、changeStatus、close、drag
*/
JWindow = function (win_obj)
{
/*
窗口存在判断
如果窗口存在则只是显示它,并将它置为当前窗口
*/
if(document.getElementById(win_obj.id)){//窗口已存在
var existWin = document.getElementById(win_obj.id).quote;//存在窗口的引用
if (JWindow.curWindow != win_obj.id){//窗口不是当前窗口
if (existWin.contain.style.display == "none"){//窗口是隐藏的(MIN,CLOSE),窗口隐藏时标题活动样式不变
existWin.status = existWin.oldStatus;//还原原来状态
existWin.contain.style.display = "";//显示窗口
JWindow.curWindow = win_obj.id;//设置为当前窗口
me.previous = JWindow.curWindow;
}
else {
document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_deactive";//设置当前窗口为非活动窗口样式
document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive";//设置任务栏按钮为非活动按钮样式
JWindow.curWindow = win_obj.id;//设置为当前窗口
document.getElementById(win_obj.id + "_caption").className = "win_caption_active";//设置窗口为活动窗口样式
document.getElementById(win_obj.id + "_task").className = "task_button_active";//设置任务栏按钮为活动按钮样式
}
existWin.contain.zIndex = JWindow.zIndex++;//窗口上移到层最顶端
}
return;
}
/**********创建窗口******************/
var win = win_obj;//包含窗口属性的原生对象
var isIe = /msie/i.test(navigator.userAgent);//是否是IE浏览器
this.contain = document.createElement("div");//窗口容器
this.id= win.id;//win_obj没有默认值,初始化时win_obj必须有id属性
this.width = win.width?win.width:420;//窗口宽,默认为420
this.height = win.height?win.height:360;//窗口关,默认为360
this.left = win.left?win.left:(document.documentElement.clientWidth-this.width)/2;//窗口左上角距离浏览器左边框距离,默认居中
this.top = win.top?win.top:(document.documentElement.clientHeight-this.height)/2;//窗口左上角距离浏览器上边框距离,默认居中
this.oldLeft = this.left;//记录窗口最大化时窗口左上角距离浏览器左边框距离
this.oldTop = this.top;//记录窗口最大化时窗口左上角距离浏览器顶边框距离
this.title = win.title?win.title:" ";//标题,默认为空
this.content = win.content ? win.content : "";//窗口内容,默认为空
this.icon = win.icon ? win.icon : "http://www.51js.com/attachments/2007/03/35270_200703102258421.gif";//窗口图标
this.minButton = (win.minButton == false) ? false:true;//是否显示最小化按钮,默认显示
this.maxButton = (win.maxButton == false) ? false:true;//是否显示最大化按钮,默认显示
this.closeButton = (win.closeButton==false) ? false:true;//是否显示关闭按钮,默认显示
this.status = "NORMAL";//窗口状态,包括MAX,MIN,NORMAL,CLOSE
this.previous = JWindow.curWindow ? JWindow.curWindow : null;//上个当前窗口,在窗口关闭和最小化时有用
win = null;//释放对象
var me = this;//对象引用,方便类内部引用
/*************生成窗口视图******************/
me.contain.id = this.id;
me.contain.quote = this;//对象引用,方便应用页面引用
me.contain.className="win_contain";
with(me.contain.style){
position = "absolute";
left = this.left + "px";
top = this.top + "px";
width =this.width + "px";
height =this.height + "px";
zIndex = JWindow.zIndex++;
}
me.contain.innerHTML = "<div class=/"win_caption_active/" id=/"" + this.id + "_caption/"" + " οndblclick=/"document.getElementById('" + this.id + "').quote.changeStatus('" + this.id + "')/"><img src=/"" + this.icon + "/" class=/"win_icon/" /><span class=/"win_title/">" + this.title + "</span><div class=/"win_button_div/">"+(this.minButton ? "<input class=/"win_min/" type=/"button/" title=/"最小化/" οnclick=/"document.getElementById('" + this.id + "').quote.min();/" />":"")+(this.maxButton ? "<input class=/"win_max/" id=/"" + this.id + "_maxbutton/" type=/"button/" οnmοuseοver=/"this.title=(document.getElementById('" + this.id + "').quote.status=='MAX')?'还原':'最大化'/" οnclick=/"this.blur();document.getElementById('" + this.id + "').quote.changeStatus();/" />":"")+(this.closeButton ? "<input class=/"win_close/" type=/"button/" title=/"关闭/" οnclick=/"document.getElementById(/'" + this.id + "/').quote.close();/"/>":"")+ "</div></div><div class=/"win_body/" id=/"" + this.id + "_body" + "/">" + this.content + "</div>";
/***************注册窗口事件************************/
me.contain.onmousedown = function (e)
{
e = e || window.event;
var srcElement = isIe ? e.srcElement : e.target;
if(JWindow.curWindow != me.id){
me.contain.style.zIndex = JWindow.zIndex++;
document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_deactive";
document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive";
me.previous = JWindow.curWindow;
JWindow.curWindow = me.id;//设置为当前窗口
document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_active";
document.getElementById(JWindow.curWindow + "_task").className = "task_button_active";
}
if (me.id + "_caption" ==srcElement.id && me.status == "NORMAL") me.drag(e);
}
/***********添加任务栏按钮**********/
var task = document.createElement("button");
task.id = me.id + "_task";
task.title = me.title;
task.className = "task_button_active";
task.innerHTML = "<img src=/"" + me.icon + "/" class=/"task_icon/" /><span class=/"task_font/">" + me.title + "</span>";
task.onclick = function () {
task.blur();//丢掉讨厌的虚线框
if(JWindow.curWindow != me.id){
me.contain.style.zIndex = JWindow.zIndex++;
document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_deactive";
document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive";
me.previous = JWindow.curWindow;
JWindow.curWindow = me.id;//设置为当前窗口
document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_active";
document.getElementById(JWindow.curWindow + "_task").className = "task_button_active";
if(me.status == "MIN"){
me.status = me.oldStatus;//还原原来状态
//document.getElementById(me.id + "_task").className = "task_button_active";
me.contain.style.display = "";//显示窗口
}
}
else if(me.status == "MAX" || me.status == "NORMAL") me.min();
else if(me.status == "MIN") {
me.status = me.oldStatus;//还原原来状态
document.getElementById(me.id + "_task").className = "task_button_active";
me.contain.style.display = "";//显示窗口
}
}
if(! document.getElementById("task")) JWindow.createTask();
document.getElementById("task").appendChild(task);
document.body.appendChild(me.contain);//将窗口放入浏览器容器
if (document.getElementById(JWindow.curWindow) != null){ //当前窗口不为空
document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_deactive";//设置当前窗口为不活动状态
document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive";
}
/***********设置为当前窗口*************/
JWindow.curWindow = me.id;
/***********对象方法*************/
this.drag = function (e)
{
var w = me.contain;
var relLeft = e.clientX-parseInt(w.style.left);
var relTop = e.clientY-parseInt(w.style.top);
//每次拖动都注册事件,然后再注销
document.onmousemove = function (e)
{
e = e || event;
if(w !=null){
w.style.left = (e.clientX-relLeft) + "px";
w.style.top = (e.clientY-relTop) + "px";
}
}
document.onselectstart = function ()
{
return false;
}
document.onmouseup = function ()
{
w = null;//释放拖动对象
document.onmouseup = document.onmousemove = document.onselectstart = null;//注销注册事件,包括该事件本身
}
}
this.min = function ()
{
if(JWindow.curWindow == me.id && this.minButton){
me.contain.style.display = "none";//只是隐藏而已^_^
me.oldStatus = me.status;//保存最小化前的状态
document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive";
me.status = "MIN";
if(me.previous && document.getElementById(me.previous).quote.contain.style.display != "none"){
JWindow.curWindow = me.previous;//设置为当前窗口
document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_active";
document.getElementById(JWindow.curWindow + "_task").className = "task_button_active";
}
}
}
this.changeStatus = function ()
{
if (me.status == "MIN"||me.status == "CLOSE") return ;
if (me.status == "MAX" && this.maxButton)
{
with(me.contain.style){
left = me.oldLeft + "px";
top = me.oldTop + "px";
width = me.width + "px";
height = me.height + "px";
}
document.getElementById(me.id + "_maxbutton").className="win_max";
me.status = "NORMAL";
}
else if(me.status =="NORMAL" && this.maxButton)
{
//记录窗口位置,方便窗口还原大小时定位
me.oldLeft = parseInt(me.contain.style.left);
me.oldTop = parseInt(me.contain.style.top);
with(me.contain.style){
left = 0;
top = 0;
width = document.documentElement.clientWidth + "px";//only for XHTML
height = (document.documentElement.clientHeight-document.getElementById("task").offsetHeight) + "px";//only for XHTML
}
document.getElementById(me.id + "_maxbutton").className="win_res";
me.status = "MAX";
}
}
//窗口关闭
this.close = function ()
{
if(JWindow.curWindow == me.id && this.closeButton){
document.getElementById(JWindow.curWindow + "_task").style.display = "none";
me.contain.style.display = "none";//只是隐藏而已^_^
me.oldStatus = me.status;//保存关闭前的状态
me.status = "CLOSE";
if(me.previous && document.getElementById(me.previous).quote.contain.style.display != "none"){
JWindow.curWindow = me.previous;//设置为当前窗口
document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_active";
document.getElementById(JWindow.curWindow + "_task").className = "task_button_active";
}
}
}
}
/***************静态属性和方法***********/
//静态属性
JWindow.zIndex = 100;//初始zIndex,任务栏的zIndex为30000,每点击一次窗口窗口zIndex自增1,也就是用户最多可以点击窗口29900次,应该已经足够
JWindow.curWindow = null;//当前活动窗口
/*********静态方法**********/
//创建任务栏
JWindow.createTask = function() {
var task = document.createElement("div");
task.id = "task";
with (task.style) {
position = "absolute";
height = "20px";
width = document.documentElement.clientWidth + "px";
left = 0;
bottom = 0;
padding = "1px";
border = "1px solid #EEE";
background = "#CCC";
zIndex = 30000;//设置一个比较大数,使其永远位于最上层
}
document.body.appendChild(task);
}
/*非本类方法,但是在这里编写可读性比较高
*注册系统事件
*/
/***********注册事件,在浏览器窗口大小调整时对任务栏的位置和宽度进行相应调整*********/
window.onresize = function () {
with(document.getElementById("task").style){
width = document.documentElement.clientWidth + "px";
top = (document.documentElement.clientHeight-parseInt(height)) + "px";
}
}
</script>
<title>web online communication</title>
<style type="text/css">
/*Jchat 客户端默认样式表*/
html,body
{
height:100%;
width:100%;
overflow:hidden;
border-width:0;
background-color:#336699;
margin:0;
padding:0;
}
/*窗口容器*/
.win_contain
{
border-width:2px;
border-style:outset;
border-color:#D4D0C8 #404040 #404040 #D4D0C8;
cursor:default;
background-color:#CCC;
}
/*活动窗口标题样式*/
.win_caption_active
{
width:100%;
height:18px;
font-size:14px;
background-color:#69C;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#10246B,endColorStr=#a5cbf7,GradientType=1);
}
/*非活动窗口标题样式*/
.win_caption_deactive
{
width:100%;
height:18px;
background-color:#808080;
font-size:14px;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#848284,endcolorstr=#c6c3c6,GradientType=1);
}
/*窗口窗体样式*/
.win_body
{
width:99%;
height:340px;
padding:2px;
overflow:hidden;
}
/*窗口图标样式*/
.win_icon
{
padding:1px;
vertical-align:text-bottom;
}
/*窗口标题样式*/
.win_title
{
color:#FFF;
/*font-size:14px;*/
font-weight:bold;
}
/*窗口按钮层样式*/
.win_button_div
{
display:inline;
position:absolute;
right:0;
padding:2px;
}
/*窗口按钮样式*/
.win_button_div input
{
width:16px;
height:14px;
background-color:#CCC;
}
/*活动任务栏按钮*/
.task_button_active
{
border:2px inset;
width:100px;
height:20px;
text-align:left;
margin-left:3px;
padding:0px;
overflow:hidden;
background-color:#CCC;
}
/*非活动任务栏按钮*/
.task_button_deactive
{
width:100px;
height:20px;
text-align:left;
margin-left:3px;
overflow:hidden;
padding:0px;
background-color:#CCC;
}
/*任务栏按钮文字*/
.task_font
{
font-size:12px;
}
/*任务栏按钮图标*/
.task_icon
{
vertical-align:bottom;
}
/*聊天内容窗口*/
.chat_frame
{
width:100%;
height:240px;
background-color:#FFF;
word-break:break-all;
}
.editor_frame
{
width:100%;
height:100px;
background-color:#FFF;
word-break:break-all;
}
/*窗口最小化按钮样式*/
.win_min
{
background:#d4d0c8 url(http://www.51js.com/attachments/2007/03/35270_200703102256511.gif) no-repeat center center;
}
/*窗口还原按钮样式*/
.win_res
{
background:#d4d0c8 url(http://www.51js.com/attachments/2007/03/35270_200703102257161.gif) no-repeat center center;
}
/*窗口最大化按钮样式*/
.win_max
{
background:#d4d0c8 url(http://www.51js.com/attachments/2007/03/35270_200703102256581.gif) no-repeat center center;
}
/*窗口关闭按钮样式*/
.win_close
{
background:#d4d0c8 url(http://www.51js.com/attachments/2007/03/35270_200703102257331.gif) no-repeat center center;
}
</style>
</head>
<body>
<script type="text/javascript">
/*******用户程序*********/
var content ="调用方法:<br />构造win对象,然后将win对象作为参数实例化JWindow类。具体如源代码下面的例子。<br />其中win对象的属性如下:<br />id:窗口id,用户必须提供值,并确保是唯一的<br />title:窗口标题,默认为空<br />content:窗体内显示的内容,可以是任何浏览器认得的东西,默认为空<br /> icon:窗口图标,如果用户没有提供值,类会提供个默认值<br />top:窗口左上角距离浏览器上边框距离,默认居中<br />left:窗口左上角距离浏览器左边框距离,默认居中<br />width:窗口宽,默认为420<br />height:窗口关,默认为360<br />minButton:(布尔值)是否显示最小化按钮,默认显示<br />maxButton:(布尔值)是否显示最大化按钮,默认显示<br />closeButton:(布尔值)是否显示关闭按钮,默认显示";
var win1={
title:"测试",
id:"1",
content:content
};
var win2={
id:"2",
content:content,
maxButton:false
};
var win3=new Object();
win3.title="测试";
win3.id="3"; win3.content=content;
win3.icon="http://www.51js.com/attachments/2007/03/35270_200703102258421.gif";
new JWindow(win1);
new JWindow(win2);
new JWindow(win3);
</script>
<!--information-->
<div style="position: absolute; bottom: 30px; right: 5px; word-break: break-all;
font-size: 12px; color: #CCC;">
兼容浏览器:IE5.5+、FireFox1.5+<br />
推荐浏览器:IE6.0、FireFox2.0<br />
design by brull. All right reserved ©2007
<br />
Email:brull@163.com
</div>
</body>
</html>