當表格高度超過視窗時, 使用者在檢視下方資料時, 看不到標題列

線上示範:http://aqr198.googlepages.com/table_UFO_title.htm


設計想法是逐一取得標題列的各欄高寬及內容值, 然後使用span標籤來模擬
透過window.onscroll事件及document.body.scrollTop屬性來操作標題的移動及顯示

使用Fluent interface的寫法
以下二個方法都是使用Fluent interface的寫法

function table$(name){return new tag_table(name);}

function MySPAN$(name){return new MySPAN(name);}


Fluent interface相關文章
http://fillano.blog.ithome.com.tw/post/257/18421
http://ithelp.ithome.com.tw/question/10005623


使用裝飾者模式(Decorator Pattern)的寫法
主要是為了產生及操作span標題群組的移動。

function title_group_null()
function title_group(up,cf)



相關文章:
http://aqr199xx.pixnet.net/blog/post/23749609

抓取物件的位置(top,left)
function MyPostion()內是由jquery.autocomplete內截取出來的方法, 可以計算出物件在網頁上的位置
它是放在MyPostion.js檔案內

標題列指定及標題欄的資料取得
透過table.rows及table.rows[i].cells來操作

table$('gv_list').UFOTitle([0]);

設定參數是傳入一個陣列, 指定標題列索引值, 由零開始。
如果標題列有二列, 為第0列及第1列, 可以改為以下設定

table$('gv_list').UFOTitle([0,1]);

目前設定是當視窗捲軸移動超過標題列上緣時才會出現, 為了讓span出現黑線外框套用了一個css(TITLE)
但是會造成浮動標題列的線跟表格有小小的偏差, 因此在 function title_group(up,cf)內有一堆調整的參數值
如果有人可以調整出完美的參數值且可以在IE,FireFox及Chrome上顯示無誤, 煩請告知 m_*_m

另外要注意在ASP.NET的網頁檔案上方都會固定加上文檔類型定義(DTD), 如果是xhtml1-transitional.dtd的話
會造成window.onscroll事件無法被引發。

以上~~

如有問題或留言 >> http://aqr199xx.pixnet.net/blog/post/24717997

arrow
arrow
    全站熱搜

    aqr199xx 發表在 痞客邦 留言(0) 人氣()