JavaScript Table行定位效果(7)

作者:cloudgamer 来源:cloudgamer博客 时间:2009-05-25 10:47:00 

【元素定位】

万事俱备,只欠定位了。
由于要根据窗口滚动状态来判断计算定位,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程序。

标签:JavaScript,表格,定位,table
0
投稿

猜你喜欢

  • 细节设计之美:扩大可操作区域

    2009-08-01 11:32:00
  • 保护MySQL数据库中重要数据的注意事项

    2009-01-19 11:55:00
  • javascript面向对象编程(一)

    2008-03-07 12:54:00
  • 5步让你的CSS样式表成功减肥

    2009-08-02 21:27:00
  • 教你怎么使用sql游标实例分享

    2012-07-11 16:14:57
  • SQL Server 中导入导出数据三方法比较

    2009-01-21 14:22:00
  • asp 去除最后一个逗号为空字符串的代码

    2010-06-09 19:18:00
  • Scripting.Dictionary 对象

    2007-10-13 09:46:00
  • asp如何用数据库制作一个多用户版的计数器?

    2010-06-16 09:51:00
  • 网站开发防止中文乱码需要了解的codepage的重要性小结

    2011-03-03 11:24:00
  • 巧用正则表达式获取新闻中图片地址

    2010-07-17 13:09:00
  • 快速解决SQL server 2005孤立用户问题

    2009-01-04 14:02:00
  • Asp 操作Access数据库时出现死锁.ldb的解决方法

    2011-03-29 10:49:00
  • CSS模块化设计

    2009-01-05 12:10:00
  • Javascript的一种模块模式

    2007-12-05 14:04:00
  • 简单的文本内容处理工具

    2010-01-28 12:31:00
  • 使用jQuery简化Ajax开发

    2010-04-11 21:09:00
  • 一个ASP写的侧边菜单栏

    2010-05-27 12:22:00
  • asp中提取HTML中图片的SRC路径

    2008-10-24 08:42:00
  • ajax Google PageRank3(PR值)查询源代码

    2007-11-04 13:31:00
  • asp之家 网络编程 m.aspxhome.com