javascript与jQuery设置取得div绝对位置一个小应用(像日历控件一样，在编辑框下面显示一个层)

今天的一个小应用，需要像日历控件的效果那样，显示对省份的选择。

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head >
     < title > javascript与jQuery设置取得div绝对位置一个小应用(像日历控件一样，在编辑框下面显示一个层) </ title >
     < script  type ="text/javascript"  src ="jquery-1.3.2.min.js" ></ script >
     < script  type ="text/javascript" >
         // 全局变量，获得焦点的ID
         var  onFocusID  =   "" ;
         // 取得绝对位置
         function  absPos(node){
             var  x = y = 0 ;
             do {
                x += node.offsetLeft;
                y += node.offsetTop;
            } while (node = node.offsetParent);   
             return {   
                 ' x ' :x,   
                 ' y ' :y   
            };         
        }
         // 显示省份
         function  showProvince(obj){
             // javascript的方法
             // jQuery("#divProvince").css("left",absPos(obj).x);
             // jQuery("#divProvince").css("top",absPos(obj).y + jQuery(obj).outerHeight());
            
             // jQuery的方法
            jQuery( " #divProvince " ).css( " left " ,jQuery(obj).offset().left);
            jQuery( " #divProvince " ).css( " top " ,jQuery(obj).offset().top  +  jQuery(obj).outerHeight());
            
            jQuery( " #divProvince " ).show();
            
            onFocusID  =  obj.id;
        }
         // 隐藏省份
         function  hideProvince(){
            jQuery( " #divProvince " ).hide();
        }
         //
        $( function (){
            $( " #divProvince input " ).each( function (){
                $( this ).click( function (){
                     // this.checked="checked";
                     // alert(jQuery(this).attr("value"));
                     if (onFocusID  !=   "" ){
                        $( " # " + onFocusID).val($( this ).val());
                    }
                    $( " #divProvince " ).hide();
                });
            });
        });
     </ script >
</ head >
< body >
     < table >
         < tr >
             < td > 省份 </ td >
             < td >< input  id ="txtOne"  type ="text"  onfocus ="showProvince(this);"   /></ td >
         </ tr >
         < tr >
             < td > 省份 </ td >
             < td >< input  id ="txtTwo"  type ="text"  onfocus ="showProvince(this);"   /></ td >
         </ tr >
     </ table >
     < div  id ="divProvince"  style ="display:none; position:absolute;width:260px;background-color:#BFEBEE; border:1px solid #BEC0BF;padding:5px;font-size:12px;" >
         < input  id ="Radio1"  type ="radio"  value ="北京"   /> 北京
         < input  id ="Radio2"  type ="radio"  value ="上海"   /> 上海
         < input  id ="Radio3"  type ="radio"  value ="天津"   /> 天津
         < input  id ="Radio4"  type ="radio"  value ="重庆"   /> 重庆
         < input  id ="Radio5"  type ="radio"  value ="安徽"   /> 安徽
         < input  id ="Radio6"  type ="radio"  value ="福建"   /> 福建
         < input  id ="Radio7"  type ="radio"  value ="甘肃"   /> 甘肃
         < input  id ="Radio8"  type ="radio"  value ="广东"   /> 广东
         < input  id ="Radio9"  type ="radio"  value ="广西"   /> 广西
         < input  id ="Radio10"  type ="radio"  value ="贵州"   /> 贵州
         < input  id ="Radio11"  type ="radio"  value ="海南"   /> 海南
         < input  id ="Radio12"  type ="radio"  value ="河北"   /> 河北
         < input  id ="Radio13"  type ="radio"  value ="河南"   /> 河南
         < input  id ="Radio14"  type ="radio"  value ="黑龙江"   /> 黑龙江
         < input  id ="Radio15"  type ="radio"  value ="湖北"   /> 湖北
         < input  id ="Radio16"  type ="radio"  value ="湖南"   /> 湖南
         < input  id ="Radio17"  type ="radio"  value ="吉林"   /> 吉林
         < input  id ="Radio18"  type ="radio"  value ="江苏"   /> 江苏
         < input  id ="Radio19"  type ="radio"  value ="江西"   /> 江西
         < input  id ="Radio20"  type ="radio"  value ="辽宁"   /> 辽宁
         < input  id ="Radio21"  type ="radio"  value ="内蒙古"   /> 内蒙古
         < input  id ="Radio22"  type ="radio"  value ="宁夏"   /> 宁夏
         < input  id ="Radio23"  type ="radio"  value ="青海"   /> 青海
         < input  id ="Radio24"  type ="radio"  value ="山东"   /> 山东
         < input  id ="Radio25"  type ="radio"  value ="山西"   /> 山西
         < input  id ="Radio26"  type ="radio"  value ="陕西"   /> 陕西
         < input  id ="Radio27"  type ="radio"  value ="四川"   /> 四川
         < input  id ="Radio28"  type ="radio"  value ="西藏"   /> 西藏
         < input  id ="Radio29"  type ="radio"  value ="新.疆"   /> 新.疆
         < input  id ="Radio30"  type ="radio"  value ="云南"   /> 云南
         < input  id ="Radio31"  type ="radio"  value ="浙江"   /> 浙江
         < input  id ="Radio32"  type ="radio"  value ="香港"   /> 香港
         < input  id ="Radio33"  type ="radio"  value ="澳门"   /> 澳门
         < input  id ="Radio34"  type ="radio"  value ="台湾"   /> 台湾
        　　 < span  style ="cursor:pointer;color:red;"  onclick ="hideProvince();" > 取消 </ span >
     </ div >
</ body >
</ html >