注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

海鱼的博客-飞在空中的鱼

飞是一种梦想,也会是一种姿态

 
 
 

日志

 
 

jQuery中position函数的应用(居中,超出屏幕处理等)  

2012-07-11 14:36:23|  分类: jQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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

$("#myCoursePanel").position({
     of: $("#courseButton"),
     my: 'right top',
     at: 'right bottom',
     offset: ($.browser.msie) ? '-2 -3' : '0 0',
     collision: 'fit 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的官方英文说明看不是很懂,实际测试的效果是,如果超出了预期范围(如window)则会尝试将元素放置到目标区域的相反位置。fit是适应,也就是会将元素完整的放置在预期范围内,而不会让元素溢出。而none则是不做任何碰撞处理。
offset表示依靠my、at、of对齐元素后再进行多少距离的偏移,例如设置为”100 100″表示移至目标位置后再向下和右偏移100px

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

参考资料:jQuery官方position文档


  评论这张
 
阅读(855)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018