[jQuery] custom contextmenu

웹브라우저에서 마우스 오른쪽 클릭시 나타나는 기본 메뉴 말고 웹페이지 컨텐츠에 맞는 기능을 수행하는 커스텀 메뉴를 만들어야 할 때가 있다.

그럴 경우 jQuery나 JavaScript를 이용해서 contextmenu 이벤트에서 preventDefault를 시전하고 메뉴를 임의로 만들어서 띄워주는 방법이 있다.

하지만 그렇게 할 경우 디자인을 보장할 수 없다.

 

그래서 누군가 만들어 놓은 플러그인을 이용하는게 좋다.

swisnl에서 만든 jQuery contextMenu Plugin 이게 아주 좋아보였다.

 

다음의 간단한 예제를 통해 사용법을 간단히 알아볼 수 있다.

참고로 기본적인 사용법이 아니라 좀더 동적으로 메뉴를 구성하도록 노력했다.

그래서 매우 dynamic items스러운 예제가 될 것 같다.

 

• test 1
• test 2
• test 3

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script>


<ul id="contextMenuTest">
    <li>test 1</li>
    <li>test 2</li>
    <li>test 3</li>
</ul>

<script>
    $(function(){
        $.contextMenu({
            selector: '#contextMenuTest li', 
            build: function ($trigger) {
                
                var options = {
                    items: {
                        "menu 1": {name: "Menu 1"}
                    },
                    callback: function (key, opts, e) {
                        console.log(key);
                        if (key == "edit") {
                            console.log("edit: " + $trigger.text());
                        }

                        if (key == 'quit') return;
                        return false;
                    }
                };
                options.items["edit"] = { 
                    name: "Edit " + $trigger.text() 
                };
                options.items["quit"] = { 
                    name: "Quit", 
                    icon: function () { 
                        return 'context-menu-icon context-menu-icon-quit'; 
                    }
                };
                
                return options;
            }
        });
    });

</script>