仿windows浮动窗口

<html>
<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\"" + " ondblclick=\"document.getElementById('" + this.id + "').quote.changeStatus('" + this.id + "')\"><img src=\"" + this.icon + "\" class=\"win_icon\"  alt="" /><span class=\"win_title\">" + this.title + "</span><div class=\"win_button_div\">"+(this.minButton ? "<input class=\"win_min\" type=\"button\" title=\"最小化\" onclick=\"document.getElementById('" + this.id + "').quote.min();\" />":"")+(this.maxButton ? "<input class=\"win_max\" id=\"" + this.id + "_maxbutton\" type=\"button\" onmouseover=\"this.title=(document.getElementById('" + this.id + "').quote.status=='MAX')?'还原':'最大化'\" onclick=\"this.blur();document.getElementById('" + this.id + "').quote.changeStatus();\" />":"")+(this.closeButton ? "<input class=\"win_close\" type=\"button\" title=\"关闭\" onclick=\"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\"  alt="" /><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>
[提示：你可先修改部分代码，再按运行]

---------------------------------------------------------------------------------------------------------------------------------
说人之短，乃护己之短。夸己之长，乃忌人之长。皆由存心不厚，识量太狭耳。能去此弊，可以进德，可以远怨。
http://www.blogjava.net/szhswl
------------------------------------------------------------------------------------------------------ ----------------- ---------
posted on 2007-12-09 12:49 宋针还阅读(1083) 评论(0) 编辑收藏所属分类: JAVASCRIPT
留言簿(6)

我参与的团队

随笔档案(8)

文章分类(149)

新闻分类(1)

相册

收藏夹(21)

友情链接

我的链接

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理
相关文章: JS屏蔽功能类 javascript table delete row javascript insert table row JQuery技巧总结(转载) JS实现table里单元格排序模拟QQ菜单效果 js触发弹出层 javascript框架编程仿MSN效果 FOCUS效果输入框