暂无描述

jquery.stickytableheaders.js 8.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. /*! Copyright (c) 2011 by Jonas Mosbech - https://github.com/jmosbech/StickyTableHeaders
  2. MIT license info: https://github.com/jmosbech/StickyTableHeaders/blob/master/license.txt */
  3. ;(function ($, window, undefined) {
  4. 'use strict';
  5. var name = 'stickyTableHeaders',
  6. id = 0,
  7. defaults = {
  8. fixedOffset: 0,
  9. leftOffset: 0,
  10. marginTop: 0,
  11. scrollableArea: window
  12. };
  13. function Plugin (el, options) {
  14. // To avoid scope issues, use 'base' instead of 'this'
  15. // to reference this class from internal events and functions.
  16. var base = this;
  17. // Access to jQuery and DOM versions of element
  18. base.$el = $(el);
  19. base.el = el;
  20. base.id = id++;
  21. base.$window = $(window);
  22. base.$document = $(document);
  23. // Listen for destroyed, call teardown
  24. base.$el.bind('destroyed',
  25. $.proxy(base.teardown, base));
  26. // Cache DOM refs for performance reasons
  27. base.$clonedHeader = null;
  28. base.$originalHeader = null;
  29. // Keep track of state
  30. base.isSticky = false;
  31. base.hasBeenSticky = false;
  32. base.leftOffset = null;
  33. base.topOffset = null;
  34. base.init = function () {
  35. base.$el.each(function () {
  36. var $this = $(this);
  37. // remove padding on <table> to fix issue #7
  38. $this.css('padding', 0);
  39. base.$originalHeader = $('thead:first', this);
  40. base.$clonedHeader = base.$originalHeader.clone();
  41. $this.trigger('clonedHeader.' + name, [base.$clonedHeader]);
  42. base.$clonedHeader.addClass('tableFloatingHeader');
  43. base.$clonedHeader.css('display', 'none');
  44. base.$originalHeader.addClass('tableFloatingHeaderOriginal');
  45. base.$originalHeader.after(base.$clonedHeader);
  46. base.$printStyle = $('<style type="text/css" media="print">' +
  47. '.tableFloatingHeader{display:none !important;}' +
  48. '.tableFloatingHeaderOriginal{position:static !important;}' +
  49. '</style>');
  50. $('head').append(base.$printStyle);
  51. });
  52. base.setOptions(options);
  53. base.updateWidth();
  54. base.toggleHeaders();
  55. base.bind();
  56. };
  57. base.destroy = function (){
  58. base.$el.unbind('destroyed', base.teardown);
  59. base.teardown();
  60. };
  61. base.teardown = function(){
  62. if (base.isSticky) {
  63. base.$originalHeader.css('position', 'static');
  64. }
  65. $.removeData(base.el, 'plugin_' + name);
  66. base.unbind();
  67. base.$clonedHeader.remove();
  68. base.$originalHeader.removeClass('tableFloatingHeaderOriginal');
  69. base.$originalHeader.css('visibility', 'visible');
  70. base.$printStyle.remove();
  71. base.el = null;
  72. base.$el = null;
  73. };
  74. base.bind = function(){
  75. base.$scrollableArea.on('scroll.' + name, base.toggleHeaders);
  76. if (!base.isWindowScrolling) {
  77. base.$window.on('scroll.' + name + base.id, base.setPositionValues);
  78. base.$window.on('resize.' + name + base.id, base.toggleHeaders);
  79. }
  80. base.$scrollableArea.on('resize.' + name, base.toggleHeaders);
  81. base.$scrollableArea.on('resize.' + name, base.updateWidth);
  82. };
  83. base.unbind = function(){
  84. // unbind window events by specifying handle so we don't remove too much
  85. base.$scrollableArea.off('.' + name, base.toggleHeaders);
  86. if (!base.isWindowScrolling) {
  87. base.$window.off('.' + name + base.id, base.setPositionValues);
  88. base.$window.off('.' + name + base.id, base.toggleHeaders);
  89. }
  90. base.$scrollableArea.off('.' + name, base.updateWidth);
  91. };
  92. base.toggleHeaders = function () {
  93. if (base.$el) {
  94. base.$el.each(function () {
  95. var $this = $(this),
  96. newLeft,
  97. newTopOffset = base.isWindowScrolling ? (
  98. isNaN(base.options.fixedOffset) ?
  99. base.options.fixedOffset.outerHeight() :
  100. base.options.fixedOffset
  101. ) :
  102. base.$scrollableArea.offset().top + (!isNaN(base.options.fixedOffset) ? base.options.fixedOffset : 0),
  103. offset = $this.offset(),
  104. scrollTop = base.$scrollableArea.scrollTop() + newTopOffset,
  105. scrollLeft = base.$scrollableArea.scrollLeft(),
  106. scrolledPastTop = base.isWindowScrolling ?
  107. scrollTop > offset.top :
  108. newTopOffset > offset.top,
  109. notScrolledPastBottom = (base.isWindowScrolling ? scrollTop : 0) <
  110. (offset.top + $this.height() - base.$clonedHeader.height() - (base.isWindowScrolling ? 0 : newTopOffset));
  111. if (scrolledPastTop && notScrolledPastBottom) {
  112. newLeft = offset.left - scrollLeft + base.options.leftOffset;
  113. base.$originalHeader.css({
  114. 'position': 'fixed',
  115. 'margin-top': base.options.marginTop,
  116. 'left': newLeft,
  117. 'background':'#ffffff',
  118. 'z-index': 3 // #18: opacity bug
  119. });
  120. base.leftOffset = newLeft;
  121. base.topOffset = newTopOffset;
  122. base.$clonedHeader.css('display', '');
  123. if (!base.isSticky) {
  124. base.isSticky = true;
  125. // make sure the width is correct: the user might have resized the browser while in static mode
  126. base.updateWidth();
  127. }
  128. base.setPositionValues();
  129. } else if (base.isSticky) {
  130. base.$originalHeader.css('position', 'static');
  131. base.$clonedHeader.css('display', 'none');
  132. base.isSticky = false;
  133. base.resetWidth($('td,th', base.$clonedHeader), $('td,th', base.$originalHeader));
  134. }
  135. });
  136. }
  137. };
  138. base.setPositionValues = function () {
  139. var winScrollTop = base.$window.scrollTop(),
  140. winScrollLeft = base.$window.scrollLeft();
  141. if (!base.isSticky ||
  142. winScrollTop < 0 || winScrollTop + base.$window.height() > base.$document.height() ||
  143. winScrollLeft < 0 || winScrollLeft + base.$window.width() > base.$document.width()) {
  144. return;
  145. }
  146. base.$originalHeader.css({
  147. 'top': base.topOffset - (base.isWindowScrolling ? 0 : winScrollTop),
  148. 'left': base.leftOffset - (base.isWindowScrolling ? 0 : winScrollLeft)
  149. });
  150. };
  151. base.updateWidth = function () {
  152. if (!base.isSticky) {
  153. return;
  154. }
  155. // Copy cell widths from clone
  156. if (!base.$originalHeaderCells) {
  157. base.$originalHeaderCells = $('th,td', base.$originalHeader);
  158. }
  159. if (!base.$clonedHeaderCells) {
  160. base.$clonedHeaderCells = $('th,td', base.$clonedHeader);
  161. }
  162. var cellWidths = base.getWidth(base.$clonedHeaderCells);
  163. base.setWidth(cellWidths, base.$clonedHeaderCells, base.$originalHeaderCells);
  164. // Copy row width from whole table
  165. base.$originalHeader.css('width', base.$clonedHeader.width());
  166. };
  167. base.getWidth = function ($clonedHeaders) {
  168. var widths = [];
  169. $clonedHeaders.each(function (index) {
  170. var width, $this = $(this);
  171. if ($this.css('box-sizing') === 'border-box') {
  172. var boundingClientRect = $this[0].getBoundingClientRect();
  173. if(boundingClientRect.width) {
  174. width = boundingClientRect.width; // #39: border-box bug
  175. } else {
  176. width = boundingClientRect.right - boundingClientRect.left; // ie8 bug: getBoundingClientRect() does not have a width property
  177. }
  178. } else {
  179. var $origTh = $('th', base.$originalHeader);
  180. if ($origTh.css('border-collapse') === 'collapse') {
  181. if (window.getComputedStyle) {
  182. width = parseFloat(window.getComputedStyle(this, null).width);
  183. } else {
  184. // ie8 only
  185. var leftPadding = parseFloat($this.css('padding-left'));
  186. var rightPadding = parseFloat($this.css('padding-right'));
  187. // Needs more investigation - this is assuming constant border around this cell and it's neighbours.
  188. var border = parseFloat($this.css('border-width'));
  189. width = $this.outerWidth() - leftPadding - rightPadding - border;
  190. }
  191. } else {
  192. width = $this.width();
  193. }
  194. }
  195. widths[index] = width;
  196. });
  197. return widths;
  198. };
  199. base.setWidth = function (widths, $clonedHeaders, $origHeaders) {
  200. $clonedHeaders.each(function (index) {
  201. var width = widths[index];
  202. $origHeaders.eq(index).css({
  203. 'min-width': width,
  204. 'max-width': width
  205. });
  206. });
  207. };
  208. base.resetWidth = function ($clonedHeaders, $origHeaders) {
  209. $clonedHeaders.each(function (index) {
  210. var $this = $(this);
  211. $origHeaders.eq(index).css({
  212. 'min-width': $this.css('min-width'),
  213. 'max-width': $this.css('max-width')
  214. });
  215. });
  216. };
  217. base.setOptions = function (options) {
  218. base.options = $.extend({}, defaults, options);
  219. base.$scrollableArea = $(base.options.scrollableArea);
  220. base.isWindowScrolling = base.$scrollableArea[0] === window;
  221. };
  222. base.updateOptions = function (options) {
  223. base.setOptions(options);
  224. // scrollableArea might have changed
  225. base.unbind();
  226. base.bind();
  227. base.updateWidth();
  228. base.toggleHeaders();
  229. };
  230. // Run initializer
  231. base.init();
  232. }
  233. // A plugin wrapper around the constructor,
  234. // preventing against multiple instantiations
  235. $.fn[name] = function ( options ) {
  236. return this.each(function () {
  237. var instance = $.data(this, 'plugin_' + name);
  238. if (instance) {
  239. if (typeof options === 'string') {
  240. instance[options].apply(instance);
  241. } else {
  242. instance.updateOptions(options);
  243. }
  244. } else if(options !== 'destroy') {
  245. $.data(this, 'plugin_' + name, new Plugin( this, options ));
  246. }
  247. });
  248. };
  249. })(jQuery, window);