용테크
[jQuery] hover Event 본문
프로젝트에서 사용했던 Kendo Chart의 hover이벤트를 직접 만들어보았다.
hover 되었을 때, 그리드의 x,y좌표를 계산하여 두 좌표가 교차되어 만날 수 있도록 특정 색으로 focus를 주고
hidden처리되어있는 div요소에 데이터를 바인딩 후 display 하는 기능이다.
프로젝트 오픈이 얼마 남지 않은 시점에서 해당 기능을 개발한 터라 하드코딩 요소도 들어가 있고 이것저것 엉망일 테지만, 추후 다시 사용할 일이 있을 수도 있으니.. 정리해둔다.
function matrixGridInit(data) {
var mgTarget = $('.bmp-idea-main-matrix-grid td');
var lsite;
var tsite;
mgTarget.hover(function(e) {
if (this.className != 'bmp-idea-main-matrix-grid') {
var index = this.cellIndex;
try {
$this.findName('matrixPopup').tool().setDisplayMode('inline-block');
var leftSite;
try {
leftSite = $(this.parentNode)[0].children[0].getAttribute('style').split('/resource/bmp/MN_')[1].split('2.png')[0]; //좌측 사이트 가져오기..이렇게까지해야하나..
} catch (er) {
leftSite = $(this.parentNode)[0].children[0].getAttribute('style').split('/resource/bmp/M_')[1].split('.png')[0];
}
lsite = leftSite;
$($(this.parentNode)[0].children[0]).css('background', 'url(/resource/bmp/M_' + leftSite + '.png)50% 50% no-repeat ');
var topSite;
try {
topSite = this.parentNode.parentNode.children[index - 1].children[0].getAttribute('style').split('/resource/bmp/MN_')[1].split('2.png')[0];
} catch (ee) {
topSite = this.parentNode.parentNode.children[index - 1].children[0].getAttribute('style').split('/resource/bmp/M_')[1].split('.png')[0];
}
tsite = topSite;
var t = $($('div[ux-name="matrixGrid"] thead th')[index]);
t.css('background', 'url(/resource/bmp/M_' + topSite + '.png)50% 50% no-repeat ');
$(fromSite).css('background', 'url(/resource/bmp/M_' + leftSite + '.png) 50% 50% no-repeat');
$(toSite).css('background', 'url(/resource/bmp/M_' + topSite + '.png) 50% 50% no-repeat');
if (this.offsetLeft > 236)
$this.findName('matrixPopup').tool().setLeftPositionValue(this.offsetLeft - 200 + "px");
else
$this.findName('matrixPopup').tool().setLeftPositionValue(this.offsetLeft + 45 + "px");
if (this.offsetTop >= 275)
$this.findName('matrixPopup').tool().setTopPositionValue(this.offsetTop - 60 + "px");
else
$this.findName('matrixPopup').tool().setTopPositionValue(this.offsetTop + 70 + "px");
$this.findName('matrixPopup').tool().setDisplayMode('inline-block');
var x = this.cellIndex; //가로
var y = this.parentNode.rowIndex; //세로
var queryIndex = y + 1;
var total = JSON.stringify(data[y - 1]).split('"' + topSite + '":')[1].split(',')[0].replace(/\"/gi, ''); //조회결과
if (spreadTotalType.tool().getValue() == 'MON') {
var monTotal = JSON.stringify(spreadSum[y - 1]).split('"' + topSite + '":')[1].split(',')[0].replace(/\"/gi, ''); //월별 선택시 누계
if (monTotal == ' ' || !monTotal) {
monTotal = '0';
}
if (total == ' ' || !total) {
total = '0';
}
totalSum.tool().setValue(monTotal + ' 건'); //누계건수
monthlySum.tool().setValue(total + '건'); //월별건수
} else {
if (total == ' ' || !total) {
total = '0';
}
totalSum.tool().setValue(total + ' 건'); //누계건수
}
var row = $('.bmp-idea-main-matrix-grid td.bmp-idea-main-matrix-grid');
for (var j = 1; j < x; j++) {
$(row[y - 1].parentNode.cells[j]).css("background", "rgb(202,242,253)"); //그리드 포커스
}
for (var i = 0; i < y; i++) {
$(row[i].parentNode.cells[x]).css("background", "rgb(202,242,253)"); //그리드 포커스
}
if (spreadTotalType.tool().getValue() == 'MON')
$(this).css('background', '#819cfc');
else
$(this).css('background', '#fc84bc');
$(this).css('color', 'white');
} catch (e) {
}
}
}, function() {
var index = this.cellIndex;
var leftSite;
try {
leftSite = $(this.parentNode)[0].children[0].getAttribute('style').split('/resource/bmp/MN_')[1].split('2.png')[0]; //좌측 사이트 가져오기..이렇게까지해야하나..
} catch (er) {
leftSite = $(this.parentNode)[0].children[0].getAttribute('style').split('/resource/bmp/M_')[1].split('.png')[0];
}
$($(this.parentNode)[0].children[0]).css('background', 'url(/resource/bmp/MN_' + leftSite + '2.png)50% 50% no-repeat ');
var topSite;
try {
topSite = this.parentNode.parentNode.children[index - 1].children[0].getAttribute('style').split('/resource/bmp/MN_')[1].split('2.png')[0];
} catch (ee) {
topSite = this.parentNode.parentNode.children[index - 1].children[0].getAttribute('style').split('/resource/bmp/M_')[1].split('.png')[0];
}
tsite = topSite;
var t = $($('div[ux-name="matrixGrid"] thead th')[index]);
t.css('background', 'url(/resource/bmp/MN_' + topSite + '.png)50% 50% no-repeat ');
$this.findName('matrixPopup').tool().setDisplayMode('none');
//$('div[ux-name="matrixPopup"]').hide();
if (this.className == 'bmp-idea-main-matrix-grid k-state-focused') {
return;
}
if (this.className != 'bmp-idea-main-matrix-grid') {
var x = this.cellIndex; //가로
var y = this.parentNode.rowIndex; //세로
var row = $('.bmp-idea-main-matrix-grid td.bmp-idea-main-matrix-grid');
for (var j = 1; j < x; j++) {
if (!row[y - 1].parentNode.cells[j].innerText) {
$(row[y - 1].parentNode.cells[j]).css("background", ""); //행고정 열
} else {
if (spreadTotalType.tool().getValue() == 'MON')
$(row[y - 1].parentNode.cells[j]).css("background", "rgba(117, 146, 255, 0.5)"); //월별 - 파랑
else
$(row[y - 1].parentNode.cells[j]).css("background", "rgba(249, 153, 198, 0.5)"); //누계 - 분홍
}
}
for (var i = 0; i < y; i++) {
if (!row[i].parentNode.cells[x].innerText) {
$(row[i].parentNode.cells[x]).css("background", "");
} else {
if (spreadTotalType.tool().getValue() == 'MON')
$(row[i].parentNode.cells[x]).css("background", "rgba(117, 146, 255, 0.5)");
else
$(row[i].parentNode.cells[x]).css("background", "rgba(249, 153, 198, 0.5)");
}
}
var srow = $('.bmp-idea-main-matrix-grid tr.k-state-selected');
$(srow).removeClass('k-state-selected');
}
$(this).css('color', 'black');
$('td.k-state-focuse').removeClass('k-state-focuse');
});
}
Comments