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程序。
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 传统的网页BBS大多是采用CGI模式实现的,它的实现要求编程者既要掌握编程语言如Perl或C等,又要了解关于CGI模式的各项技术内容,因此要
- <%@LANGUAGE="xxx" CODEPAGE="936"%>一般又分为<%
- number(<p>,<s>)精度p取值范围1~38有效位s取值范围-84~127最高整数位数=p-ss正数,小数点
- javascript中要判断一个变量是否为array通常是比较困难的,因为var a = [];alert(t
- 什么是.netMicrosoft® .NET 是 Microsoft XML Web services 平台。XML Web
- IE8 的测试版发布,ACID 3 测试正式推出,听上去是让人兴奋的技术进步,而对中文互联网站却是极大的威胁:这意味着,超过半数的中文网页在
- 当你碰到下面的asp错误提示时,说明你asp运行脚本超时了! Active Serv
- 1. 什么是404404是一个 http 错误代码,即请求的网页不存在。代码404的第一个“4”代表客户端的错误,如错误的网页位址;后两的数
- ASP生成柱型体,折线图,饼图源代码。一:纯ASP代码生成图表函数2——折线图;二:纯ASP代码生成图表函数1——柱状图 ;三:纯
- 网页制作中需要把握好很多原则和细节,今天我们来谈谈网页设计中的平衡、对比、连贯和留白。一、平衡如果你的页面是平衡的,当用户浏览这个页面的时候
- 阅读上一章:Chapter 8 再谈清单Chapter 9 精简标签先前我们不断提到结构化内容能够把结构与设计细节分类并精简标签,该怎么做呢
- 本周的豆知识分享就来深入研究一下window.event对象。请先看看下边的代码片断。 <button id=”btn”&g
- 今天在论坛上面看到有些兄弟不知道HTC是什么东西。小生在这里稍微说一下。从5.5版本开始,Internet Explorer(IE)开始支持
- 如何显示存储在BLOB字段中的图像?showimges.asp' 在浏览器上单独显示图像 <%@ 
- jQuery 将马上发布 1.4 正式版,代码也从 googlecode 上迁移到了 github. jQuery 是我接触的第一个 JS
- asp如何显示全部的环境变量?<%@Language="VBScript"%><%dim H
- 从前有三只小猪,长大自立了分别造房子住。老大搬来草堆堆出草屋,老二搬来木头搭出木屋,老三搬来砖头,砌墙,造烟囱,造出了坚固的砖房。一天晚上大
- <table border="1" cellpadding="0&quo
- Sybase于2008年11月4日在大中华区用户大会上宣布,联手神州数码金程(北京)科技有限公司对旗下领先的SQL Anywhere数据库进
- ASP 能快速执行你的 * 页,但你还可以通过紧缩代码和数据库连接以使它们执行更快。这是一篇关于怎样精简代码和Asp 特征以获得最快执行速度