웹마스터 팁
XE코어 수정없이 원하는 기능 넣기
2014.03.22 15:26
php를 이용한다면 XE의 addon, module trigger 기능을 사용하면 되지만
javascript의 경우는 마땅치 않아서 jquery를 사용할 수 있는 사용자에게 유용한 팁이지 않을까해서 올려봅니다.
묻고 답하기에 이와 유사한 질의들이 있고해서 답변겸 올려봅니다.
예제로 닉네임 클릭시 나오는 팝업창을 XE코어 수정없이 변경해 보도록 하겠습니다.
(function($) { var displayPopupMenuByCore = window.XE.displayPopupMenu; window.XE.displayPopupMenu = function( ret_obj, response_tags, params ) { // Log the fact that we are calling our override.// console.log( ret_obj ); // Execute the original method.// displayPopupMenuByCore.apply( this, arguments ); var target_srl = params.target_srl; var menu_id = params.menu_id; var menus = ret_obj.menus; var html = ""; if(this.loaded_popup_menus[menu_id]) { html = this.loaded_popup_menus[menu_id]; } else { if(menus) { var item = menus.item; if(typeof(item.length)=='undefined' || item.length<1) item = new Array(item); if(item.length) { for(var i=0;i<item.length;i++) { var url = item[i].url; var str = item[i].str; var icon = item[i].icon; var target = item[i].target; var styleText = ""; var click_str = ""; /* if(icon) styleText = " style=\"background-image:url('"+icon+"')\" "; */ switch(target) { case "popup" : click_str = 'onclick="popopen(this.href, \''+target+'\'); return false;"'; break; case "javascript" : click_str = 'onclick="'+url+'; return false; "'; url='#'; break; default : click_str = 'target="_self"'; break; } html += '<li '+styleText+'><a href="'+url+'" '+click_str+'>'+str+'</a></li> '; } } } this.loaded_popup_menus[menu_id] = html; } /* 레이어 출력 */ if(html) { var area = $('#popup_menu_area').html('<ul>'+html+'</ul>'); var areaOffset = {top:params.page_y, left:params.page_x}; if(area.outerHeight()+areaOffset.top > $(window).height()+$(window).scrollTop()) areaOffset.top = $(window).height() - area.outerHeight() + $(window).scrollTop(); if(area.outerWidth()+areaOffset.left > $(window).width()+$(window).scrollLeft()) areaOffset.left = $(window).width() - area.outerWidth() + $(window).scrollLeft(); area.css({ top:areaOffset.top, left:areaOffset.left }).show().focus(); } }}) (jQuery); |
위의 코드중에
var displayPopupMenuByCore = window.XE.displayPopupMenu;
기존 XE코어 ./common/js/common.js에 있는 window.XE.displayPopupMenu 원래 함수를 displayPopupMenuByCore 에 저장시키는 것입니다.
이것은 추후 원래함수를 호출할 경우가 있을때 사용하기 위한 것입니다.
그다음에 코어와 똑같은 함수를 만들어서 원하는 기능을 함수내에 넣으시면 됩니다.
window.XE.displayPopupMenu = function( ret_obj, response_tags, params ) {
.
.
내용
.
.
}
예제에 포함된 내용은 단순히 링크 클릭시 target="_blank" 를 target="_self" 로 바꾸어주는 기능 입니다.
사용은 레이아웃 제일 하단에 아래코드를 넣어주면 됩니다.(이유는 코어의 script들이 먼저 로딩된후에 불러와야 하기 때문입니다.)
<load target="./member_control.js" type="body" />
팝업메뉴가 안뜨게 하고 싶다면
window.XE.displayPopupMenu = function( ret_obj, response_tags, params ) {
return;
}
jquery를 공부하시면서 XE코어의 jquery기능을 원하시는 기능으로 코어수정 없이 대체해 보시는것도 좋을것 같습니다. ^^
오~ 이런 방법도 있군요.