zengdj

点滴经验，源自实践
博客园 首页 新随笔 联系 订阅 管理
IEWidgets学习笔记(1)

在浏览器里画Windows窗口  STRONG>

利用层叠样式单，HTC组件及Javascript脚本，在浏览器里画一个跟windows实际窗口十分相似的窗口，效果图如下：

Windows窗口 
                  

此功能由三个文件共同完成：CoolWindow.htm, CoolWindowEx.htc 和 IEWidgets.css.
一：CoolWindow.htm
<html>
<head>
<meta name="GENERATOR" content="Microsoft Visual Studio 6.0">
<meta HTTP-EQUIV="MSThemeCompatible" CONTENT="Yes">
<title>IEWidgets: CoolWindowEx Example</title>
<link rel="stylesheet" type="text/css" href="../stylesheets/IEWidgets.css">
<script id="windowFunctions" language="jscript" src="../../scripts/windowFunctions.js"></script>
<script language=javascript>
<!--
function sizeWindow()
{
        var el = window.document.all("myWindow")
        with(el)
        {
            top = 20
            left = 20
            height = window.document.body.offsetHeight - 40
            width = window.document.body.offsetWidth - 40
            src="about:This is a browser window!!!"
        }
}
//-->
</script>

</head>
<body style="background-color: appworkspace; border-top: 2px ridge buttonface; border-left: 2px ridge buttonface; border-bottom: 2px inset window; border-right: 2px inset window;" 
onload="JScript: sizeWindow();">
<div id="myWindow" class="coolWindowEx" windowState="NORMAL" windowType="NORMAL">
    <div class="windowCaption" id="capText">coolWindow</div><img class="captionImage" src="../images/link.gif" width="16" height="16">
    <span class="captionButton" id="btnMin"><img></span>
    <span class="captionButton" id="btnMax"><img></span>
    <span class="captionButton" id="btnClose"><img></span>
    <iframe class="windowContent" id="winContent"></iframe>
<div>
</body>
</html>
二：CoolWindowEx.htc
<PUBLIC:COMPONENT lightWeight = true>
<PUBLIC:DEFAULTS  contentEditable = false  tabStop = true/>

<PUBLIC:attach event="ondocumentready" onevent="initCoolWindowEx()" />
<PUBLIC:attach event="onpropertychange" onevent="coolWindowExPropertyChange()" />

<PUBLIC:PROPERTY NAME="left"        VALUE="0px"        />
<PUBLIC:PROPERTY NAME="top"            VALUE="0px"        />
<PUBLIC:PROPERTY NAME="height"        VALUE="200px"    />
<PUBLIC:PROPERTY NAME="width"        VALUE="250px"    />
<PUBLIC:property NAME="windowType"    VALUE="DIALOG" />
<PUBLIC:property NAME="windowState" VALUE="NORMAL" />
<PUBLIC:property NAME="menuState"    VALUE=false />
<PUBLIC:property NAME="src"            VALUE="" />
<PUBLIC:property NAME="windowCaption" VALUE="" />

<Script language="javascript">
var imgTransparent;
var imgRestore;
var imgMinimize;
var imgMaximize;
var imgClose;

var objWindowCaption;
var objCaptionImage;
var objMinButton;
var objMaxButton;
var objCloseButton;
var objCurrentButton;
var objContentWindow;
var objMenu;

function initCoolWindowEx()
{
    with(element.currentStyle)
    {
        imgTransparent = transparentImageUrl
        imgRestore = restoreImageUrl
        imgMinimize = minimizeImageUrl
        imgMaximize = maximizeImageUrl
        imgClose = closeImageUrl
    }

    for(var i=0;i<element.children.length;i++)
    {
        var childElement = element.children[i];
        switch(childElement.className)
        {
            case "captionImage":
                objCaptionImage = childElement;
                break;
            case "windowCaption":
                objWindowCaption = childElement;
                objWindowCaption.nowrap = true;
                break;
            case "captionButton":
            {
                if(childElement.id.indexOf("btnMin")>-1)
                {
                    objMinButton = childElement;
                    objMinButton.title = "Minimize";
                    objMinButton.children(0).setAttribute("src", imgMinimize);
                    if(windowType != "NORMAL") objMinButton.style.display = "none";
                }
                else if(childElement.id.indexOf("btnMax")>-1)
                {
                    objMaxButton = childElement;
                    objMaxButton.title = "Maximize";
                    objMaxButton.children(0).setAttribute("src", imgMaximize);
                    if(windowType != "NORMAL") objMaxButton.style.display = "none";
                }
                else if(childElement.id.indexOf("btnClose")>-1)
                {
                    objCloseButton = childElement;
                    objCloseButton.title = "Close";
                    objCloseButton.children(0).setAttribute("src", imgClose);
                }
            }
                break;
            case "windowContent":
                objContentWindow = childElement;
                break;
        }
    }
    
    with(objContentWindow)
    {
        attachEvent("onload", contentOnLoad);
        //attachEvent("oncontextmenu", coolWindowHandleDown);
    }
    objContentWindow.setAttribute("src", element.src);
}

function coolWindowExPropertyChange()
{
    switch(window.event.propertyName.toUpperCase())
    {
        case "WINDOWSTATE":
            break;
        case "SRC":
            break;
        case "LEFT":
        case "TOP":
        case "WIDTH":
        case "HEIGHT":
        {
            var capWidth, capHeight, capTop, btnWidth, btnHeight, imgHeight, l, t;
            with(element)
            {
                style.left = left;
                style.top = top;
                style.width = width;
                style.height = height;
            }
            with(objWindowCaption)
            {
                capWidth = offsetWidth;
                capHeight = offsetHeight;
                capTop = offsetTop;
            }
            
            with(objCloseButton)
            {
                btnWidth = offsetWidth;
                btnHeight = offsetHeight;
            }
            
            with(objCaptionImage)
            {
                imgHeight = objCaptionImage.offsetHeight;
                t = (capHeight / 2) - (imgHeight / 2) + capTop;
                style.top = Math.floor(t);
            }
            t = (capHeight / 2) - (btnHeight / 2) + capTop;
            with(objCloseButton)
            {
                style.top = t;
                style.left = capWidth - btnWidth + 1;
                l = offsetLeft - btnWidth - 2;
            }
            with(objMaxButton)
            {
                style.top = t;
                style.left = l;
            }
            with(objMinButton)
            {
                style.top = t;
                style.left = l - btnWidth;
            }
            with(objContentWindow)
            {
                style.width = capWidth;
                style.height = element.offsetHeight - capHeight - 10;
            }
        }
        break;
    }
}

function contentOnLoad()
{
    var strTitle;

    strTitle = window.event.srcElement.contentWindow.document.title;
    if(element.windowCaption!= "") strTitle = element.windowCaption;
    strTitle = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + strTitle;
    objWindowCaption.innerHTML = strTitle;
}
</Script>
</PUBLIC:COMPONET>

三：IEWidgets.css


body
{
    background-color: buttonface;
    scroll: no;
    margin: 0px;
    border: none;
    overflow: hidden;
}

.coolWindowEx
{
     behavior: url(../behaviors/coolWindowEx.htc);
    transparentImageUrl: ../behaviors/images/transparent.gif;
    restoreImageUrl: ../behaviors/images/restore.gif;
    minimizeImageUrl: ../behaviors/images/minimize.gif;
    maximizeImageUrl: ../behaviors/images/maximize.gif;
    closeImageUrl: ../behaviors/images/close.gif;
    position: absolute;
    border: outset 2px window;
    background-color: buttonface;
    overflow: hidden;
    cursor: default;
}

.coolWindowEx .windowCaption
{
    background-color: activecaption;
    padding-top: 2px;
    padding-bottom: 3px;
    padding-left: 4px;
    padding-right: 2px;
    margin: 2px;
    width: 100%;
    overflow: hidden;
    color: captiontext;
    font: caption;
    cursor: default;
    filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);
}

.coolWindowEx .captionButton
{
    position: absolute;
    top: 4px;
    border-left: 1px solid buttonhighlight;
    border-top: 1px solid buttonhighlight;
    border-bottom: 1px solid threeddarkshadow;
    border-right: 1px solid threeddarkshadow;
    background-color: buttonface;
    cursor: default;
}

.coolWindowEx .captionImage
{
    position: absolute;
    top: 3px;
    left: 3px;
    cursor: default;
}

.coolWindowEx .captionButton IMG
{
    border-bottom: 1px solid buttonshadow;
    border-right: 1px solid buttonshadow;
    cursor: default;
}

posted on 2005-07-12 15:55  DingJun  阅读(793)  评论(2)    收藏  举报