ヘッダ固定(jqueryによる原理紹介)
16296 ワード
ヘッダー固定は比較的多くの機能を使うべきで、ネット上のいくつかの例を参考にして、いくつかの常用ブラウザの下で表示するのは完璧ではありません.また,固定されたテーブルに基づいていることが多く,符号化時に固定されたテーブルヘッダを1つ多く書くと,動的に生成された何列のテーブルか分からないテーブルには手がつけられない.また例では制限高さしか満足できない場合が多く,幅を限定すれば横スクロールバーが現れるとどうしようもない.
私の目的はjquery-uiのように、ページに存在するテーブルを見つけ、メソッドを呼び出すことでテーブルヘッダを固定する機能を実現することです.jqueryプラグインを書くことを学ぶ機会に、自分で表頭固定のプラグインを書きました.
使用方法はjquery-uiのプラグインと同様に、1行のコード$('#table 1')しか必要ありません.fixHeader({height:100});
次のブラウザテストはIE 7 IE 8 firefox 16に合格しました.0 chrome22.0
现在、IE 9の下记の位置合わせができないことが知られており、手元にはしばらくIE 9がデバッグに来ていないので、后で考えて解决します.
説明:
1 jqueryが必要です.開発テスト用のjquery-1.8.2です.他のバージョンは大きくないはずです.
2表の頭の部分の必要は中に書きます
3幅を限定しない場合は、自動的に表幅に適応する(スクロールバー幅が20 px、実際の幅が表幅+20 pxと仮定する)
4複数行ヘッダー固定をサポート
5通常、表のすべての列が表示され、横スクロールバーはなく、縦スクロールバーの機能だけが必要です.このプラグインは、幅を限定したヘッダー固定をサポートします.
6幅と高さを限定した条件でヘッド表示を固定する場合、ヘッド固定機能は単純にcssでは実現できず、jsで実現する必要があり、軽く点滅する
7 tableとth,tdのborder-widthが異なる値に設定されている場合を考慮した
8ヘッダーにバインドされたイベントが考慮され、元のヘッダーにバインドされたイベントは保持されます.
特に注意:IEブラウザの下で、必ず表の中のtdとthのborder-widthを設定しなければならなくて、さもなくば正しく列の幅を設定することができなくて、表頭とデータの部分はずれます
使用方法:
制限高さ:$('#table 1').fixHeader({height:100});
高さと幅を制限:$('#table 3').fixHeader({height:100,width:500});
以下は完全なコードです
私の目的はjquery-uiのように、ページに存在するテーブルを見つけ、メソッドを呼び出すことでテーブルヘッダを固定する機能を実現することです.jqueryプラグインを書くことを学ぶ機会に、自分で表頭固定のプラグインを書きました.
使用方法はjquery-uiのプラグインと同様に、1行のコード$('#table 1')しか必要ありません.fixHeader({height:100});
次のブラウザテストはIE 7 IE 8 firefox 16に合格しました.0 chrome22.0
现在、IE 9の下记の位置合わせができないことが知られており、手元にはしばらくIE 9がデバッグに来ていないので、后で考えて解决します.
説明:
1 jqueryが必要です.開発テスト用のjquery-1.8.2です.他のバージョンは大きくないはずです.
2表の頭の部分の必要は中に書きます
3幅を限定しない場合は、自動的に表幅に適応する(スクロールバー幅が20 px、実際の幅が表幅+20 pxと仮定する)
4複数行ヘッダー固定をサポート
5通常、表のすべての列が表示され、横スクロールバーはなく、縦スクロールバーの機能だけが必要です.このプラグインは、幅を限定したヘッダー固定をサポートします.
6幅と高さを限定した条件でヘッド表示を固定する場合、ヘッド固定機能は単純にcssでは実現できず、jsで実現する必要があり、軽く点滅する
7 tableとth,tdのborder-widthが異なる値に設定されている場合を考慮した
8ヘッダーにバインドされたイベントが考慮され、元のヘッダーにバインドされたイベントは保持されます.
特に注意:IEブラウザの下で、必ず表の中のtdとthのborder-widthを設定しなければならなくて、さもなくば正しく列の幅を設定することができなくて、表頭とデータの部分はずれます
使用方法:
制限高さ:$('#table 1').fixHeader({height:100});
高さと幅を制限:$('#table 3').fixHeader({height:100,width:500});
以下は完全なコードです
/*!
* fixHeader 1.0.0
* Copyright 2012 chokobo
*
* make table header fixed
*
* notice： set th,id border-width in IE
*
* tested browser: IE7 IE8 firefox16.0 chrome22.0
*/
(function( $, undefined ) {
$.fn.fixHeader = function(options){
var defaults = {
width: '',
height: ''
};
options = $.extend({}, defaults, options);
var elem = this;
if(options.height == ''){
return this;
}
var thead = elem.find('thead');
var fixTable = elem.clone().empty().removeAttr('id');
//set head default background-color
if(fixTable.css('background-color') == 'transparent' || fixTable.css('background-color') == ''){
fixTable.css('background-color', '#fff');
}
fixTable.css({
'position': 'absolute',
'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??
}
}
});
//make head
var dummyHead = thead.clone();
thead.appendTo(fixTable);
dummyHead.prependTo(elem);
var tbodyWrapper = elem.wrap('').parent();
var tableWrapper = tbodyWrapper.wrap('').parent();
setTableWidth();
setWrapperSize();
fixTable.prependTo(tableWrapper);
return this;
function setTableWidth(){
if($.browser.mozilla){
elem.width(elem.width());
fixTable.css('width',elem.css('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());
}
else{
elem.width(elem.outerWidth());
fixTable.width(elem.outerWidth());
}
}
function setWrapperSize(){
var elemWidth = elem.outerWidth(true);
var elemHeight = elem.outerHeight(true);
var scrollBarWidth = 20;
if(options.width == ''){
tbodyWrapper.css({
'width': (elemWidth+scrollBarWidth) + 'px',
'height': options.height,
'overflow-x': 'hidden',
'overflow-y': 'auto'
});
}
else{
if(elemWidth <= options.width){
tbodyWrapper.css({
'width': options.width+'px',
'height': options.height,
'overflow-x': 'hidden',
'overflow-y': 'auto'
});
}
else{
tableWrapper.css({
'width': options.width,
'height': options.height,
'overflow': 'auto'
});
tableWrapper.scroll(function(){
fixTable.css('top',tableWrapper.scrollTop()+'px');
});
}
}
}
};
})( jQuery );
/*
： �^。
ID�M �O $("#div").chromatable({width: "100%",height: "100%", scrolling: "yes"})
table � � `
�� �o。
*/
(function($){
$.chromatable = {
defaults: {
width: "900px", //�O �� , �U
height: "300px", //�O , �U
scrolling: "yes" //yes �SIE�L��l ��, no � �H �L��l ��
}
};
$.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 resizeEvent(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);