- 浏览: 593886 次
- 性别:
- 来自: 厦门
文章分类
- 全部博客 (669)
- oracle (36)
- java (98)
- spring (48)
- UML (2)
- hibernate (10)
- tomcat (7)
- 高性能 (11)
- mysql (25)
- sql (19)
- web (42)
- 数据库设计 (4)
- Nio (6)
- Netty (8)
- Excel (3)
- File (4)
- AOP (1)
- Jetty (1)
- Log4J (4)
- 链表 (1)
- Spring Junit4 (3)
- Autowired Resource (0)
- Jackson (1)
- Javascript (58)
- Spring Cache (2)
- Spring - CXF (2)
- Spring Inject (2)
- 汉字拼音 (3)
- 代理模式 (3)
- Spring事务 (4)
- ActiveMQ (6)
- XML (3)
- Cglib (2)
- Activiti (15)
- 附件问题 (1)
- javaMail (1)
- Thread (19)
- 算法 (6)
- 正则表达式 (3)
- 国际化 (2)
- Json (3)
- EJB (3)
- Struts2 (1)
- Maven (7)
- Mybatis (7)
- Redis (8)
- DWR (1)
- Lucene (2)
- Linux (73)
- 杂谈 (2)
- CSS (13)
- Linux服务篇 (3)
- Kettle (9)
- android (81)
- protocol (2)
- EasyUI (6)
- nginx (2)
- zookeeper (6)
- Hadoop (41)
- cache (7)
- shiro (3)
- HBase (12)
- Hive (8)
- Spark (15)
- Scala (16)
- YARN (3)
- Kafka (5)
- Sqoop (2)
- Pig (3)
- Vue (6)
- sprint boot (19)
- dubbo (2)
- mongodb (2)
最新评论
在jQuery中有两个获取元素位置的方法offset()和position()
position()方法是在1.2.6版本之后加入的,为什么要引 入这个方法呢?这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢?
先看看API对这这两个方法的定义:
offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
position():
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
offset() 方法设置或返回被选元素相对于文档的偏移坐标。
当用于返回偏移时:
该方法返回第一个匹配元素的偏移坐标。它返回一个带有两个属性(以像素为单位的 top 和 left 位置)的对象。
当用于设置偏移时:
该方法设置所有匹配元素的偏移坐标。
position()方法是在1.2.6版本之后加入的,为什么要引 入这个方法呢?这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢?
先看看API对这这两个方法的定义:
offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
position():
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
$("button").click(function(){ var x=$("p").offset(); alert("Top: " + x.top + " Left: " + x.left); });
offset() 方法设置或返回被选元素相对于文档的偏移坐标。
当用于返回偏移时:
该方法返回第一个匹配元素的偏移坐标。它返回一个带有两个属性(以像素为单位的 top 和 left 位置)的对象。
当用于设置偏移时:
该方法设置所有匹配元素的偏移坐标。
<div id="mm" class="easyui-menu" style="width:120px;"> <div>New</div> <div> <span>Open</span> <div style="width:150px;"> <div><b>Word</b></div> <div>Excel</div> <div>PowerPoint</div> </div> </div> <div iconCls="icon-save">Save</div> <div class="menu-sep"></div> <div>Exit</div> </div>
// 必须加 创建菜单 $("#mm").menu(); //显示菜单 $("#mm").menu('show',{ left:$(this).offset().left, top:$(this).offset().top+$(this).height() });
发表评论
文章已被作者锁定,不允许评论。
-
Vue 组件相关知识学习
2018-04-13 15:27 384Vue.js 组件 // 组件(Component)是 ... -
Vue 实例属性($option $el等)
2018-04-12 09:14 3234属性: vm.$el:获取Vue实例关联的DOM元素 vm ... -
Vue methods中方法之间的调用
2018-04-12 09:04 1728delAllOrderList:function(good ... -
Vue 计算属性(computed)学习
2018-04-11 15:55 9541.基础例子: <div id = "exam ... -
Vue 过滤器(|)学习
2018-04-11 14:30 731一、Vue提供的过滤器 vue本身提供了很多便利的过滤器,这里 ... -
Vue 所有指令(v-on:click = @click v-blind:class = :class)的学习
2018-04-11 09:38 1391先说一下指令里面的值都是表达式 new Vue({ ... -
js 动态Post请求防止在输入栏中显示参数
2018-01-08 10:21 623动态进行Post请求 var f=document.cre ... -
js autocomplete实现下拉模糊查询
2018-01-04 10:48 10991.js编写 // 获得焦点是重新进行查询 $(&quo ... -
js 遍历并且赋值
2017-12-19 13:46 631$("#productInfo").f ... -
js 鼠标移过去渐变的效果(页面固定 定位栏)
2017-10-31 11:29 6251.html代码 <div id="loc ... -
js 判断图片是否存在
2017-10-27 08:56 872当图片不存在时,将触发onerror,onerror 中img ... -
js 在页面中跳转到指定位置
2017-10-24 15:29 13361.页面中代码 <div style="lef ... -
Javascript 总结汇总
2016-11-04 15:06 341var timeoutid = window.setTimeo ... -
js easyui tree判断是否父节点
2016-09-08 10:17 797function isIncludeParentNode( ... -
CSS 点击div的同时显示或隐藏的div
2016-08-16 17:18 613<div id="up"> ... -
js 通过调用方法终止js代码继续执行的问题(采用throw解决)
2016-07-12 14:15 482一个方法如何终止另一个方法执行的问题 function ... -
js lightbox展示图片的案例
2016-06-13 09:35 674如何使用 1、Lightbox v2.0 使用 Protot ... -
EasyUI Combobox获得焦点的使用方法
2016-06-01 09:20 1061$('#xxx').combobox({ data ... -
js 静态方法与实例方法
2016-05-31 14:26 1540静态方法是指不需要声明类的实例就可以使用的方法 实例方法是 ... -
js 动态显示时间(setTimeout)
2016-05-23 15:20 659// 全局变量 var timeoutId ; //开 ...
相关推荐
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
jquery-easyui-1.2.2jquery-easyui-1.2.2jquery-easyui-1.2.2
在这款名为 "jquery-easyui-EDT-1.4-build1-附带各种主题" 的压缩包中,我们不仅获得了 jQuery EasyUI 的核心库,还得到了一套丰富多样的主题资源,这将为我们的网页设计带来极大的灵活性和视觉吸引力。 1. **...
在前端开发中,EasyUI 是一个基于 ...通过学习和理解这个实例,开发者可以更好地掌握 EasyUI 中的 `easyui-textbox` 和 `easyui-combobox` 的使用,以及如何处理 `onchange` 事件,从而提升项目开发的效率和质量。
而“jquery-easyui-EDT-1.5.5.rar”则是一个包含jQuery EasyUI扩展、PC及移动设备演示以及插件的压缩包,旨在为开发者提供全方位的开发支持。 首先,我们要理解jQuery EasyUI的核心概念。EasyUI是由一系列预先定义...
这个压缩包“jquery-easyui-1.5.5.6”包含了该框架的1.5.5.5版本,这是一份重要的更新,可能包含了一些性能优化和新功能。 在该压缩包中,有几个关键文件和目录: 1. `jquery.easyui.min.js`:这是jQuery EasyUI的...
在 `jquery-easyui-EDT-1.4.2-中文文档` 中,我们主要会探讨以下几个关键知识点: 1. **EasyUI 组件**:EasyUI 提供了多种组件,如对话框(Dialog)、表单(Form)、表格(Grid)、菜单(Menu)、树形控件(Tree)...
《jQuery EasyUI 主题详解与应用》 jQuery EasyUI 是一款基于 jQuery 的前端...通过对"jquery-easyui-themes.rar"中的主题资源进行灵活运用,开发者可以打造出具有独特风格的Web应用,提升产品的吸引力和用户体验。
这个“jquery-easyui-EDT-1.4.5-build1”版本是EasyUI的一个特定构建,被广泛认为是好用的版本。本文将详细介绍这个框架以及其组件,帮助读者深入理解其功能和应用。 一、jQuery EasyUI概述 jQuery EasyUI 是一套...
它详尽地介绍了各个组件的使用方法、属性、事件和方法,帮助开发者快速上手并深入理解。此外,文档中还包含了示例代码,通过实际操作加深理解。 四、演示Demo的价值 1. 学习参考:Demo提供了直观的实例,展示了...
在"jquery-easyui-EDT-1.4-build1.rar"这个压缩包中,包含了对开发者极有帮助的资源,包括CHM格式的API文档和相关的接口HTML演示文件,这将为我们深入学习和应用jQuery EasyUI提供强有力的支持。 首先,CHM格式的...
在实际使用`jquery-easyui-1.3.5`时,开发者通常会结合HTML模板、CSS样式和JavaScript脚本来创建页面。HTML用于结构,CSS用于样式,而JavaScript则负责交互逻辑。EasyUI的组件大多数可以通过添加特定的类名和属性来...
jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI...jQuery-Easyui-1.2.6中含有jQuery库、easyui库、demo实例和jquery_easyui_中文帮助文档等。
jQuery EasyUI 官方API文档中文版 version 1.4.2 Build 1 作者:王锦阳 CSDN账号:richie696 EasyUI专题 http://download.csdn.net/album/detail/343 文档 EasyUI每个组件的属性,方法和事件。用户可以很容易地扩展...
easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。 easyui...
在描述中提到的“Jquery-Easyui-1.2.3以及帮助文档”,这表明除了框架本身,还提供了一份详尽的帮助文档,帮助开发者理解和使用这个版本的功能。这份文档通常会包含API参考、示例代码、常见问题解答等内容,对于初学...
jquery-easyui-1.0.5API 使用说明文档 jquery_easyui_manual_cnjquery-easyui-1.0.5API 使用说明文档 jquery_easyui_manual_cnjquery-easyui-1.0.5API 使用说明文档 jquery_easyui_manual_cn
jquery-easyui-1.5后台模板.zip jquery-easyui-1.5后台模板.zip jquery-easyui-1.5后台模板.zip jquery-easyui-1.5后台模板.zip
该资源为jquery-easyui-1.5.5版本,包含easyui插件所依赖的js和css
jquery-easyui-themes,easyui主题包,包含metro-blue metro-gray metro-green metro-orange metro-red ui-cupertino ui-dark-hive ui-pepper-grinder ui-sunny这些主题,具体的php使用方式见:...