固定ヘッダー (jquery を使用した実装原理の紹介)_jquery

テーブルヘッダーの固定は頻繁に使用される機能であるはずですが、インターネット上のいくつかの例を参照しましたが、一般的に使用されるいくつかのブラウザーでは表示が完璧ではありません。さらに、それらの多くは固定テーブルに基づいており、コーディング時に固定ヘッダーを記述する必要があるため、列数が不明な動的に生成されたテーブルを開始することが困難になります。さらに、ほとんどの例では高さの制限しか満たせません。幅が制限されていると、水平スクロール バーが表示されても仕方がありません。

私の目的は、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);

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

レポ：チームメイトを復活させる方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

4週間前 By DDD

R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？

4週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7364

15

Java チュートリアル

1628

14

CakePHP チュートリアル

1353

52

Laravel チュートリアル

1265

25

PHP チュートリアル

1214

29

もっと見る