jquery获取点击控件的绝对位置简单实例
在使用jquery的过程中,想取得当前点击input的绝对位置而去显示一个div,jquery本身提供offset和position这个两个方法,但position官方解释是relative to the offset parent,可以看到是针对父结点的,而offset官方解释relative to the document,貌似使用offset可以直接绝对定位。但是在网页中如果出现嵌套div的情况,top和left会叠加,因此这个时候如果要定位显示一个新的div就要把父亲结点的offset去掉,jquery提供了offsetParent这个方法。
因此,如下代码可以在点击一个控件后,在其下方显示一个绝对定位的div。
$('#id').click(function(event){ var curleft = $(event.target).offset().left; var curtop = $(event.target).offset().top+$(event.target).outerHeight(); var obj = $(event.target); obj = obj.offsetParent(); //获取控件绝对位置 while(obj.attr('tagName').toLowerCase() != 'body'){ curleft =curleft- obj.offset().left; curtop =curtop- obj.offset().top; obj = obj.offsetParent(); } $('#div').css('top',curtop+'px').css('left',curleft+'px'); });jquery获取点击控件的绝对位置简单实例的更多相关文章
- getHitRect获取点击控件的位置
public void getHitRect(Rect outRect) Added in API level 1 Hit rectangle in parent ...
- Jquery获取EasyUI时间控件的值
jquery easyui日期控件中,在页面里用JS拿到设置的日期值的方法 jquery easyui 日期框 有这样的一个日期文本框: <input type=" value=&qu ...
- (网页)jQuery的时间datetime控件在AngularJs中使用实例
百度一下,自己也想了一下,有一种简单,无脑的方式分享给你: <input ng-model="start" id="start" placeholder= ...
- jquery的智能提示控件
福利到~分享一个基于jquery的智能提示控件intellSeach.js 一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管 ...
- jquery的上传控件uploadly,每行都有一个这样的控件对id选择器的使用
1.先看看预览图 这个是我的页面,其中如果我没点击添加一行的时候,会把本来有的数据进行循环出来,这个时候每个记录都必须有个上传图片的按钮,但是jquery的uploadly这个控件只是锁定id的,至少 ...
- Jquery和一些Html控件
1.1 Jquery中如何获取各种Html控件的值 1.$("#ID").val(); 2.Check获取选中的值:$("#ID").is(&quo ...
- Jquery获对HTML控件的控制
Jquery获对HTML控件的控制 1.获取控件的值 1.1.radio 1.1.1 获取一组radio被选中项的值 var item = $('input[name=items][checked] ...
- jquery 操作服务端控件,select 控件
<asp:DropDownList ID="ddl" runat="server"></asp:DropDownList> <se ...
- 获取屏幕上的某个控件相对位置,尤其是tableviewcell上的某一个控件的相对位置
我的需求就是tableviewcell上的按钮,点击就会出现一个弹框: 主要就是获取,所点击的cell上控件的相对位置: CGPoint buttonCenter = CGPointMake(btn. ...
随机推荐
- MD5加密 时间差 流水号等方法
/// <summary> /// 使用TimeSpan计算两个时间差 /// </summary> /// <param name="DateTime1&qu ...
- python(34):为什么在Python里推荐使用多进程而不是多线程?
最近在看Python的多线程,经常我们会听到老手说:“Python下多线程是鸡肋,推荐使用多进程!”,但是为什么这么说呢? 要知其然,更要知其所以然.所以有了下面的深 ...
- 【NOI】9272 偶数个三
题目 链接:bajdcc/ACM 描述 在所有的N位数中,有多少个数中有偶数个数字3?结果模12345.(1<=N<=10000) 样例输入 2 样例输出 73 方法一:穷举 评价:最简单 ...
- 说说http协议中的编码和解码
http://www.csdn1 2 3.com/html/itweb/20130730/29422_29378_29408.htm ****************************** 一. ...
- Shell执行将脚本里的变量打印到指定日志文件
首先需要定位获取任务的运行日志或者报错信息,才能定位问题. 通过shell调用有些脚本的话,日志信息会打印在shell里.不过也有用户在shell里调用正常,但是到crontab调用的时候就出错并且没 ...
- JS parseInt 中08.09 被按照0处理(转)
<script type="text/javascript"> var aa=["01","02","03" ...
- jsonp爬取页面
jsonp Connection conn = Jsoup.connect("http://ip.taobao.com/service/getIpInfo.php?ip=" + i ...
- html静态页面调用php文件
如在页面a.html中用下面这句调用,可以将action=test的参数传递到b.php. Javascript代码 <script type="text/javascript&quo ...
- PixelMatorPro快捷键大全(osx)
Keyboard Shortcuts Navigate an image Zoom in Command-Plus (+) Zoom out Command-Minus (-) Zoom to f ...
- 写给测试人员:不是所有的bug都需要修复
用户往往对产品中各种各样的bug抱怨不已,而测试人员往往认为自己的职责就是揪出这些所有的bug并把它们全都修复.然而,这是一个误区.微软卓越测试工程总监Alan Page近日撰文,再次解释了有哪些bu ...