仿真windows?

<!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:"&nbsp;";//标题,默认为空
    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 &copy;2007 <br />Email:brull@163.com
</div>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值