`

jQuery offset方法结合easyui-menu进行使用

 
阅读更多
在jQuery中有两个获取元素位置的方法offset()和position()

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()
});






分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    jquery-easyui-EDT-1.5.2-build1

    jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1

    jquery-easyui-1.2.2 jquery-easyui-1.2.2

    jquery-easyui-1.2.2jquery-easyui-1.2.2jquery-easyui-1.2.2

    jquery-easyui-EDT-1.4-build1-附带各种主题

    在这款名为 "jquery-easyui-EDT-1.4-build1-附带各种主题" 的压缩包中,我们不仅获得了 jQuery EasyUI 的核心库,还得到了一套丰富多样的主题资源,这将为我们的网页设计带来极大的灵活性和视觉吸引力。 1. **...

    easyui-textbox和easyui-combobox的onchange事件响应实例

    在前端开发中,EasyUI 是一个基于 ...通过学习和理解这个实例,开发者可以更好地掌握 EasyUI 中的 `easyui-textbox` 和 `easyui-combobox` 的使用,以及如何处理 `onchange` 事件,从而提升项目开发的效率和质量。

    jquery-easyui-EDT-1.5.5.rar

    而“jquery-easyui-EDT-1.5.5.rar”则是一个包含jQuery EasyUI扩展、PC及移动设备演示以及插件的压缩包,旨在为开发者提供全方位的开发支持。 首先,我们要理解jQuery EasyUI的核心概念。EasyUI是由一系列预先定义...

    jQuery EasyUI jquery-easyui-1.5.5.6

    这个压缩包“jquery-easyui-1.5.5.6”包含了该框架的1.5.5.5版本,这是一份重要的更新,可能包含了一些性能优化和新功能。 在该压缩包中,有几个关键文件和目录: 1. `jquery.easyui.min.js`:这是jQuery EasyUI的...

    jquery-easyui-EDT-1.4.2-中文文档

    在 `jquery-easyui-EDT-1.4.2-中文文档` 中,我们主要会探讨以下几个关键知识点: 1. **EasyUI 组件**:EasyUI 提供了多种组件,如对话框(Dialog)、表单(Form)、表格(Grid)、菜单(Menu)、树形控件(Tree)...

    jquery-easyui-themes.rar_easyui 主题_easyui主题_html_jquery_jquery-e

    《jQuery EasyUI 主题详解与应用》 jQuery EasyUI 是一款基于 jQuery 的前端...通过对"jquery-easyui-themes.rar"中的主题资源进行灵活运用,开发者可以打造出具有独特风格的Web应用,提升产品的吸引力和用户体验。

    jquery-easyui-1.3.3

    总结来说,jQuery EasyUI 1.3.3 是一款强大且易于使用的前端框架,它的组件丰富、功能全面,为Web开发提供了极大的便利。无论是新手还是经验丰富的开发者,都能从中受益,快速构建出功能强大、界面美观的Web应用。

    很好用的jquery-easyui-EDT-1.4.5-build1

    这个“jquery-easyui-EDT-1.4.5-build1”版本是EasyUI的一个特定构建,被广泛认为是好用的版本。本文将详细介绍这个框架以及其组件,帮助读者深入理解其功能和应用。 一、jQuery EasyUI概述 jQuery EasyUI 是一套...

    jquery-easyui-1.7.0.zip官方文档

    它详尽地介绍了各个组件的使用方法、属性、事件和方法,帮助开发者快速上手并深入理解。此外,文档中还包含了示例代码,通过实际操作加深理解。 四、演示Demo的价值 1. 学习参考:Demo提供了直观的实例,展示了...

    jquery-easyui-EDT-1.4-build1.rar

    在"jquery-easyui-EDT-1.4-build1.rar"这个压缩包中,包含了对开发者极有帮助的资源,包括CHM格式的API文档和相关的接口HTML演示文件,这将为我们深入学习和应用jQuery EasyUI提供强有力的支持。 首先,CHM格式的...

    jquery-easyui-1.3.5

    在实际使用`jquery-easyui-1.3.5`时,开发者通常会结合HTML模板、CSS样式和JavaScript脚本来创建页面。HTML用于结构,CSS用于样式,而JavaScript则负责交互逻辑。EasyUI的组件大多数可以通过添加特定的类名和属性来...

    jquery-easyui-1.2.6

    jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI...jQuery-Easyui-1.2.6中含有jQuery库、easyui库、demo实例和jquery_easyui_中文帮助文档等。

    jquery-easyui-EDT-1.4.2-build1.rar 包含中文文档

    jQuery EasyUI 官方API文档中文版 version 1.4.2 Build 1 作者:王锦阳 CSDN账号:richie696 EasyUI专题 http://download.csdn.net/album/detail/343 文档 EasyUI每个组件的属性,方法和事件。用户可以很容易地扩展...

    jquery-easyui-1.5.5.zip

    easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。 easyui...

    Jquery-Easyui-1.2.3

    在描述中提到的“Jquery-Easyui-1.2.3以及帮助文档”,这表明除了框架本身,还提供了一份详尽的帮助文档,帮助开发者理解和使用这个版本的功能。这份文档通常会包含API参考、示例代码、常见问题解答等内容,对于初学...

    jquery-easyui-1.0.5的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后台模板.zip

    jquery-easyui-1.5.5

    该资源为jquery-easyui-1.5.5版本,包含easyui插件所依赖的js和css

Global site tag (gtag.js) - Google Analytics