Re-write of basic functionality in jQuery plugin authoring pattern.
Signed-off-by: Mark Malek <markmmalek@me.com>master
Mark Malek
parent
907df8438d
commit
e384e8920f
|
|
@ -12,130 +12,76 @@
|
|||
* Released: TBA
|
||||
*/
|
||||
|
||||
/***********/
|
||||
/* CONTENT */
|
||||
/***********/
|
||||
/* @group Reset */
|
||||
|
||||
.fht_fixed_header table thead tr th, .fht_fixed_header table thead tr th a, .fht_table_body table thead tr th, .fht_table_body table thead tr th a, .fht_table_body table tbody tr td, table thead tr th, table thead tr th a, table tbody tr td, table tbody tr td a {
|
||||
font-size:14px;
|
||||
color:#222;
|
||||
font-weight:normal;
|
||||
text-decoration:none;
|
||||
font-family:Helvetica, Arial, "sans-sarif";
|
||||
}
|
||||
|
||||
.fht_fixed_header table thead tr th, .fht_fixed_header table thead tr th a, .fht_fixed_header table thead tr th a:hover, .fht_table_body table thead tr th, .fht_table_body table thead tr th a, .fht_table_body table thead tr th a:hover, table thead tr th, table thead tr th a {
|
||||
font-size:16px;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.fht_fixed_header table thead tr th a:hover, .fht_table_body table thead tr th a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.fht_fixed_header table thead tr th, .fht_table_body table thead tr th, table thead tr th {
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.fht_table_body table tbody tr td, table tbody tr td {
|
||||
font-family:Helvetica, Arial, "Sans-serif";
|
||||
font-weight:normal;
|
||||
color:#666;
|
||||
}
|
||||
|
||||
.fht_table_body table tbody tr td, table tbody tr td {
|
||||
font-size:14px;
|
||||
color: #476788 !important;
|
||||
}
|
||||
|
||||
/***************/
|
||||
/* END CONTENT */
|
||||
/***************/
|
||||
|
||||
|
||||
/**********/
|
||||
/* LAYOUT */
|
||||
/**********/
|
||||
|
||||
.fht_table_body tbody, .fht_table_body thead, table tbody, table thead {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.fht_loader {
|
||||
display:block;
|
||||
position:absolute;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background:#fff url('images/loadingdata.png') no-repeat center center;
|
||||
z-index:1;
|
||||
top:0;
|
||||
left:0;
|
||||
border:1px solid #333;
|
||||
}
|
||||
|
||||
.fht_fixed_header {
|
||||
width:100%;
|
||||
overflow: hidden;
|
||||
position:relative;
|
||||
background:#476788;
|
||||
}
|
||||
|
||||
.fht_table_body {
|
||||
position: relative;
|
||||
float: left;
|
||||
table.fht-table,
|
||||
table.fht-table thead,
|
||||
table.fht-table tfoot,
|
||||
table.fht-table tbody,
|
||||
table.fht-table tr,
|
||||
table.fht-table th,
|
||||
table.fht-table td,
|
||||
.fht-table-head table,
|
||||
.fht-table-head table thead,
|
||||
.fht-table-head table tr,
|
||||
.fht-table-head table th {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y:auto;
|
||||
overflow-x:auto;
|
||||
background:#476788;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.fht_table_body th, .fht_table_body td, .fht_fixed_header th, th, td {
|
||||
border-left: 1px solid #bfd0e2;
|
||||
border-right: 1px solid #bfd0e2;
|
||||
table.fht-table,
|
||||
.fht-table-head table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.fht_fixed_header th.first-cell, th.first-cell {
|
||||
border-left-color: #476788;
|
||||
/* @end */
|
||||
|
||||
/* @group Content */
|
||||
|
||||
div.fht-table-wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fht_fixed_header th.last-cell, th.last-cell {
|
||||
border-right-color: #476788;
|
||||
div.fht-tbody {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.fht_table_body table thead tr th, .fht_table_body table tbody tr td, .fht_fixed_header table thead tr th, table thead tr th, table tbody tr td {
|
||||
padding: 4px 10px;
|
||||
line-height: 18px;
|
||||
table.fht-table,
|
||||
.fht-table-head table {
|
||||
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
|
||||
font-size: 1em;
|
||||
color: #050505;
|
||||
}
|
||||
|
||||
.fht_table_body table thead tr th, .fht_fixed_header table thead tr th, table thead tr th {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
table.fht-table th .fht-th {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.fht_table_body table tbody tr, table tbody tr {
|
||||
background:#dfe9f4;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
.fht_table_body table tbody tr.odd, table tbody tr.odd {
|
||||
background:#d5e2f0;
|
||||
/* @group Layout */
|
||||
|
||||
}
|
||||
|
||||
.fht_table_body th a, .fht_fixed_header th a, table thead th a {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.empty-cell {
|
||||
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
/**************/
|
||||
/* END LAYOUT */
|
||||
/**************/
|
||||
table.fht-table thead tr th,
|
||||
table.fht-table tfoot tr td,
|
||||
.fht-table-head table thead tr th {
|
||||
/* appearance */
|
||||
background: #a7b2d8;
|
||||
|
||||
/* size */
|
||||
padding: 5px;
|
||||
|
||||
/* text */
|
||||
text-align: left;
|
||||
}
|
||||
table.fht-table tbody tr td {
|
||||
/* size */
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
// jQuery Plugin FixedHeaderTable
|
||||
// A pluging for adding fixed headers to HTML tables
|
||||
// version 1.2, April 30th, 2011
|
||||
// by Mark Malek
|
||||
|
||||
(function($) {
|
||||
|
||||
// here it goes!
|
||||
$.fn.fixedHeaderTable = function(method) {
|
||||
|
||||
// plugin's default options
|
||||
var defaults = {
|
||||
|
||||
loader: false,
|
||||
hasFooter: false,
|
||||
colBorder: true,
|
||||
cloneHeaderToFooter: false,
|
||||
autoResize: false,
|
||||
onComplete: null
|
||||
|
||||
}
|
||||
|
||||
// this will hold the merged default and user-provided properties
|
||||
// you will have to access the plugin's properties through this object!
|
||||
// settings.propertyName
|
||||
var settings = {}
|
||||
|
||||
// public methods
|
||||
// to keep the $.fn namespace uncluttered, collect all of the plugin's methods in an object literal and call
|
||||
// them by passing the string name of the method to the plugin
|
||||
//
|
||||
// public methods can be called as
|
||||
// $(selector).pluginName('methodName', arg1, arg2, ... argn)
|
||||
// where "pluginName" is the name of your plugin and "methodName" is the name of a function available in
|
||||
// the "methods" object below; arg1 ... argn are arguments to be passed to the method
|
||||
//
|
||||
// or, from within the plugin itself, as
|
||||
// methods.methodName(arg1, arg2, ... argn)
|
||||
// where "methodName" is the name of a function available in the "methods" object below
|
||||
var methods = {
|
||||
|
||||
// this the constructor method that gets called when the object is created
|
||||
init : function(options) {
|
||||
|
||||
// the plugin's final properties are the merged default and user-provided properties (if any)
|
||||
// this has the advantage of not polluting the defaults, making the same instace re-usable with
|
||||
// new options; thanks to Steven Black for suggesting this
|
||||
settings = $.extend({}, defaults, options);
|
||||
|
||||
// iterate through all the DOM elements we are attaching the plugin to
|
||||
return this.each(function() {
|
||||
|
||||
var $self = $(this), // reference the jQuery version of the current DOM element
|
||||
self = this; // reference to the actual DOM element
|
||||
|
||||
if ( helpers._isTable($self) ) {
|
||||
methods.setup.apply(this, Array.prototype.slice.call(arguments, 1));
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
// a public method. for demonstration purposes only - remove it!
|
||||
setup: function() {
|
||||
var $self = $(this),
|
||||
self = this,
|
||||
$thead = $self.find('thead'),
|
||||
$tfoot = $self.find('tfoot'),
|
||||
$tbody = $self.find('tbody'),
|
||||
$wrapper,
|
||||
$divHead,
|
||||
$divFoot,
|
||||
$divBody,
|
||||
$fixedHeadRow,
|
||||
$temp;
|
||||
|
||||
if ( !$self.closest('.fht-table-wrapper').length ) {
|
||||
$self.addClass('fht-table');
|
||||
$self.wrap('<div class="fht-table-wrapper"></div>');
|
||||
}
|
||||
|
||||
$wrapper = $self.closest('.fht-table-wrapper');
|
||||
|
||||
$wrapper.css({
|
||||
width: $self.outerWidth(true),
|
||||
height: settings.tableHeight
|
||||
});
|
||||
|
||||
if ( !$self.hasClass('fht-table-init') ) {
|
||||
|
||||
$self.wrap('<div class="fht-tbody"></div>');
|
||||
|
||||
var tbodyHeight = $wrapper.height() - $thead.outerHeight(true) - $tfoot.outerHeight(true);
|
||||
$divBody = $self.closest('.fht-tbody');
|
||||
$divBody.css({
|
||||
'height': tbodyHeight
|
||||
});
|
||||
|
||||
var tableProps = helpers._getTableProps($self);
|
||||
|
||||
$divHead = $('<div class="fht-head"><table class="fht-table"></table></div>').prependTo($wrapper);
|
||||
|
||||
$thead.clone().appendTo($divHead.find('table'));
|
||||
|
||||
$divHead.find('thead th').each(function(index) {
|
||||
$temp = $('<div class="fht-th"></div>').appendTo($(this));
|
||||
|
||||
$temp.css({
|
||||
'width': tableProps.thead[index]
|
||||
});
|
||||
});
|
||||
|
||||
$self.css({
|
||||
'margin-top': -$thead.outerHeight(true)
|
||||
});
|
||||
|
||||
if ( settings.hasFooter && $self.find('tfoot').length ) {
|
||||
$divFoot = $('<div class="tfoot"><table class="fht-table"></table></div>').appendTo($wrapper);
|
||||
|
||||
$tfoot.appendTo($divFoot.find('table'));
|
||||
|
||||
$divFoot.find('tfoot td').each(function(index) {
|
||||
$temp = $('<div class="fht-td"></div>').appendTo($(this));
|
||||
|
||||
$temp.css({
|
||||
'width': tableProps.thead[index]
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
} else {
|
||||
return self;
|
||||
}
|
||||
},
|
||||
|
||||
show: function() {
|
||||
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// private methods
|
||||
// these methods can be called only from within the plugin
|
||||
//
|
||||
// private methods can be called as
|
||||
// helpers.methodName(arg1, arg2, ... argn)
|
||||
// where "methodName" is the name of a function available in the "helpers" object below; arg1 ... argn are
|
||||
// arguments to be passed to the method
|
||||
var helpers = {
|
||||
|
||||
// a private method. for demonstration purposes only - remove it!
|
||||
_isTable: function( $obj ) {
|
||||
var $self = $obj,
|
||||
hasTable = $self.is('table'),
|
||||
hasThead = $self.find('thead').length > 0,
|
||||
hasTbody = $self.find('tbody').length > 0;
|
||||
|
||||
if ( hasTable && hasThead && hasTbody ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
},
|
||||
|
||||
_getTableProps: function( $obj ) {
|
||||
var tableProp = {
|
||||
thead: {},
|
||||
tbody: {}
|
||||
};
|
||||
|
||||
$obj.find('thead th').each(function(index) {
|
||||
tableProp.thead[index] = $(this).width();
|
||||
});
|
||||
|
||||
$obj.find('tbody tr:first-child td').each(function(index) {
|
||||
tableProp.tbody[index] = $(this).width();
|
||||
});
|
||||
|
||||
return tableProp;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// if a method as the given argument exists
|
||||
if (methods[method]) {
|
||||
|
||||
// call the respective method
|
||||
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
||||
|
||||
// if an object is given as method OR nothing is given as argument
|
||||
} else if (typeof method === 'object' || !method) {
|
||||
|
||||
// call the initialization method
|
||||
return methods.init.apply(this, arguments);
|
||||
|
||||
// otherwise
|
||||
} else {
|
||||
|
||||
// trigger an error
|
||||
$.error( 'Method "' + method + '" does not exist in fixedHeaderTable plugin!');
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
Loading…
Reference in New Issue