Position类

Position类目前似乎还在实现中,有些小问题,但非常实用,官方的文档里也说的有些含糊

relativize(element):将style.position设置为relative,并设置top=left="0px";  不改变其在文档中的位置

absolutize(element):将style.position设置为absolute,同样不改变其在文档中的位置

上述两种方法在以下的情况下不会得到满意的结果

如果element本身处于绝对定位,调用relativize() 是在文档中的位置会改变,甚至在IE7中会报错!

relativize()虽然不改变其在文档中的位置,由于采用了相对定位,会占用位置,这样后面的结点必须给其"让位"


clone():clone(source,target[,options])->[Number,Number]:他将source的Position相关的cssStyle复制到target options如下表

名称 默认 描述
setLeft true 是否复制style.left
setTop true 是否复制style.top
setWidth true 是否复制width
setHeight true 是否复制height
offsetLeft 0 是否复制左偏移量
offsetTop 0 是否复制上偏移量

cumulativeOffset (element):所有父元素的offset之和,返回数组[offsetLeft,offsetTop] 返回的数组其实是元素相对页面做上角的坐标,也就是绝对坐标,而且返回的坐标单位为pixel

Position.cumulativeOffset($("divTest"))[0];//

offsetParent():返回浏览器计算偏移量的父元素

#Layer1 {
    position:absolute;
    left:400px;
    top:0px;
    width:143px;
    height:125px;
    z-index:1;
    border:solid red 1px;
}
Position.offsetParent($("Layer1"))// returns the body element
//这可以这么理解,浏览器在计算Layer1的偏移量时是基于body元素的,所以返回body

<div id="base" >
     <ul id="fruits">
         <li id="apples">
             <h3 id="title">Apples</h3>
             <ul id="list-of-apples">
                  <li id="golden-delicious">GoldenDelicious</li>
                  <li id="mutsu">Mutsu</li>
                  <!-- this is a comment -->
                  <li id="mcintosh"class="yummy">McIntosh</li>
...
Position.offetParent($("mcintosh"));/returns div#base
//$("mcintosh")计算偏移量是基于div#base

下面是该函数的实现:

...
offsetParent: function(element) {
    if (element.offsetParent) return element.offsetParent;
    if (element == document.body) return element;

while ((element = element.parentNode) && element != document.body)
       if (Element.getStyle(element, 'position') != 'static')
       return element;

return document.body;
},
...

overlap(element):overlap(mode,element)->Number ,mode的值为"horizontal"或者"vertical",这个方法在调用之前需要调用within()方法,参见within();注意返回的数字单位为pixel.

page(element):page(element)->[Number,Number] 获取元素的视图坐标,即距离浏览器左上角的坐标,看看他的实现就会更明白,注意返回的数字单位为pixel

...
page: function(forElement) {
             var valueT = 0, valueL = 0;

          var element = forElement;
             do {
                 valueT += element.offsetTop || 0;
                 valueL += element.offsetLeft || 0;

              // Safari fix
                if (element.offsetParent == document.body)
                if (Element.getStyle(element,'position')=='absolute') break;

             } while (element = element.offsetParent);

          element = forElement;
             do {
                  if (!window.opera || element.tagName=='BODY') {
                          valueT -= element.scrollTop || 0;//其实就是绝对坐标减去滚动条的坐标
                          valueL -= element.scrollLeft || 0;//
                   }
                } while (element = element.parentNode);

return [valueL, valueT];
},

...

positionedOffset(element)->[Number,Number]:获取相对Position.offsetParent(elenent)的 偏移地址,参见offsetParent(),注意返回的数字单位为pixel

prepare():为调用Position.withinIncludingScrollOffsets()计算滚动条的坐标,参见withinIncludingScrollOffsets()

realOffset():realOffset(element)->[Number,Number]:获取真实的偏移地址.可以在计算父元素有滚动条的时候准确的计算出偏移地址,返回的数字单位pixel.参见Position.realOffset()的例子Position.realOffset()的使用例子

within():within(element,x,y)->Boolean,绝对为坐标xy的点是否在元素element的范围内

varelement=$('some_positioned_element');
Position.cumulativeOffset(element);
//->[100,100] element的绝对坐标(100,100)

element.getDimensions();
//->{width:150,height:150}宽150px,高150px;

Position.within(element,175,145);
//->true (175,145)点在element中

Position.overlap('horizontal',element);
//->0.5(point is half way across the element's length)  (175-100)/150=0.5

Position.overlap('vertical',element);
//->0.3(pointis 3/10 ths of the way across the element's height)  (145-100)/150=0.3

withinIncludingScrollOffsets():withinIncludingScrollOffsets(element,x,y)->Boolean,绝对坐标为(x,y)的点是否在当前滚动条状态下的文档可视区域内