程序博客网 > js孩子节点取法

JavaScript和jQuery获取inpu…

来源：互联网 发布：js孩子节点取法 编辑：程序博客网 时间：2024/05/20 06:25
原文地址：JavaScript和jQuery获取input框的绝对位置作者：于士博

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//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:1pxsolid #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>

 

--------------------------------------------------------------------------------------------------

http://shihuan830619.iteye.com/blog/1100544    (我JavaEye的博客)

阅读全文
0 0
js孩子节点取法 js孩子节点取法
原创粉丝点击
热门IT博客
java二次开发招聘java二次开发招聘
js将数组转换成字符串js将数组转换成字符串
linux twisted 安装
淘宝app广告位价格表
ican3是什么软件
mysql数据库备份策略
cpda数据分析师 假
51单片机最小系统原理
怎么用手机查淘宝押金
手机淘宝网官网登录
淘宝店铺图片大全
网络红歌2017火爆歌曲
mac 没法多选
学意大利语的软件
ui需要哪些软件
网上拍卖二手车软件
企业网站界面优化
怎么限制电脑软件联网
网络运营商远端无反应
英雄杀今天探宝数据
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 古代写信格式 英文写信格式范文 古人写信的格式 写信作文格式 给单位写信的格式 英语写信作文格式 写信的格式作文 女朋友过生日写信 怎么样给老公写信 高考英语作文写信 用英语给朋友写信 如何给审稿人写信 二年级给给爸爸写信作文大全 英语作文给朋友写信 受访学生家庭基本情况怎么写 受法律保护的借条怎么写 当前受教育阶段怎么写 借条怎样写才受法律保护 正规欠条怎么写受法律保护 买车协议书怎样写受法律保护 写字拼音 写字的拼音 大写字 一的大写字 一大写字 写字笔顺 写字姿势 写字板作品 写字台 写字的笔顺 写字好看 写字板 左手写字 写字笔画 写字图片 写字间 小学生写字 写字软件 儿童写字 写字的技巧 怎么写字快

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里