아무래도 소스를 공개해 드리는 게 좋을 것 같아서 요로코롬 올려 드립니다.
다음의 로직으로 구현되었습니다.
바보님 뿐 아니라, JavaScript 초보자 분들에게도 도움이 많이 되었으면 좋겠습니다. ^^;;
//글 이동시 보여 줄 패널
var announceDiv = $('<div id="ou_shortcut_announce">').css({
position:'absolute',
top:'0', left:'0', right:'0', bottom:'0',
background:'rgba(15,15,15,0.8)',
zIndex:1000
}).hide().appendTo('body');
//패널 내용 (이전 글로 이동합니다, 다음 글로 이동합니다..)
var announceTextDiv = $('<div id="ou_shortcut_announce_text">').css({
position:'absolute',
top:'0px',
left:'0px',
width:'300px',
height:'120px',
textAlign:'center',
fontWeight:'bold',
lineHeight:'120px',
borderRadius:'8px',
background:'rgb(225,225,225',
boxShadow:'5px 5px 50px rgba(0,0,0,0.8)'
}).appendTo(announceDiv);
//패널을 표시함
function ouShortcutShowAnnounce(msg, autoHide) {
//console.log(Math.max(0, (($(window).height() - $('#ou_shortcut_announce').outerHeight()) / 2) + $(window).scrollTop()) + "px");
announceTextDiv.text(msg)
.css({
'top': Math.max(0, (($(window).height() - announceTextDiv.outerHeight()) / 2) + $(window).scrollTop()) + "px",
'left': Math.max(0, (($(window).width() - announceTextDiv.outerWidth()) / 2) + $(window).scrollLeft()) + "px"
});
announceDiv.height($(document).height()).show({
duration:0,
always: function() {
if(!! autoHide) {
$(this).delay(1000).fadeOut();
}
}
});
}
//URL 파라미터를 Object로 변환
var strParams = location.search.substring(1);
var objParam = strParams ? JSON.parse('{"' + strParams.replace(/&/g, '","').replace(/=/g,'":"') + '"}', function(key, value) { return key===""?value:decodeURIComponent(value) }):{};
//게시물 목록
var contList = $('table.table_list > tbody > tr.view');
var contOffset = contList.eq(0).index(); //공지사항은 빼야 함..
//게시물 목록 중 현재 보고 있는 글에 해당하는 녀석.
var viewPos = $('table.table_list > tbody > tr.view_now').index();
var currentPos = viewPos < 0 ? -1 : viewPos - contOffset; //공지사항은 빼야 함..
//파라미터에서 현재 페이지 가져 옴.
var currentPage = objParam.page ? Number(objParam.page) : 1;
//목록 URL 생성
var listParam = {};
['table','kind','member_kind','mn'].forEach(function(key) {
if(!! objParam[key]) listParam[key] = objParam[key];
});
var currentUrl = window.location.pathname;
var currentFileName = currentUrl.substring(currentUrl.lastIndexOf('/')+1);
if(currentFileName == 'write.php') { //글쓰기 화면에서는 Alt+S 를 누르면 "확인" 버튼을 클릭함
var onKeyDown = function(e) {
//console.log(e.altKey, e.which);
if(e.altKey && e.which == 83) {
e.preventDefault();
$('input[name=confirm_btn]').click();
return false;
}
};
var onKeyPress = function(e) { //OSX Yosemitte 에서는 Alt+S 를 누르면 추가 이벤트가 발생하는 버그가 있어서..
if(e.altKey && e.which == 223) {
return false;
}
};
$(document).keydown(onKeyDown).keypress(onKeyPress);
$('iframe').contents().keydown(onKeyDown).keypress(onKeyPress);
} else {
$(document).keypress(function(e) {
if(e.altKey && e.which == 223) return false;
});
$(document).keydown(function(e) {
//댓글을 쓰고 Alt+S 누르면 확인 버튼 누름.
if($(e.target).is('input, textarea')) {
if($(e.target).is('#memoText') && e.altKey && e.which == 83) {
$('#memo_insert_submit_image').click();
return false;
}
return;
}
//단축키 지정
switch(e.which) {
case 65 : //'A' : 윗글로 이동
if(currentPos > 0) {
ouShortcutShowAnnounce('윗글로 이동');
window.location.href = contList.eq(currentPos - 1).find('td.subject > a').attr('href');
} else {
ouShortcutShowAnnounce('윗글이 없습니다', true);
}
break;
case 68 : //'D' : 아랫글로 이동
if(currentPos < contList.length - 1) {
ouShortcutShowAnnounce('아랫글로 이동');
window.location.href = contList.eq(currentPos + 1).find('td.subject > a').attr('href');
} else {
ouShortcutShowAnnounce('아랫글이 없습니다', true);
}
break;
case 87 : //'W' : 이전 페이지로 이동
if(currentPage > 1) {
ouShortcutShowAnnounce('이전 페이지로 이동');
listParam.page = currentPage - 1;
window.location.href = 'list.php?' + $.param(listParam);
} else {
ouShortcutShowAnnounce('첫페이지입니다', true);
}
break;
case 83 : //'S' : 다음 페이지로 이동
ouShortcutShowAnnounce('다음 페이지로 이동');
listParam.page = currentPage + 1;
window.location.href = 'list.php?' + $.param(listParam);
break;
default:
break;
}
});
}
글쓰기