jquery中position定位options参数

jQuery提供了一个Position函数，可以很方便的对Html元素进行定位，简单的使用方法如下:

1	$(".daygrid").click(function(event){

2	clickedGrid = $(this);

3

4	$(".modal").modal("show");

5	$(".modal").position({

6	of:clickedGrid,

7	offset:"0 100",

8	collision:"fit"

9

});

10

});

上面是一个很常用的用法，注册一个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的官方英文说明看不是很懂，实际测试的效果是，如果超出了预期范围（如window）则会尝试将元素放置到目标区域的相反位置。fit是适应，也就是会将元素完整的放置在预期范围内，而不会让元素溢出。而none则是不做任何碰撞处理。
• offset表示依靠my、at、of对齐元素后再进行多少距离的偏移，例如设置为”100 100″表示移至目标位置后再向下和右偏移100px

常见的使用就是弹出对话框的位置，为了让对话框在鼠标点击的位置显示，则可以将click传的event对象传递给of参数，并且为了保证对话框在窗口范围内，可以将collision设置为fit。最后再根据实际需求来设置对齐参数my和at，并且用offset进行偏移微调。一个将弹出对话框设置在窗口中央的例子：

1	$("#myDialog").position({

2	my: "center",

3	at: "center",

4	of: window,

5	collision:"fit"

6

});

参考资料：jQuery官方position文档