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. ...
随机推荐
- 前端 JS,localStorage/sessionStorage、cookie 及 url 等实现前台数据共享、传输
需求是这样的:需要统计用户公司某款产品用户的回馈情况,美工给的设计多个psd,每个页面里面都有一个选择题,让用户选择自己的答案,最后经过几次选择之后在最后一个页面统一提交到后台!所以这里引出的技术需求 ...
- mysqldump 报导常
Warning: A partial dump from a server that has GTIDs will by default include the GTIDs of all transa ...
- Java NIO- Selector 使用示例
Selector selector = Selector.open(); channel.configureBlocking(false); SelectionKey key = channel.re ...
- python(31) enumerate 的用法
例子一: b = "abcd" kv_dict = {} pre = 1234 for i, v in enumerate(b): kv_dict['%s-%d.jpg' %(pr ...
- ORACLE 仿照原表建表语法
用于: 1.修改表前,可用于对原表表结构或表数据的备份 2.仿照原表的表结构建立一张新表 CREATE TABLE T_XXXX_BAK_130810 AS SELECT * FROM T_XXXX ...
- 如何让 Qt 的程序使用 Sleep
Qt 为何没有提供 Sleep 论坛上不时见到有人问: Qt 为什么没有提供跨平台的 sleep 函数? 使用平台相关的 Sleep 或 nanosleep 以后,界面为什么没有反应? QThread ...
- .net core相关博客
http://www.cnblogs.com/artech/蒋金楠,网名Artech,知名IT博主, 微软多领域MVP,畅销IT图书作者,著<WCF全面解析>.<ASP.NET MV ...
- tomcat8源码分析-Connector初始化
谈起Tomcat的诞生,最早可以追溯到1995年.近20年来,Tomcat始终是使用最广泛的Web服务器,由于其使用Java语言开发,所以广为Java程序员所熟悉.很多人早期的J2EE项目,由程序员自 ...
- javascript-删除节点
任务目的: 每点击一下按钮删除一个标签. 掌握到了: 这里是主要学习到了parentNote以及removeChild两个DOM属性. parentNote:parent英译为父亲,Note英译为节点 ...
- Head First 设计模式读书笔记(1)-策略模式
一.策略模式的定义 策略模式定义了算法族,分别封装起来,让它们之间可以互换替换,此模式让算法的变化独立使用算法的客户. 二.使用策略模式的一个例子 2.1引出问题 某公司做了一套模拟鸭子的游戏:该游戏 ...