不知道怎么删除掉了。
赵鹏
5 years ago
parent
b9b7aefab5
commit
20405b38ef
@ -0,0 +1,260 @@
|
||||
"use_strict";
|
||||
|
||||
var Shira;
|
||||
(function (Shira, $) {
|
||||
(function (ScrollFix) {
|
||||
/**
|
||||
* @constructor
|
||||
*
|
||||
* @param {HTMLElement} element DOM element that is going to be fixed
|
||||
* @param {Object} options option map
|
||||
*/
|
||||
ScrollFix.Watcher = function (element, options) {
|
||||
this.element = element;
|
||||
this.options = $.extend({}, ScrollFix.Watcher.defaults, options);
|
||||
|
||||
$(element).data('shira.scrollfix', this);
|
||||
};
|
||||
|
||||
ScrollFix.Watcher.defaults = {
|
||||
fixClass: 'scroll-fix',
|
||||
fixTop: 0,
|
||||
fixOffset: 0,
|
||||
unfixOffset: 0,
|
||||
onUpdateFixed: null,
|
||||
syncSize: true,
|
||||
syncPosition: true,
|
||||
style: true
|
||||
};
|
||||
|
||||
ScrollFix.Watcher.prototype = {
|
||||
element: null,
|
||||
substitute: null,
|
||||
options: null,
|
||||
fixed: false,
|
||||
attached: false,
|
||||
|
||||
/**
|
||||
* Get absolute X position of the given element
|
||||
*
|
||||
* @private
|
||||
*
|
||||
* @param {HTMLElement} elem
|
||||
* @returns {Number}
|
||||
*/
|
||||
getElementX: function (elem) {
|
||||
var x = 0;
|
||||
do x += elem.offsetLeft;
|
||||
while (elem = elem.offsetParent);
|
||||
|
||||
return x;
|
||||
},
|
||||
|
||||
/**
|
||||
* Get absolute Y position of the given element
|
||||
*
|
||||
* @private
|
||||
*
|
||||
* @param {HTMLElement} elem
|
||||
* @returns {Number}
|
||||
*/
|
||||
getElementY: function (elem) {
|
||||
var y = 0;
|
||||
do y += elem.offsetTop;
|
||||
while (elem = elem.offsetParent);
|
||||
|
||||
return y;
|
||||
},
|
||||
|
||||
/**
|
||||
* Fix the element
|
||||
*/
|
||||
fix: function () {
|
||||
if (!this.fixed) {
|
||||
// create the substitute
|
||||
this.substitute = $(this.element.cloneNode(false))
|
||||
.css('visibility', 'hidden')
|
||||
.height($(this.element).height())
|
||||
.insertAfter(this.element)[0]
|
||||
;
|
||||
|
||||
// add class and styles
|
||||
if (this.options.style) {
|
||||
$(this.element)
|
||||
.css('position', 'fixed')
|
||||
.css('top', this.options.fixTop + 'px')
|
||||
;
|
||||
}
|
||||
$(this.element).addClass(this.options.fixClass);
|
||||
|
||||
// update state
|
||||
this.fixed = true;
|
||||
|
||||
// dispatch event
|
||||
this.dispatchEvent('fixed');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Update the fixed element
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
updateFixed: function () {
|
||||
// size
|
||||
if (this.options.syncSize) {
|
||||
$(this.element)
|
||||
.width($(this.substitute).width())
|
||||
;
|
||||
}
|
||||
|
||||
// position
|
||||
if (this.options.syncPosition) {
|
||||
var currentScrollLeft = $(window).scrollLeft();
|
||||
var substituteLeftOffset = this.getElementX(this.substitute);
|
||||
|
||||
$(this.element).css('left', (substituteLeftOffset - currentScrollLeft) + 'px');
|
||||
}
|
||||
|
||||
// callback (deprecated)
|
||||
if (null !== this.options.onUpdateFixed) {
|
||||
this.options.onUpdateFixed(this);
|
||||
}
|
||||
|
||||
// dispatch event
|
||||
this.dispatchEvent('update');
|
||||
},
|
||||
|
||||
/**
|
||||
* Unfix the element
|
||||
*/
|
||||
unfix: function () {
|
||||
if (this.fixed) {
|
||||
// remove the substitute
|
||||
$(this.substitute).remove();
|
||||
this.substitute = null;
|
||||
|
||||
// reset applied styles and remove class
|
||||
var cssReset = {};
|
||||
if (this.options.syncPosition) {
|
||||
cssReset.left = '';
|
||||
}
|
||||
if (this.options.syncSize) {
|
||||
cssReset.width = '';
|
||||
}
|
||||
if (this.options.style) {
|
||||
cssReset.position = '';
|
||||
cssReset.top = '';
|
||||
}
|
||||
$(this.element)
|
||||
.css(cssReset)
|
||||
.removeClass(this.options.fixClass)
|
||||
;
|
||||
|
||||
// update state
|
||||
this.fixed = false;
|
||||
|
||||
// dispatch event
|
||||
this.dispatchEvent('unfixed');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Attach the watcher
|
||||
*/
|
||||
attach: function () {
|
||||
if (!this.attached) {
|
||||
var that = this;
|
||||
|
||||
this.updateEventHandler = function () {
|
||||
that.pulse();
|
||||
};
|
||||
|
||||
$(window)
|
||||
.scroll(this.updateEventHandler)
|
||||
.resize(this.updateEventHandler)
|
||||
;
|
||||
|
||||
this.attached = true;
|
||||
this.pulse();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Detach the watcher
|
||||
*/
|
||||
detach: function () {
|
||||
if (this.attached) {
|
||||
this.unfix();
|
||||
|
||||
$(window)
|
||||
.unbind('scroll', this.updateEventHandler)
|
||||
.unbind('resize', this.updateEventHandler)
|
||||
;
|
||||
|
||||
this.attached = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Pulse the watcher
|
||||
*/
|
||||
pulse: function () {
|
||||
var currentScroll = $(window).scrollTop();
|
||||
|
||||
if (this.fixed) {
|
||||
if (
|
||||
currentScroll <= this.getElementY(this.substitute) + this.options.unfixOffset
|
||||
&& !this.dispatchEvent('unfix').isDefaultPrevented()
|
||||
) {
|
||||
this.unfix();
|
||||
} else {
|
||||
this.updateFixed();
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
currentScroll >= this.getElementY(this.element) + this.options.fixOffset
|
||||
&& !this.dispatchEvent('fix').isDefaultPrevented()
|
||||
) {
|
||||
this.fix();
|
||||
this.updateFixed();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Dispatch an event
|
||||
*
|
||||
* @private
|
||||
*
|
||||
* @param {String} type
|
||||
* @returns {jQuery.Event}
|
||||
*/
|
||||
dispatchEvent: function (type) {
|
||||
var event = new $.Event(type + '.shira.scrollfix', {
|
||||
watcher: this
|
||||
});
|
||||
|
||||
$(this.element).trigger(event);
|
||||
|
||||
return event;
|
||||
}
|
||||
};
|
||||
|
||||
// jQuery methods
|
||||
|
||||
/**
|
||||
* Attach a watcher to the matched element
|
||||
*
|
||||
* @param {Object} options watcher option map
|
||||
* @returns {jQuery}
|
||||
*/
|
||||
$.fn.scrollFix = function (options) {
|
||||
if (this.length > 0) {
|
||||
new ScrollFix.Watcher(this[0], options).attach();
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
})(Shira.ScrollFix || (Shira.ScrollFix = {}));
|
||||
})(Shira || (Shira = {}), jQuery);
|
||||
@ -0,0 +1,291 @@
|
||||
/*! table.scrollfix.js 1.0.0
|
||||
* https://github.com/doska80/ScrollTableFixed
|
||||
* http://responsive-nav.com
|
||||
*
|
||||
* Copyright (c) 2015 @doska80
|
||||
* Available under the MIT license
|
||||
*/
|
||||
|
||||
var fsca;
|
||||
var doit;
|
||||
var time = 0;
|
||||
(function (fsca, $) {
|
||||
(function (ScrollTableFix) {
|
||||
|
||||
ScrollTableFix = function (element, options) {
|
||||
this.options = $.extend({}, ScrollTableFix.defaults, options);
|
||||
this.options.table = element;
|
||||
this.options.uniqueId = guid();
|
||||
};
|
||||
|
||||
ScrollTableFix.defaults = {
|
||||
fixHeaderClass: 'scroll-fix',
|
||||
scrollTableClass: 'scroll-table',
|
||||
target: null,
|
||||
table : null,
|
||||
uniqueId : null
|
||||
};
|
||||
|
||||
ScrollTableFix.prototype = {
|
||||
tableHeader: null,
|
||||
tableWidth: null,
|
||||
target_children: null,
|
||||
tr: null,
|
||||
menu : null,
|
||||
color : null,
|
||||
init: function () {
|
||||
if (this.options.table.length) {
|
||||
tableHeader = this.options.table.find("tr:first");
|
||||
color = tableHeader.css('background-color');
|
||||
tableWidth = tableHeader.outerWidth();
|
||||
target_children = tableHeader.children();
|
||||
tr = tableHeader.clone();
|
||||
tr.height(tableHeader.height());
|
||||
tr.attr("class",this.options.table.find("tr:first").attr("class"));
|
||||
tr.attr("style",this.options.table.find("tr:first").attr("style"));
|
||||
this.updateWidth();
|
||||
this.scroll();
|
||||
}
|
||||
this.resize();
|
||||
},
|
||||
|
||||
|
||||
resize: function () {
|
||||
|
||||
var that = this;
|
||||
clearTimeout(doit);
|
||||
doit = setTimeout( function(){
|
||||
return that.resizeEnd();
|
||||
}, 200);
|
||||
|
||||
if (this.options.table.length) {
|
||||
|
||||
var tablePositionLeft = $(document).scrollLeft() - this.options.table.position().left;
|
||||
$(".tableHeaderFixed_" + this.options.uniqueId).css("min-width", this.options.table.outerWidth());
|
||||
$(".tableHeaderFixed_" + this.options.uniqueId).css("max-width", this.options.table.outerWidth());
|
||||
$(".tableHeaderFixed_" + this.options.uniqueId).css("left", (tablePositionLeft * -1) + "px");
|
||||
this.updateWidth();
|
||||
if(typeof menu == 'undefined' || menu == null || menu === 'undefined' || menu.length == 0) return;
|
||||
var menuPosition = menu.offset().top + menu.height();
|
||||
var tablePosition = this.options.table.offset().top;
|
||||
if (tablePosition < menuPosition && ($(document).scrollTop() < (tablePosition + this.options.table.height() - (tableHeader.height() * 2)))) {
|
||||
} else {
|
||||
$(".tableHeaderFixed_" + this.options.uniqueId).remove();
|
||||
}
|
||||
}
|
||||
},
|
||||
resizeEnd : function() {
|
||||
|
||||
this.removeTable();
|
||||
this.scroll();
|
||||
|
||||
if ($(".tableHeaderFixed_" + this.options.uniqueId).length > 0) {
|
||||
$('.menu-app').css("width", $(window).width())
|
||||
}
|
||||
|
||||
$("table[id*='tableHeaderFixed']").hide();
|
||||
setTimeout(function() {
|
||||
$("table[id*='tableHeaderFixed']").css("top", $(".menu-app").first().height());
|
||||
$("table[id*='tableHeaderFixed']").show();
|
||||
}, 500);
|
||||
},
|
||||
updateWidth: function () {
|
||||
if (this.options.table.length) {
|
||||
var widths = [];
|
||||
tableHeader.children("td,th").each(function( index ) {
|
||||
widths.push($(this).css("width"));
|
||||
});
|
||||
tr.children("td,th").each(function( index ) {
|
||||
$(this).css("width", widths[index]);
|
||||
$(this).addClass("cloneCol");
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
scroll: function () {
|
||||
if( $(document).scrollTop() == 0){
|
||||
$(".tableHeaderFixed_" + this.options.uniqueId).remove();
|
||||
return;
|
||||
}
|
||||
if (this.options.table.length) {
|
||||
menu = $("."+this.options.fixHeaderClass);
|
||||
if (menu.length == 0 ) {
|
||||
return
|
||||
}
|
||||
var menuPosition = menu.offset().top + menu.outerHeight();
|
||||
var tablePosition = this.options.table.offset().top;
|
||||
if (tablePosition < menuPosition && ($(document).scrollTop() < (tablePosition + this.options.table.height() - (tableHeader.height() * 2)))) {
|
||||
var tablePositionLeft = $(document).scrollLeft() - this.options.table.position().left
|
||||
$(".tableHeaderFixed_" + this.options.uniqueId).css("left", (tablePositionLeft * -1))
|
||||
if ($(".tableHeaderFixed_" + this.options.uniqueId).length == 0) {
|
||||
var c = this.options.table.attr("class");
|
||||
var style = this.options.table.attr("style");
|
||||
if(style == null){
|
||||
style = "";
|
||||
}
|
||||
|
||||
c = c.replace("table-striped","");
|
||||
var table= "<table id='tableHeaderFixed' class='tableHeaderFixed_"+ this.options.uniqueId +" " + c + "' style='background-color:"+color+" !important;position:fixed;top:"
|
||||
+ menu.outerHeight() + "px;left:" + (tablePositionLeft * -1) + "px;min-width:" + this.options.table.outerWidth() + "px;z-index:9999999999;max-width:" + this.options.table.outerWidth() + "px;"+style+"'>" + tr.html() + "</table>";
|
||||
|
||||
if( this.options.target != null){
|
||||
$("#" + this.options.target).append(table);
|
||||
} else {
|
||||
this.options.table.after(table)
|
||||
}
|
||||
|
||||
$(".tableHeaderFixed_" + this.options.uniqueId).find("tr:first").attr("class",this.options.table.find("tr:first").attr("class"));
|
||||
$(".tableHeaderFixed_" + this.options.uniqueId).find("tr:first").attr("style",this.options.table.find("tr:first").attr("style"));
|
||||
|
||||
var all = $(".selectAll").map(function() {
|
||||
return this;
|
||||
}).get();
|
||||
|
||||
if(all.length > 0){
|
||||
if($(all[0]).children().is(":checked")){
|
||||
$(".tableHeaderFixed_" + this.options.uniqueId).find(":input:checkbox").attr( 'checked', '' );
|
||||
} else {
|
||||
$(".tableHeaderFixed_" + this.options.uniqueId).find(":input:checkbox").removeAttr('checked');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
} else {
|
||||
var tablePositionLeft = $(document).scrollLeft() - this.options.table.position().left
|
||||
$(".tableHeaderFixed_" + this.options.uniqueId).css("min-width", this.options.table.outerWidth());
|
||||
$(".tableHeaderFixed_" + this.options.uniqueId).css("max-width", this.options.table.outerWidth());
|
||||
var menuPosition = menu.offset().top + menu.outerHeight();
|
||||
var tablePosition = this.options.table.offset().top;
|
||||
if (tablePosition < menuPosition && ($(document).scrollTop() < (tablePosition + this.options.table.height() - (tableHeader.height() * 2)))) {
|
||||
} else {
|
||||
$(".tableHeaderFixed_" + this.options.uniqueId).remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scrollTable: function () {
|
||||
if (this.options.table.length > 0 && $(".tableHeaderFixed_" + this.options.uniqueId).length > 0) {
|
||||
var tablePositionLeft = $(document).scrollLeft() - this.options.table.position().left
|
||||
$(".tableHeaderFixed_" + this.options.uniqueId).css("left", (tablePositionLeft * -1))
|
||||
}
|
||||
},
|
||||
removeTable: function () {
|
||||
$(".tableHeaderFixed_" + this.options.uniqueId).remove();
|
||||
},
|
||||
clickTable: function (e) {
|
||||
var d = new Date();
|
||||
var n = d.getTime();
|
||||
if((n - time) < 200) {
|
||||
return;
|
||||
}
|
||||
time = n;
|
||||
if(e.target.tagName != 'INPUT'){
|
||||
var target = null;
|
||||
if (e.target.tagName != "th"){
|
||||
target = $(e.target).closest( "th" );
|
||||
} else {
|
||||
target = e.target;
|
||||
}
|
||||
if($(target).attr('class') == null){
|
||||
return;
|
||||
}
|
||||
var clazz = $(target).attr('class');
|
||||
var arrClass = clazz.split(' ');
|
||||
if(arrClass.length <= 1 || clazz.indexOf("cloneCol") == -1){
|
||||
return;
|
||||
}
|
||||
var field= arrClass[0];
|
||||
var all = $("."+field).map(function() {
|
||||
return this;
|
||||
}).get();
|
||||
|
||||
if(all.length > 0){
|
||||
$(all[0]).click();
|
||||
}
|
||||
} else if($(e.target).is('input:checkbox')){
|
||||
if($(e.target).parent().hasClass("selectAll") && $(e.target).closest( "th" ).hasClass("cloneCol")){
|
||||
var all = $(".selectAll").map(function() {
|
||||
return this;
|
||||
}).get();
|
||||
|
||||
if(all.length > 0){
|
||||
if($(all[0]).children().is(":checked")){
|
||||
$("table[id*='tt'] :input:checkbox").prop( "checked", false);
|
||||
} else {
|
||||
$("table[id*='tt'] :input:checkbox").prop( "checked", true);
|
||||
}
|
||||
e.stopPropagation();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
attach: function () {
|
||||
if (this.attached) {
|
||||
throw new Error('Already attached');
|
||||
}
|
||||
|
||||
var that = this;
|
||||
|
||||
this.updateScrollHandler = function () {
|
||||
that.scroll();
|
||||
};
|
||||
|
||||
this.updaterResizeHandler = function () {
|
||||
that.resize();
|
||||
};
|
||||
|
||||
this.updateScrollTableHandler = function () {
|
||||
that.scrollTable();
|
||||
};
|
||||
this.clickTableHandler = function (e) {
|
||||
that.clickTable(e);
|
||||
};
|
||||
|
||||
$(window)
|
||||
.scroll(this.updateScrollHandler)
|
||||
.resize(this.updaterResizeHandler);
|
||||
|
||||
$("."+this.options.scrollTableClass)
|
||||
.scroll(this.updateScrollTableHandler)
|
||||
.click(this.clickTableHandler);
|
||||
|
||||
this.attached = true;
|
||||
this.init();
|
||||
},
|
||||
|
||||
|
||||
detach: function () {
|
||||
if (!this.attached) {
|
||||
throw new Error('Not attached');
|
||||
}
|
||||
|
||||
$(window)
|
||||
.unbind('scroll', this.updateScrollHandler)
|
||||
.unbind('resize', this.updaterResizeHandler)
|
||||
;
|
||||
|
||||
this.attached = false;
|
||||
}
|
||||
};
|
||||
|
||||
function guid() {
|
||||
function s4() {
|
||||
return Math.floor((1 + Math.random()) * 0x10000)
|
||||
.toString(16)
|
||||
.substring(1);
|
||||
}
|
||||
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
|
||||
s4() + '-' + s4() + s4() + s4();
|
||||
}
|
||||
|
||||
$.fn.headerScrollFix = function (options) {
|
||||
|
||||
$(this).each(function( index ) {
|
||||
new ScrollTableFix($(this), options).attach();
|
||||
});
|
||||
|
||||
return true;
|
||||
};
|
||||
})(fsca.ScrollTableFix || (fsca.ScrollTableFix = {}));
|
||||
})(fsca || (fsca = {}), jQuery);
|
||||
Loading…
Reference in New Issue