Home Web Front-end JS Tutorial Fixed header (introduction to implementation principles using jquery)_jquery

Fixed header (introduction to implementation principles using jquery)_jquery

May 16, 2016 pm 05:48 PM
fixed Header

Table header fixing should be a frequently used function. I referred to several examples on the Internet, but the display is not perfect in several commonly used browsers. Moreover, many of them are based on fixed tables. When coding, you need to write a fixed header, which makes it difficult to start with dynamically generated tables with unknown number of columns. Moreover, most of the examples can only meet the limit of height. If the width is limited, there will be no help when a horizontal scroll bar appears.

My purpose is to find the table that exists on the page like jquery-ui, and call a method to achieve the function of fixing the header. Taking advantage of the opportunity to learn to write jquery plug-ins, I wrote a plug-in with a fixed header.
The usage is the same as the plug-in in jquery-ui. It only requires one line of code $('#table1').fixHeader({height:100});

The following browser tests passed
IE7 IE8 firefox16.0 chrome22.0
It is currently known that IE9 cannot align the following. I do not have IE9 on hand to debug at the moment. I will try to solve it later.

Note:
1 jquery is required, jquery-1.8.2 is used for development and testing, other versions should be small
2 The <tr> in the header part needs to be written In <thead>
3 Automatically adapt to the table width without limiting the width (assuming the scroll bar width is 20px, the actual width is the table width 20px)
4 Support multi-line header fixing
5 Normally All columns of the table are displayed, there is no horizontal scroll bar, and only the function of the vertical scroll bar is required. This plug-in supports table header fixing under limited width conditions.
6 When the table header is fixed under the condition of limiting the width and height, the table header fixing function cannot be realized simply through css. It needs to be implemented through js, and there will be slight flickering.
7 The borders of table, th, and td have been considered. -width is set to different values
8 The events bound in the header have been taken into account, and the events bound in the original header are still retained

Special attention: IE browsing Under the browser, be sure to set the border-width of td and th in the table, otherwise the column width cannot be set correctly, and the header and data parts will be misaligned
Usage:
Limit height: $('#table1'). fixHeader({height:100});
Limit height and width: $('#table3').fixHeader({height:100,width:500});

The following is the complete code

Copy code The code is as follows:

/*!
* 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('<div class="body-wrapper"></div>').parent();
var tableWrapper = tbodyWrapper.wrap('<div class="table-wrapper" style="position:relative;"/>').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 );

复制代码 代码如下:

/*
Function: Fixed meter header.
Use the ID of the container to set $("#div").chromatable({width: "100%", height: "100%", scrolling: "yes"})
table must contain < ; thead>label
Parameters: None.
*/
(function($){
$.chromatable = {
defaults: {
width: "900px", //Set the container width to be expanded
height : "300px", //Set the container height, to be extended
scrolling: "yes" //yes slides with the IE scroll bar, no is fixed on the page and only the container scroll bar slides
}
} ;
$.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("<table class= '" $class "' id='" $uniqueID "' style='position:absolute;top:" top "px;left:" left "px;' width='" $tableWidth "' border='0 ' cellspacing ='0' cellpadding='0'><thead>" $("#" $tableObj.attr("ID")).find("thead").html() "</thead> < /table>");

$.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);

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to set a computer lock screen wallpaper that will not change How to set a computer lock screen wallpaper that will not change Jan 17, 2024 pm 03:24 PM

How to set a computer lock screen wallpaper that will not change

Convert VirtualBox fixed disk to dynamic disk and vice versa Convert VirtualBox fixed disk to dynamic disk and vice versa Mar 25, 2024 am 09:36 AM

Convert VirtualBox fixed disk to dynamic disk and vice versa

How to keep the widgets panel always visible in Windows 11 How to keep the widgets panel always visible in Windows 11 Aug 13, 2023 pm 07:13 PM

How to keep the widgets panel always visible in Windows 11

How to pin computer notes to the desktop How to pin computer notes to the desktop Feb 15, 2024 pm 04:00 PM

How to pin computer notes to the desktop

How to solve the problem that the win11 start menu cannot be fixed How to solve the problem that the win11 start menu cannot be fixed Jan 06, 2024 pm 08:09 PM

How to solve the problem that the win11 start menu cannot be fixed

Solution to Vue navigation bar fixed problem Solution to Vue navigation bar fixed problem Jun 30, 2023 am 10:52 AM

Solution to Vue navigation bar fixed problem

Analysis of limitations and reasons of fixed positioning in HTML Analysis of limitations and reasons of fixed positioning in HTML Dec 28, 2023 am 08:20 AM

Analysis of limitations and reasons of fixed positioning in HTML

How to choose a suitable and efficient fixed positioning architecture How to choose a suitable and efficient fixed positioning architecture Dec 28, 2023 pm 01:27 PM

How to choose a suitable and efficient fixed positioning architecture

See all articles