21-6.htc

JAVASCRIPT完全自学手册,中源码的验证修订实例

<public:component>
<public:method name="openSub" />
<public:method name="closeSub" />
<public:method name="doOut" />

<public:property name="enabled"/>
<public:attach event="onmouseover" onevent="doOver()" />
<public:attach event="onmousedown" onevent="doDown()" />
<public:attach event="onmousedown" onevent="doUp()" />
<public:attach event="onmouseup" onevent="doOver()" />
<public:attach event="onmouseout" onevent="doOut()" />
<public:attach event="oncontextmenu" onevent="doNothing()" />
<public:attach event="onselectstart" onevent="doNothing()" />
<public:attach event="ondrag" onevent="doNothing()" />
<public:attach event="oncontentready" onevent="doInit()" />
</public:component>
<script>
menuNormalStyle="\
    border: #eef 1px outset;\
    background-Color: #ddddf6;\
    cursor: pointer;\
    padding-left: 4px;\
";
menuOverStyle="\
    border: #eef 1px outset;\
    background-Color: #ccccee;\
    Color: #f66;\
    cursor: pointer;\
    padding-left: 4px;\
";
menuDownStyle="\
    border: #eef 1px outset;\
    background-Color: #ccccee;\
    cursor: pointer;\
    padding-left: 4px;\
";
function doInit(){
    element.isMenuItem=true;
    if(element.children.length==0){
        element.hasSubmenu=false;
    }else{
        element.submenu=document.createElement("DIV");
        tempStr="";
        for(var i=1;i<element.children.length;i++){
            try{
                tempStr+=element.children[i].outerHTML;
            }catch(e){}
        }
        element.submenu.innerHTML=tempStr;
        element.innerHTML=element.children[0].innerHTML;
        element.insertAdjacentElement("AfterEnd",element.submenu);
        element.submenu.style.display="none";
        element.submenu.parentMenu=element;
        element.submenu.onmouseout=function(){
            try{
                if(event.toElement.parentNode!=this&&event.toElement.parentNode.parentMenu!=event.srcElement&&event.toElement.parentNode!=event.srcElement.parentNode){
                    this.parentMenu.doOut();
                }
            }catch(e){}
        }
    }
    element.style.cssText=menuNormalStyle;
    element.closeSub();
}
function doOver(){
    element.style.cssText=menuOverStyle;
    element.openSub();
}
function doOut(){
    try{
        if(event.toElement.parentNode.parentMenu==element){return(false);}
    }catch(e){}
    element.style.cssText=menuNormalStyle;
    element.closeSub();
}

function doDown(){ element.style.cssText=menuDownStyle; }

function doUp(){ element.style.cssText=menuOverStyle; }

function doNothing(){ return(false); }

function openSub(){
    try{
        element.submenu.style.display="";
        element.submenu.style.position="absolute";
        if(element.parentNode.parentMenu){
            element.submenu.style.left=element.offsetLeft+element.offsetWidth;
            element.submenu.style.top=element.offsetTop;
        }else{
            element.submenu.style.left=element.offsetLeft;
            element.submenu.style.top=element.offsetTop+element.offsetHeight;
        }
    }catch(e){}
}

function closeSub(){
    try{ element.submenu.style.display="none"; }catch(e){}
}
</script>