web 應用 日曆 tips

日曆   http://blog.csdn.net/cityhunter172/archive/2009/03/04/3957836.aspx

 

提示菜單位置  

WebCalendar.js

---

var menuTimer =null;
function showmenu(obj1,obj2,state,location){
    var btn=document.getElementById(obj1);
    var obj=document.getElementById(obj2);
    var h=btn.offsetHeight;
    var w=btn.offsetWidth;
    var x=btn.offsetLeft;
    var y=btn.offsetTop;
   
    obj.onmouseover =function(){
        showmenu(obj1,obj2,'show',location);
    }
    obj.onmouseout =function(){
        showmenu(obj1,obj2,'hide',location);
    }
   
    while(btn=btn.offsetParent){y+=btn.offsetTop;x+=btn.offsetLeft;}
   
    var hh=obj.offsetHeight;
    var ww=obj.offsetWidth;
    var xx=obj.offsetLeft;//style.left;
    var yy=obj.offsetTop;//style.top;
    var obj2state=state.toLowerCase();
    var obj2location=location.toLowerCase();
   
    var showx,showy;

    if(obj2location=="left" || obj2location=="l" || obj2location=="top" || obj2location=="t" || obj2location=="u" || obj2location=="b" || obj2location=="r" || obj2location=="up" || obj2location=="right" || obj2location=="bottom"){
        if(obj2location=="left" || obj2location=="l"){showx=x-ww;showy=y;}
        if(obj2location=="top" || obj2location=="t" || obj2location=="u"){showx=x;showy=y-hh;}
        if(obj2location=="right" || obj2location=="r"){showx=x+w;showy=y;}
        if(obj2location=="bottom" || obj2location=="b"){showx=x;showy=y+h;}
    }else{
        showx=xx;showy=yy;
    }
    obj.style.left=showx+"px";
    obj.style.top=showy+"px";
    if(state =="hide"){
        menuTimer =setTimeout("hiddenmenu('"+ obj2 +"')", 500);
    }else{
        clearTimeout(menuTimer);
        obj.style.visibility ="visible";
    }
}
function hiddenmenu(psObjId){
    document.getElementById(psObjId).style.visibility ="hidden";
}

---

實例html

 

<a href="" id="m1" onMouseOver="showmenu('m1','mdiv','show','right')" onMouseOut="showmenu('m1','mdiv','hide','right')" style="cursor: pointer;">鼠標移到這裏來看看</a>

  <div id="mdiv">菜單內容。。。</div>

---