首頁新隨筆新文章聯系
2025年5月
日
一
二
三
四
五
六
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
blog是收集資料并且作為技術交流的平臺，發布一些本人常用資料或開發經驗，希望能和大家一起討論、進步。
訪問統計
留言簿(6)

我參與的團隊

牛虻(0/0)
隨筆檔案(8)

文章分類(149)

新聞分類(1)

鐵血軍事(1)
相冊

收藏夾(21)

友情鏈接

lpj的博客
三生石的博客
中文愛百科
莊陸的博客
狼的博客
我的鏈接

搜索

積分與排名

積分 - 150500
排名 - 413
閱讀排行榜

評論排行榜

仿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   id="wmqeeuq"   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 id="wmqeeuq"    class=\"win_title\">" + this.title + "</span><div   id="wmqeeuq"   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   id="wmqeeuq"   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 id="wmqeeuq"    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.aygfsteel.com/szhswl
------------------------------------------------------------------------------------------------------ ----------------- ---------
posted on 2007-12-09 12:49 宋針還閱讀(1102) 評論(0) 編輯收藏所屬分類: JAVASCRIPT
新用戶注冊刷新評論列表

只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: JS屏蔽功能類 javascript table delete row javascript insert table row JQuery技巧總結(轉載) JS實現table里單元格排序模擬QQ菜單效果 js觸發彈出層 javascript框架編程仿MSN效果 FOCUS效果輸入框