ホームページ >ウェブフロントエンド >jsチュートリアル >固定ヘッダー (jquery を使用した実装原理の紹介)_jquery
固定ヘッダー (jquery を使用した実装原理の紹介)_jquery
- WBOYオリジナル
- 2016-05-16 17:48:341485ブラウズ
テーブルヘッダーの固定は頻繁に使用される機能であるはずですが、インターネット上のいくつかの例を参照しましたが、一般的に使用されるいくつかのブラウザーでは表示が完璧ではありません。さらに、それらの多くは固定テーブルに基づいており、コーディング時に固定ヘッダーを記述する必要があるため、列数が不明な動的に生成されたテーブルを開始することが困難になります。さらに、ほとんどの例では高さの制限しか満たせません。幅が制限されていると、水平スクロール バーが表示されても仕方がありません。
私の目的は、jquery-ui のようにページ上に存在するテーブルを検索し、ヘッダーを修正する機能を実現するメソッドを呼び出すことです。 jquery プラグインの作成を学ぶ機会を利用して、固定ヘッダーを持つプラグインを作成しました。
使用法は jquery-ui のプラグインと同じです。必要なコードは $('#table1').fixHeader({height:100}); だけです。 >次のブラウザのテストは成功しました
IE7 IE8 firefox16.0 chrome22.0 現在、IE9 ではデバッグできるものが手元にないので試してみます。後で解決するように。
注:
1 jquery が必要です。jquery-1.8.2 は開発とテストに使用されます。他のバージョンは小さい必要があります。 2ヘッダー部分は 3 に記述する必要があります 幅を制限せずにテーブルの幅に自動的に適応します (スクロールバーの幅が 20px であると仮定すると、実際の幅はテーブルの幅 20px になります)
4 マルチサポート行ヘッダー固定
5 通常、表のすべての列が表示され、水平スクロールバーはなく、垂直スクロールバーの機能のみが必要です。このプラグインは、幅が制限された条件下でのテーブル ヘッダーの固定をサポートします。
6 幅と高さを制限した条件でテーブルヘッダーを固定する場合、テーブルヘッダーの固定機能は CSS で実装する必要があり、若干のちらつきが発生します。 7 table、th、td の境界線が考慮されています。 -width は異なる値に設定されています
8 ヘッダーにバインドされているイベントが考慮されており、元のヘッダーにバインドされているイベントは引き続き保持されます
特別な注意:
IE の閲覧 ブラウザ下では、テーブル内の td と th のボーダー幅を必ず設定してください。そうしないと、列幅が正しく設定されず、ヘッダー部分とデータ部分が正しく設定されません。
使用法:
高さの制限: $('#table1').fixHeader({height:100}); 高さと幅の制限: $('#table3').fixHeader({ height:100,width:500});
以下は完全なコードです
コードをコピーします
/*!
* fixHeader 1.0.0
* Copyright 2012 chokobo
*
* テーブルヘッダーを修正
*
* 注意： IE で th,id border-width を設定
*
* テスト済みブラウザ: IE7 IE8 firefox16.0 chrome22.0
*/
(function( $, unknown ) {
$.fn.fixHeader = function(options){
var デフォルト = {
幅: '',
高さ: ''
};
オプション = $.extend({}, デフォルト, オプション); >var elem = this;
if(options.height == ''){
return this;
}
var thead = elem.find('thead') ;
var fixTable = elem.clone().empty().removeAttr('id');
//頭のデフォルトの背景色を設定します
if(fixTable.css('background-color') == '透明' || fixTable.css('背景色') == ''){
fixTable.css('背景色', '#fff');
.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()colBorderWidthcolBorderWidth/2);//IE7??
}
}
});
//ヘッドを作成します
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);
これを返します;
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 スクロールバー幅 = 20;
if(options.width == ''){
tbodyWrapper.css({
'width': (elemWidthscrollBarWidth) '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 を使用して $("#div").chromatable({width: "100%", height: "100%",scrolling: "yes"})
table には < が含まれている必要があります; thead>label
パラメータ: なし。
*/
(function($){
$.chromatable = {
defaults: {
width: "900px", //展開するコンテナの幅を設定します
height : "300px", //拡張するコンテナの高さを設定します
scrolling: "yes" //はい、IE スクロール バーとともにスライドします。いいえはページ上で固定され、コンテナ スクロール バーのみがスライドします
}
} ;
$.fn.chromatable = function(options){
var options = $.extend({}, $.chromatable.defaults, options);
return this.each(function) () {
var $divObj = $(this);
var $tableObj = $divObj.find("テーブル");
var $uniqueID = $tableObj.attr("ID")ラッパー" );
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("< ;table class= '" $class "' id='" $uniqueID "' style='position:absolute;top:" トップ "px;left:" left "px;' width='" $tableWidth "' border= '0 ' cellpacing ='0' cellpadding='0'>" $("#" $tableObj.attr("ID")).find("thead").html() " < /table>");
$.each($("#" $tableObj.attr("ID")).find("thead th") {
$("#" $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"),
}); {
var 要素 = $("#" uniqueID);
$(window).scroll(function(){
var top = $("#" tableId).offset().top;
var スクロール = $(this).scrollTop();
if (スクロール > トップ) {
if (window.XMLHttpRequest) {
element.css({
position) : " 固定" ,
トップ: 0
}); else {
element.css({
トップ: スクロール
}); }else {
element.css({
位置: "絶対",
トップ: トップ
});
function raiseEvent(tableId, uniqueID)
{
var 要素 = $("#" uniqueID);
$(window).resize(function(){
var top = $ (" #" tableId).offset().top;
var スクロール = $(this).scrollTop();
if (スクロール > トップ) {
if (window.XMLHttpRequest) {
element.css({
position: "固定",
top: 0
});
} else {
element.css({
top: スクロール)
} );
}
}else {
element.css({
位置: "絶対",
上: 最上位
}); 🎜> });
}
})(jQuery);