表頭固定(利用jquery實作原理介紹)_jquery

/*！
* fixHeader 1.0.0
* 版權所有2012 chokobo
*
* 修正表頭
*
* 注意：在IE 中設定th,idb-width
*
* 測試瀏覽器：IE7 IE8 firefox16.0 chrome22.0
*/
(function( $, undefined ) {

$.fn.fixHeader = function(options){
var defaults = {
寬度: '',
高度: ''

};

選項= $.extend({}, 預設值, 選項) ; >var elem = this;

if(options.height == ''){
回傳這個;
}

var thead = elem.find('thead' ) ;
var fixTable = elem.clone().empty().removeAttr('id');
//設定頭部預設背景顏色
if(fixTable.css('background-color' ) == '透明' || fixTable.css('背景顏色') == ''){
fixTable.css('背景顏色', '#fff');
}
fixTable . css({
'position': '絕對',
'top': '0px',
'border-bottom': $('tr:eq(0)', thead).find ( 'th:eq(0), td:eq(0)').css('border-bottom-width')
});


$('tr:eq( 0 )', thead).find('th, td').each(function(){
var col = $(this);

if($.browser.mozilla){
col.width(col.width());
}
else if($.browser.chrome){
var colBorderWidth = parseInt(col.css('border-width'));
col.width(col.width() colBorderWidth);
}
else if($.browser.msie){
var colBorderWidth = parseInt(col.css('border-width'));
if(colBorderWidth){
col.width(col.width() colBorderWidth colBorderWidth/2);//IE7??
}
}
});

//製作頭部
var dummyHead = thead.clone();
thead.appendTo(fixTable);
dummyHead.prependTo(elem);


var tbodyWapper =var elem.wrap('').parent();
var tableWrapper = tbodyWrapper.wrap('').parent();
setTableWidth();
setWrapperSize();

fixTable.prependTo(tableWrapper);

fixTable.prependTo(tableWrapper);

返回此； 返回此； 返回此； 🎜>
function setTableWidth(){
if($.browser.mozilla){
elem.width(elem.width());
fixTable.css('width',elem.scsth' ('width'));
}
else if($.browser.chrome){
elem.width(elem.outerWidth());
fixTable.width(elem.outerWidth() );
}
else if($.browser.msie){
elem.width(elem.outerWidth());
fixTable.width(elem.outerWidth());
fixTable.width(elem.outerWidth());
}
else{
elem.width(elem.outerWidth());
fixTable.width(elem.outerWidth());
}
}
function set{rapperSeize(unction)
var elemWidth = elem.outerWidth(true);
var elemHeight = elem.outerHeight(true);
varscrollBarWidth = 20;

if(options.fidth = 20;

if(option''width .
tbodyWrapper.css({
'width': (elemWidthscrollBarWidth) 'px',
'height': options.height ,
'overflow-x': '隱藏',
' overflow-y': '自動'
});
}
else{
if(elemWidth tbodyWrapper.css({
'width' : options.width 'px',
'height ': options.height,
'overflow-x': '隱藏',
'overflow-y': 'auto'
});
}
else{
tableWrapper.css({
'width': options.width,
'height': options.height,
'overflow': 'auto'
});
tableWrapper.scroll(function(){
fixTable.css('top',tableWrapper.scrollTop() 'px');
});
}
}
}
};

/*
功能：固定表頭。
使用容器的ID進行設定$("#div").chromatable({width: "100%",height: "100%", scrolling: "yes"})
table必須包含有標籤
參數：無。
*/
(function($){
$.chromatable = {
defaults: {
width: "900px", //設定容器寬度,待擴充程式
height : "300px", //設定容器高度,待擴展程序
scrolling: "yes" //yes跟隨IE滾動條而滑動, no固定在頁面上僅容器滾動條滑動
}
} ;
$.fn.chromatable = function(options){
var options = $.extend({}, $.chromatable.defaults, options);
return this.each(function() {
var $divObj = $(this);
var $tableObj = $divObj.find("table");
var $uniqueID = $tableObj.attr("ID") ("wrapper" );
var $class = $tableObj.attr("class");
var $tableWidth = $tableObj.width();
var top = $("#" $tableObj.attr(" ID" )).offset().top;
var left = $("#" $tableObj.attr("ID")).offset().left
$divObj.append("" $("#" $tableObj.attr("ID")).find("thead").html() " ");

$.each($("#" $tableObj.attr("ID")).find("thead th"), function(i,item){
$(" #" $uniqueID).find("thead th").eq(i).width($(item).width());
$(item).width($(item).width ()) ;
});

if(options.scrolling === "yes")
{
scrollEvent($tableObj.attr("ID"), $uniqueID) ;
}
resizeEvent($tableObj.attr("ID"), $uniqueID);
});

function scrollEvent(tableId, uniqueID)
{
var element = $("#" uniqueID);
$(window).scroll(function(){
var top = $("#" tableId).offset().top;
var scrolls = $( this).scrollTop();

if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed" ,
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element. css({
position: "absolute",
top: top
});
}

});
};

function});
};

function resize (tableId, uniqueID)
{
var element = $("#" uniqueID);
$(window).resize(function(){
var top = $(" #" tableId) .offset().top;
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
} )
; }
}else {
element.css({
position: "absolute",
top: top
});
}
}) ;
});
} }) ; }); } }) ; }}); } }) ; }}); } }) ; } }; })(jQuery);