|
【覆蓋select】
只要用到了定位，就不得不面對一個老對手“ie6的select”。
我在之前的文章也介紹過一些解決方法（參考這里的覆蓋select），這里不能直接隱藏select，那看來只能用iframe了。
但用iframe有一個很大的問題，在ie6測試下面的代碼，并拖動滾動條：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<body>
<style type="text/css">
body{height:1000px;}
.t{height:300px;width:200px; border:1px solid; position:absolute; background:#FFF;top:0;left:0;}
</style>
<iframe class="t" id="t"></iframe>
<select></select><br />
<select></select><br />
<select></select><br />
<select></select><br />
<select></select><br />
<select></select><br />
<select></select><br />
<select></select><br />
<select></select><br />
<select></select><br />
</body>
</html>
可以看到，即使是iframe，在拖動滾動條的時候，select仍然在后面閃啊閃，在本程序中這個現(xiàn)象會尤其明顯。
看來還得用隱藏select的方法，最好的做法是只隱藏在新table后面的select，而不影響其他select的正常顯示。
那關(guān)鍵就是如何判斷select是否在新table后面，這個可以通過位置坐標判斷，剛好可以用到上面的getBoundingClientRect。
一般的思路是判斷新table和select的坐標，根據(jù)位置判斷select的顯示和隱藏。
但如果有多個實例，可能會導(dǎo)致select在一個實例中要隱藏，卻在另一個要顯示的情況。
為了解決沖突，程序給select加了一個_count屬性作為計數(shù)器，用來記錄有多少實例把該select隱藏了。
如果當(dāng)前實例判斷該select要隱藏，就給其_count加1，隱藏后存放到實例的_selects集合中。
在恢復(fù)顯示_selects中的select時，先給select的_count減1，如果得到的_count是0，那說明沒有其他實例要隱藏它，就可以設(shè)置顯示了，最后清空_selects集合。
在判斷是否隱藏select前還必須恢復(fù)一次該實例_selects里面的select，否則就會造成_count只加不減的情況。
程序中的SetSelect方法就是用來判斷和設(shè)置select的：
this.ResetSelect();
var rect = this._nTable.getBoundingClientRect();
//把需要隱藏的放到_selects集合
this._selects = Filter(this._oTable.getElementsByTagName("select"), Bind(this, function(o){
var r = o.getBoundingClientRect();
if(r.top <= rect.bottom && r.bottom >= rect.top){
o._count ? o._count++ : (o._count = 1);//防止多個實例沖突
//設(shè)置隱藏
var visi = o.style.visibility;
if(visi != "hidden"){ o._css = visi; o.style.visibility = "hidden"; }
return true;
}
}))
其中ResetSelect方法是用來恢復(fù)顯示select的：
forEach(this._selects, function(o){ !--o._count && (o.style.visibility = o._css); });
this._selects = [];
但這個方法在快速滾屏?xí)r還是無能為力，而且select越多效率也隨之下降，各位有更好方法的話歡迎交流。
【Chrome一個bug】
在測試的時候發(fā)現(xiàn)Chrome一個bug，測試下面代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<body>
<table border="1">
<tr>
<td id="tt"></td>
</tr>
</table>
<div id="t"></div>
<script>
document.getElementById("t").offsetWidth;
document.getElementById("tt").innerHTML = "<select><option>test</option></select>";
</script>
</body>
</html>
一個毫不相干的操作居然令table沒有自動撐開，加上前面的問題，看來Chrome的路還很長啊。
使用說明
實例化一個TableFixed對象只需要一個參數(shù)table的id：
new TableFixed("idTable");
實例化時有4個可選屬性：
Index: 0,//tr索引
Auto: true,//是否自動定位
Pos: 0,//自定義定位位置百分比(0到1)
Hide: false//是否隱藏（不顯示）
其中Index和Pos在實例化之后就不能使用。
要修改克隆行可以用Clone方法，其參數(shù)是要克隆tr的索引。
要修改自定義定位位置可以用SetPos方法，其參數(shù)是要定位的位置百分比。
具體使用請參考實例。
程序源碼
代碼拷貝框
[Ctrl+A 全部選擇 然后拷貝]
下載完成測試代碼
原文：http://www.cnblogs.com/cloudgamer/archive/2009/05/18/TableFixed.html
本文鏈接：http://m.95time.cn/tech/web/2009/7012.asp 
出處：藍色理想
責(zé)任編輯：bluehearts
上一頁 JavaScript Table行定位效果 [7] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 8 頁 JavaScript Table行定位效果 [8]
