有次工作碰到要做表头固定的js,发现高版本的Jquery不支持jQuery.browser属性,可以通过以下办法解决:
jquery.fixedtableheader.min.js:
/* Copyright (c) 2009 Mustafa OZCAN (http://www.mustafaozcan.net)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* Version: 1.0.2
* Requires: jquery.1.3+
*/
jQuery.fn.fixedtableheader = function(options) {
//解决jquyer 1.9+ 不支持jQuery.browser start
if(jQuery.browser) return;
jQuery.browser = {};
jQuery.browser.mozilla = false;
jQuery.browser.webkit = false;
jQuery.browser.opera = false;
jQuery.browser.msie = false;
var nAgt = navigator.userAgent;
jQuery.browser.name = navigator.appName;
jQuery.browser.fullVersion = ''+parseFloat(navigator.appVersion);
jQuery.browser.majorVersion = parseInt(navigator.appVersion,10);
var nameOffset,verOffset,ix;
// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
jQuery.browser.opera = true;
jQuery.browser.name = "Opera";
jQuery.browser.fullVersion = nAgt.substring(verOffset+6);
if ((verOffset=nAgt.indexOf("Version"))!=-1)
jQuery.browser.fullVersion = nAgt.substring(verOffset+8);
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
jQuery.browser.msie = true;
jQuery.browser.name = "Microsoft Internet Explorer";
jQuery.browser.fullVersion = nAgt.substring(verOffset+5);
}
// In Chrome, the true version is after "Chrome"
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
jQuery.browser.webkit = true;
jQuery.browser.name = "Chrome";
jQuery.browser.fullVersion = nAgt.substring(verOffset+7);
}
// In Safari, the true version is after "Safari" or after "Version"
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
jQuery.browser.webkit = true;
jQuery.browser.name = "Safari";
jQuery.browser.fullVersion = nAgt.substring(verOffset+7);
if ((verOffset=nAgt.indexOf("Version"))!=-1)
jQuery.browser.fullVersion = nAgt.substring(verOffset+8);
}
// In Firefox, the true version is after "Firefox"
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
jQuery.browser.mozilla = true;
jQuery.browser.name = "Firefox";
jQuery.browser.fullVersion = nAgt.substring(verOffset+8);
}
// In most other browsers, "name/version" is at the end of userAgent
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) <
(verOffset=nAgt.lastIndexOf('/')) )
{
jQuery.browser.name = nAgt.substring(nameOffset,verOffset);
jQuery.browser.fullVersion = nAgt.substring(verOffset+1);
if (jQuery.browser.name.toLowerCase()==jQuery.browser.name.toUpperCase()) {
jQuery.browser.name = navigator.appName;
}
}
// trim the fullVersion string at semicolon/space if present
if ((ix=jQuery.browser.fullVersion.indexOf(";"))!=-1)
jQuery.browser.fullVersion=jQuery.browser.fullVersion.substring(0,ix);
if ((ix=jQuery.browser.fullVersion.indexOf(" "))!=-1)
jQuery.browser.fullVersion=jQuery.browser.fullVersion.substring(0,ix);
jQuery.browser.majorVersion = parseInt(''+jQuery.browser.fullVersion,10);
if (isNaN(jQuery.browser.majorVersion)) {
jQuery.browser.fullVersion = ''+parseFloat(navigator.appVersion);
jQuery.browser.majorVersion = parseInt(navigator.appVersion,10);
}
jQuery.browser.version = jQuery.browser.majorVersion;
//解决jquyer 1.9+ 不支持jQuery.browser end
var settings = jQuery.extend({
headerrowsize: 1,
highlightrow: false,
highlightclass: "highlight"
}, options);
this.each(function(i) {
var $tbl = $(this);
var $tblhfixed = $tbl.find("tr:lt(" + settings.headerrowsize + ")");
var headerelement = "th";
if ($tblhfixed.find(headerelement).length == 0)
headerelement = "td";
if ($tblhfixed.find(headerelement).length > 0) {
$tblhfixed.find(headerelement).each(function() {
$(this).css("width", $(this).width());
});
var $clonedTable = $tbl.clone().empty();
var tblwidth = GetTblWidth($tbl);
$clonedTable.attr("id", "fixedtableheader" + i).css({
"position": "fixed",
"top": "0",
"left": $tbl.offset().left
}).append($tblhfixed.clone()).width(tblwidth).hide().appendTo($("body"));
if (settings.highlightrow)
$("tr:gt(" + (settings.headerrowsize - 1) + ")", $tbl).hover(function() {
$(this).addClass(settings.highlightclass);
}, function() {
$(this).removeClass(settings.highlightclass);
});
$(window).scroll(function() {
if (jQuery.browser.msie && jQuery.browser.version == "6.0")
$clonedTable.css({
"position": "absolute",
"top": $(window).scrollTop(),
"left": $tbl.offset().left
});
else
$clonedTable.css({
"position": "fixed",
"top": "0",
"left": $tbl.offset().left - $(window).scrollLeft()
});
var sctop = $(window).scrollTop();
var elmtop = $tblhfixed.offset().top;
if (sctop > elmtop && sctop <= (elmtop + $tbl.height() - $tblhfixed.height()))
$clonedTable.show();
else
$clonedTable.hide();
});
$(window).resize(function() {
if ($clonedTable.outerWidth() != $tbl.outerWidth()) {
$tblhfixed.find(headerelement).each(function(index) {
var w = $(this).width();
$(this).css("width", w);
$clonedTable.find(headerelement).eq(index).css("width", w);
});
$clonedTable.width($tbl.outerWidth());
}
$clonedTable.css("left", $tbl.offset().left);
});
}
});
function GetTblWidth($tbl) {
var tblwidth = $tbl.outerWidth();
return tblwidth;
}
};
演示DOME:
演示DOME:
jquery.fixedtableheader.min.js Demo Page (Created Mustafa OZCAN)
jQuery Fixed Table Header Demo Page
Third Option = highlightclass: "highlight"
Default value is "highlight". This option set highlighted row's css class.
If you are set "highlightrow: true" you can set highlightclass.
TIME TABLE
STATION A
STATION B
Work Days Saturday Sunday Work Days Saturday Sunday
05:50 06:00 06:20 06:20 06:30 07:25
06:10 06:15 06:40 06:50 07:00 07:45
06:30 06:30 07:00 07:10 07:15 08:00
06:45 06:45 07:20 07:30 07:30 08:20
?0?707:00?0?7 07:00 07:35 07:50 07:45 08:35
07:10 07:15 07:50 08:10 08:00 08:50
?0?707:10?0?7 07:30 08:00 08:30 08:20 09:00
?0?707:20?0?7 07:40 08:10 08:45 08:35 09:15
07:30 07:50 08:20 08:55 08:50 09:30
?0?707:40?0?7 08:00 08:30 09:05 09:05 09:45
07:50 08:10 08:50 09:15 09:15 10:00
08:00 08:20 09:10 09:30 09:30 10:15
?0?708:15?0?7 08:30 09:30 09:45 09:40 10:35
08:15 08:45 09:45 10:00 09:50 10:50
08:30 09:00 10:00 10:15 10:05 11:05
08:50 09:15 10:10 10:30 10:20 11:15
09:10 09:30 10:20 10:45 10:30 11:25
09:30 09:45 10:35 11:00 10:45 11:45
09:45 10:00 10:45 11:15 11:00 11:55
10:00 10:10 10:55 11:30 11:15 12:05
10:15 10:25 11:10 11:45 11:30 12:20
10:30 10:35 11:25 12:00 11:45 12:35
10:45 10:50 11:40 12:15 12:00 12:50
11:00 11:05 11:55 12:35 12:20 13:05
11:15 11:20 12:10 12:55 12:35 13:20
11:30 11:35 12:20 13:10 12:50 13:30
11:45 11:55 12:35 13:25 13:00 13:45
12:05 12:15 12:50 13:40 13:20 14:00
12:20 12:35 13:00 14:00 13:40 14:10
12:35 12:50 13:10 14:20 13:55 14:20
12:50 13:05 13:25 14:35 14:10 14:35
13:05 13:25 13:40 14:55 14:25 14:50
13:20 13:45 13:55 15:10 14:40 15:05
13:35 14:05 14:10 15:30 15:00 15:20
13:50 14:20 14:25 15:50 15:20 15:35
14:10 14:35 14:35 16:05 15:40 15:45
14:30 14:55 14:50 16:25 16:10 16:00
14:50 15:10 15:05 16:40 16:30 16:15
15:10 15:25 15:15 17:00 16:50 16:25
15:30 15:40 15:25 ?0?717:10?0?7 17:05 16:35
15:50 15:55 15:40 17:15 17:20 16:50
16:05 16:15 15:55 17:30 17:35 17:05
16:20 16:35 16:10 17:45 17:50 17:20
16:35 16:55 16:25 17:55 18:10 17:30
16:55 17:10 16:40 18:15 18:30 17:50
17:15 17:30 16:50 ?0?718:30?0?7 18:45 18:00
17:30 17:45 17:05 18:45 19:00 18:20
17:45 18:00 17:25 19:05 19:15 18:30
18:00 18:15 17:40 19:20 19:30 18:45
?0?718:10?0?7 18:30 17:55 ?0?719:35?0?7 19:45 19:00
18:20 18:50 18:15 19:45 20:00 19:15
18:40 19:10 18:35 20:05 20:20 19:40
19:00 19:30 18:50 20:25 20:40 19:55
19:15 19:50 19:05 20:40 21:00 20:10
19:30 20:10 19:20 20:55 21:20 20:25
19:45 20:35 19:35 21:15 21:45 20:40
20:05 21:00 19:55 21:30 22:10 21:00
20:30 21:30 20:15 21:50 22:40 21:25
21:00 22:00 20:45 22:10 23:10 21:55
21:30 21:10 22:40 22:20
22:00 23:10