context menu 구현

그냥 대충 만들까 싶다가도 괜히 더 잘 만들고 싶이서 삽질한 context menu.

jquery에 있는 menu기능을 이용하고 싶었지만 그냥 떠있고 좀 더 디테일한 구현을 위해서는 plugin을 써야해서

plugin따위는 개나줘버리는 나는 일일히 찾아서 내가 원하는 대로 구현 완료 ㅠㅠ

* jqueryui와 bootstrap을 이용

1. context menu가 뜨고자 하는 곳에 bind를 걸어준다.

$("#div_index").bind("contextmenu", function(e){
 $("#menu").css({
  display:"block",
  left: e.offsetX,
  top: e.offsetY
 });
...
});

2. context menu의 이벤트 처리 함수도 생성한다 

 

$("#menu").on("click", "a", function(e){
...
});

 

3. 메뉴가 아닌 부분을 클릭했을 때 닫아주자.

$("#div_index").mouseup( function (e){
 var container = $("#menu");
 if( container.has(e.target).length == 0 ){
  container.hide();
 }
}); //이 메소드는 레이어창을 띄우고 그 외 부분을 클릭했을 때 창을 닫게 하는 방법으로도 유용

4. menu를 그려주자

  
추가
  
삭제
  

  
닫기
 


 

   
안녕하세요
   
반갑습니다
 

5. 그 외 추가적으로..

- 오른쪽 버튼 클릭 시에 context menu의 위치가 div 위에서와 div 위의 element 위와 차이가 있다.

해당 문제를 해결하기 위해 bind 함수에서 e.target.id 로 내가 클릭한 곳의 id를 가져와서 분기처리 후에 left, top을 따로 설정해준다.

: div ) left:e.offsetX, top:e.offsetY

: element ) left:e.pageX - $(this).offset.left, top:e.pageY - $(this).offset.top

- 특정메뉴를 사용하고 싶지 않을 경우 .addClass("ui-state-disabled")를 이용하였다.

: click 이벤트에서 $(this).hasClass("ui-state-disabled")를 반환받아서 return false 처리.