函数详解以及jQuery中position函数的应用
分类:计算机网络

position()函数用于重临当前相称成分相对于其被一定的上代成分的舞狮,也便是对峙于被定位的古人元素的坐标。该函数只对可知成分有效。

position()方法的定义和用法:

  • position()函数用于重返当前相称成分相对于其被固化的祖辈成分的偏移,也正是相持于被固定的祖宗成分的坐标。
  • 该函数只对可知成分有效。
  • 所谓"被固化的要素",就是因素的CSS position属性值为absolute、relative或fixed。
  • 该函数重临叁个坐标对象,该对象有一个left属性和top属性。属性值均为数字,它们都是像素(px)为单位。
  • 与offset()分裂的是:position()再次来到的是对峙于被定位的祖先成分的坐标,offset()重返的是对峙于最近文书档案的坐标。另外,position()函数无法用于安装操作。假若当前成分的古代人成分全都是默确定位(static),那么该函数重回的撼动位置与offset()函数同样。
$("p").position();
  • position()函数的重返值为Object类型,重临三个相对于离它这几天的"被固定的"祖辈元素的摇曳坐标对象,该对象具备left和top属性。
  • 若果当前jQuery对象相配多个成分,重临坐标时,position()函数只以中间第三个特其余元素为准。若无相配的因素,则重临undefined。
  • position()中的坐标仿效系是以被固化的先世成分的左上角为原点(0,0),向右为正,向下为正。
    实例证实
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        x=$("p").position();
        alert("顶部位置: " + x.top + "左部位置: " + x.left);
    });
});
</script>
</head>
<body>

<p>这是一个段落。</p>
<button>返回P元素的位置</button>

</body>

所谓"被固化的成分",就是因素的CSS position属性值为absolute、relative或fixed(只要不是暗中认可的static就可以)。

该函数再次回到二个坐标对象,该对象有八个left属性和top属性。属性值均为数字,它们都是像素(px)为单位。

与offset()不相同的是:position()再次来到的是对峙于被一定的古时候的人成分的坐标,offset()再次回到的是相对于近些日子文书档案的坐标。别的,position()函数不能用于安装操作。若是当前因素的古时候的人成分全是默确定位(static),那么该函数重返的舞狮地方与offset()函数同样。

该函数属于jQuery对象(实例)。

语法

jQuery 1.2 新增该函数。

jQueryObject.position( )

返回值

position()函数的再次回到值为Object类型,重返三个针锋相对于离它近期的"被固化的"祖辈成分的偏移坐标对象,该对象具备left和top属性。

若果当前jQuery对象相称八个成分,重临坐标时,position()函数只以中间第叁个门道相当的成分为准。若无匹配的因素,则重临undefined。

position()中的坐标参照他事他说加以考察系是以被一定的祖先成分的左上角为原点(0,0),向右为正,向下为正。

示例&说明

以上面这段HTML代码为例:

<br>
<br>
<p id="n1">专注于编程开发技术分享</p>

以下jQuery示例代码用于演示position()函数和offset()函数的用法:

var $n2 = $("#n2");
// 输出n2的偏移坐标
var pos = $n2.position();
document.writeln( "n2的position()偏移坐标:(" + pos.left + ", " + pos.top + ")" ); // n2的position()偏移坐标:(8, 60)
var coord = $n2.offset();
document.writeln( "n2的offset()的偏移坐标:(" + coord.left + ", " + coord.top + ")" ); // n2的offset()的偏移坐标:(8, 60)

从上述jQuery的运维结果可见,position()并不是得到相对于其父元素的舞狮地方。假若n2的先世元素全部为暗中同意定位,则position()重临的撼动地方和offset()函数一致。

下边,我们将上述HTML代码中的n1加上相对固化(relative):

<br>
<br>
<p id="n1" style="position: relative;" >专注于编程开发技术分享</p>

然后,我们再度执行上述jQuery代码,可以见到以下结果:

var $n2 = $("#n2");
// 输出n2的偏移坐标
var pos = $n2.position();
document.writeln( "n2的position()偏移坐标:(" + pos.left + ", " + pos.top + ")" ); // n2的position()偏移坐标:(0, 0)
var coord = $n2.offset();
document.writeln( "n2的offset()的偏移坐标:(" + coord.left + ", " + coord.top + ")" ); // n2的offset()的偏移坐标:(8, 60)

那儿,在n2的祖辈成分中,n1是离n2近年来的定点的上代成分(这里是relative,absolute、fixed也是如此),因而position()重返n2相对于n1的偏移地点。

.jQuery中position函数的选取(居中,凌驾荧屏管理等)

jQuery提供了多个Position函数,能够很方便的对Html元素进行固化,轻松的使用办法如下:

$(".daygrid").click(function(event){
  clickedGrid = $(this);
  $(".modal").modal("show");
  $(".modal").position({
    of:clickedGrid,
    offset:" ",
    collision:"fit"
  });
});

上边是三个很常用的用法,注册贰个click时间,然后当有一些击事件发生时,获取到被点击的要素,然后将对话框用position方法展现至分界面中。

position函数接受多个options对象,参数有十分的多

of:表示要放置在特别目的上,也能够传递click的event对象

my与at:这七个相比较不易于驾驭,其实也便是参照物和被参照物,my参数表示用什么岗位来做参谋而at表示参照指标的不胜地方。值范围为”left center right top bottom”的随便多个或两个。比如:my:”top left”,at:”left buttom”,那样安插表示将在被定为的因素的左上角放置在对象成分的左下角。

collision:表示什么管理碰撞,值范围为:”flip fit none”三选一。flip的合法斯洛伐克共和国(The Slovak Republic)语表达看不是很懂,实际测验的职能是,假使超出了预期范围(如window)则会尝试将成分放置到对象区域的相反地方。fit是适应,也正是会将成分完整的停放在预期范围内,而不会让要素溢出。而none则是不做其他磕磕碰碰管理。

offset代表依附my、at、of对齐成分后再进行多远的撼动,例如设置为”100 100″表示移至目的地点后再向下和右偏移100px

大规模的使用正是弹出对话框的职位,为了让对话框在鼠标点击的地点显得,则能够将click传的event对象传递给of参数,而且为了保证对话框在窗口范围内,能够将collision设置为fit。最终再依靠实际要求来设置对齐参数my和at,并且用offset实行偏移微调。五个将弹出对话框设置在窗口核心的例证:

$("#myDialog").position({
  my: "center",
  at: "center",
  of: window,
  collision:"fit"
});

上述内容是我给大家享用的jQuery position() 函数详解以及jQuery中position函数的运用的全方位描述,希望大家欣赏。

你恐怕感兴趣的稿子:

  • jQuery的position()方法详解
  • jQuery.position()方法得到不到值的平安替换方法
  • Jquery中offset()和position()的差异剖析
  • jQuery中position()方法用法实例
  • Jquery中的offset()和position()深远解析
  • jQuery Position方法应用和包容性

本文由正版必中一肖图发布于计算机网络,转载请注明出处:函数详解以及jQuery中position函数的应用

上一篇:JavaScript得到当前cpu使用率的主意,什么时候被调 下一篇:的小游戏,js贪吃蛇游戏达成思路和源码
猜你喜欢
热门排行
精彩图文