JavaScript教程:Table行定位效果(7)

http://www.itjxue.com  2015-08-06 23:10  来源:未知  点击次数: 

【元素定位】

万事俱备,只欠定位了。
由于要根据窗口滚动状态来判断计算定位,scrollTop/scrollLeft的获取必不可少。
但在chrome中就算用了DOCTYPE,也要用document.body来获取scrollTop/scrollLeft,尽管它确实有document.documentElement。
对chrome了解不多,也不知哪里能查它的相关文档,程序里就直接做个判断算了:

this._doc = isChrome ? document.body : document.documentElement;

定位的第一步就是判断是否需要定位,这里的判断标准有两个,第一个是原tr是否超过了视窗范围,还有是新table要显示的位置是否在原table的显示范围内。
第一点可以通过原tr位置的顶部和底部是否超过视窗的顶部和底部来判断:

var top = this._doc.scrollTop, left = this._doc.scrollLeft
    ,outViewTop = this._oRowTop < top, outViewBottom = this._oRowBottom > top + this._viewHeight;
if(outViewTop || outViewBottom){}

在看第二点之前先看看程序中的Auto属性,它是用来指定否自动定位的。
如果自动定位的话当原tr离开视框顶部新table就会定位到视框顶部,原tr离开底部新table就会定位到视框底部,这样看上去会比较自然顺畅。
如果不选择自动的话就会根据SetPos方法中计算得到的新table视窗top值来设置定位:

var viewTop = !this.Auto ? this._nTableViewTop
    : (outViewTop ? 0 : (this._viewHeight - this._nTableHeight))//视窗top
    ,posTop = viewTop + top;//位置top

接着就判断新table要显示的位置是否在原table的显示范围内,这个可以通过新table位置的顶部和底部是否超过原table的顶部和底部来判断:

if(posTop > this._oTableTop && posTop + this._nTableHeight < this._oTableBottom){}

当符合所有的条件就可以进行定位了,如果是fixed定位的就使用相对视窗的top值:

this._style.top = viewTop + "px";
this._style.left = this._oTableLeft - left + "px";

像ie6是absolute定位的就要使用相对文档的top值:

this._style.top = posTop + "px";
this._style.left = this._oTableLeft + "px";

考虑到左右滚动的情况,left也必须设置。

当然不符合条件就会隐藏新table,程序中给top设置一个很大的负值来间接“隐藏”它。
用负值是因为这样不会把ie6的页面拉长,不用display是因为上面需要获取它的offsetHeight,如果用display隐藏就获取不了啦。

最后把Run程序绑定到window的scroll事件中就可以了,而window在resize时视框高度会发生变化,所以resize事件要绑定SetPos程序。

(责任编辑:IT教学网)

更多

推荐Javascript/Ajax文章