# contextMenu를 사용한 우클릭 메뉴(서브 메뉴)화면 만들기

 

# 예시 화면 
(예제 소스가 필요하신 분은 아래에 풀 소스코드 남겨두었습니다.)

 

 

 


# 1. 준비물 - 필요한 jquery 파일들을 불러옵니다.

 <!-- jquery 불러오기 -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <!-- 우클릭시 contextmenu 만들기 -->
    <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>

# 2.  HTML BODY에 contextMenu 만들 div 만들기

<!-- 활성화 비활성화 조절 버튼 -->
    <button id="actvie">활성화</button>
    <button id="disable">비활성화</button>
    <!-- id 접근 요소 -->
    <div id="id_context_menu"
        style="position: relative; top:20px; left:100px; width:200px; height:200px; background-color: black;">
        asdsadasdasd
    </div>

    <!-- class 접근 요소 -->
    <div class="class_context_menu"
        style="position: relative; margin-top:10px; top:20px; left:100px; width:200px; height:200px; background-color: red;">
        asdsadasdasd
    </div>

# 3.  contextMenu 생성 및 옵션값 조절 

 

-  contextMenu dom 선택

 // 선택자 어떤 dom의 요소를 선택할 것인가?
 selector: '#id_context_menu',
 // 클래스 접근 방법
 selector: '.class_context_menu', 

- contextMenu 어느 위치에 생성할 것인가?

 // 어느 위치에 우클릭 menu를 생성할 것인가? , 없을 경우 클릭한 위치에서 생성
 appendTo: '.class_context_menu',

 

 

- contextMenu 항상 클릭시 callback을 받을 것인가?

callback: function (key, options) {
	// 메뉴 아이템을 클릭한 경우, callback 이벤트 동작
	console.log(arguments);
	console.log("Clicked on " + key + " on element id " + options.$trigger.attr("id") + " on element name " + options.$trigger.attr("name"));
	console.log("options", options);
	// return false; // 리턴값이 false인 경우, 메뉴가 사라지지 않음 
},

- contextMenu 위치에 마우스가 있는 경우, 특정 key를 누른 경우, context menu가 생성됨,

// 마우스가 생성하는 dom 위치에 있을 때, accesskey 누른 경우 메뉴 화면 생성
accesskey: 'a', 

- contextMenu 생성될 때, 트리거 요소 

  // 메뉴 생성 트리거 요소 [right , left , hover, touchstart, none]
  trigger: 'hover',  

- contextMenu 메뉴가 생성될때 요소

 

 items: {
                    "edit": { 
                            // 아이템 표현되는 이름 
                            name: "Edit", 
                            // fontawsome을 통한 아이콘 표현 
                            icon: "edit", 
                            // 버튼 클릭시 콜백 받는 부분
                            callback: (itemKey, opt, e) => {
                            console.log(arguments);
                            console.log("edit 아이템 클릭");
                        } 
                    },
                    "cut": { name: "Cut", icon: "cut" },
                    copy: { name: "Copy", icon: "copy" },
                    "paste": { name: "Paste", icon: "paste" },
                    "delete": { name: "Delete", icon: "delete" },
                    "sep1": "---------", // 라인 만들기
                    // 아이템 안에 아이템을 만드는 경우
                    "fold1": {
                        "name": "Sub group",
                        "items": {
                            "fold1-key1": { "name": "Foo bar" },
                            "fold2": {
                                "name": "Sub group 2",
                                "items": {
                                    "fold2-key1": { "name": "alpha" },
                                    "fold2-key2": { "name": "bravo" },
                                    "fold2-key3": { "name": "charlie" }
                                }
                            },
                            "fold1-key3": { "name": "delta" }
                        }
                    },
                    "sep2": "---------", // 라인 만들기
                    "quit": {
                        name: "Quit", icon: function () {
                            return 'context-menu-icon context-menu-icon-quit';
                        }
                    }
                },

- contextMenu 메뉴가 생성될때 요소

  - 메뉴가 생성, 활성화, 사라질 때, 이벤트 발생 

events: {
    show: function (options) {
        // S.fn.init [div#id_context_menu] 메뉴화면 
        console.log(this);

        // 메뉴 생성 시 클래스 추가 
        this.addClass('currently-showing-menu');
        var open = confirm('메뉴 화면을 생성하시겠습니까?' + "\n dom 선택자 : " + options.selector + '?');
        return open === true ? true : false;
    },
    hide: function (options) {
        // 메뉴 화면이 사라질떄
        var hide = confirm('메뉴 화면을 숨기겠습니까?' + "\n dom 선택자 : " + options.selector + '?');
        return hide === true ? true : false;
    },
    activated: function (options) {
        // 메뉴화면이 활성화 되었을 때 
        var activated = confirm('메뉴 활성화 하겠습니까?' + "\n dom 선택자 : " + options.selector + '?');
        return activated === true ? true : false;
    }
}

 

 

# 4.  contextMenu 활성화 비활성화 버튼 요소

$('#actvie').on('click', function (e) {
    console.log(this);
    var $trigger = $('#id_context_menu');
    $trigger.contextMenu(true);
});

$('#disable').on('click', function (e) {
    console.log(this);
    var $trigger = $('#id_context_menu');
    $trigger.contextMenu(false);
});

 

 


# 5.  전체 테스트 코드 

더보기

<!DOCTYPE html>

<html lang="ko">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Context Menu 만들기</title>

 

    <!-- jquery 불러오기 -->

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"

        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

    <!-- 우클릭시 contextmenu 만들기 -->

    <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>

</head>

 

<body>

    <!-- 활성화 비활성화 조절 버튼 -->

    <button id="actvie">활성화</button>

    <button id="disable">비활성화</button>

    <!-- id 접근 요소 -->

    <div id="id_context_menu"

        style="position: relative; top:20px; left:100px; width:200px; height:200px; background-color: black;">

        asdsadasdasd

    </div>

 

    <!-- class 접근 요소 -->

    <div class="class_context_menu"

        style="position: relative; margin-top:10px; top:20px; left:100px; width:200px; height:200px; background-color: red;">

        asdsadasdasd

    </div>

    <script>

        $(function () {

            $.contextMenu({

                // 선택자 어떤 dom의 요소를 선택할 것인가?

                selector: '#id_context_menu',

                // 클래스 접근 방법

                // selector: '.class_context_menu', 

                // 어느 위치에 우클릭 menu를 생성할 것인가? , 없을 경우 클릭한 위치에서 생성

                appendTo: '.class_context_menu',

                // 마우스가 생성하는 dom 위치에 있을 때, accesskey 누른 경우 메뉴 화면 생성

                //accesskey: 'a', 

                callback: function (key, options) {

                    // 메뉴 아이템을 클릭한 경우, callback 이벤트 동작

                    console.log(arguments);

                    console.log("Clicked on " + key + " on element id " + options.$trigger.attr("id"+ " on element name " + options.$trigger.attr("name"));

                    console.log("options", options);

                    // return false; // 리턴값이 false인 경우, 메뉴가 사라지지 않음 

                },

                // 메뉴 생성 트리거 요소 [right , left , hover, touchstart, none]

                trigger: 'hover',

                items: {

                    "edit": {

                        // 아이템 표현되는 이름 

                        name: "Edit",

                        // fontawsome을 통한 아이콘 표현 

                        icon: "edit",

                        // 버튼 클릭시 콜백 받는 부분

                        callback: (itemKey, opt, e) => {

                            console.log(arguments);

                            console.log("edit 아이템 클릭");

                        }

                    },

                    "cut": { name: "Cut"icon: "cut" },

                    copy: { name: "Copy"icon: "copy" },

                    "paste": { name: "Paste"icon: "paste" },

                    "delete": { name: "Delete"icon: "delete" },

                    "sep1": "---------",

                    // 아이템 안에 아이템을 만드는 경우

                    "fold1": {

                        "name": "Sub group",

                        "items": {

                            "fold1-key1": { "name": "Foo bar" },

                            "fold2": {

                                "name": "Sub group 2",

                                "items": {

                                    "fold2-key1": { "name": "alpha" },

                                    "fold2-key2": { "name": "bravo" },

                                    "fold2-key3": { "name": "charlie" }

                                }

                            },

                            "fold1-key3": { "name": "delta" }

                        }

                    },

                    "sep2": "---------",

                    "quit": {

                        name: "Quit"icon: function () {

                            return 'context-menu-icon context-menu-icon-quit';

                        }

                    }

                },

                events: {

                    show: function (options) {

                        // S.fn.init [div#id_context_menu] 메뉴화면 

                        console.log(this);

 

                        // 메뉴 생성 시 클래스 추가 

                        this.addClass('currently-showing-menu');

                        var open = confirm('메뉴 화면을 생성하시겠습니까?' + "\n dom 선택자 : " + options.selector + '?');

                        return open === true ? true : false;

                    },

                    hide: function (options) {

                        // 메뉴 화면이 사라질떄

                        var hide = confirm('메뉴 화면을 숨기겠습니까?' + "\n dom 선택자 : " + options.selector + '?');

                        return hide === true ? true : false;

                    },

                    activated: function (options) {

                        // 메뉴화면이 활성화 되었을 때 

                        var activated = confirm('메뉴 활성화 하겠습니까?' + "\n dom 선택자 : " + options.selector + '?');

                        return activated === true ? true : false;

                    }

                }

            });

 

            $('#actvie').on('click'function (e) {

                console.log(this);

                var $trigger = $('#id_context_menu');

                $trigger.contextMenu(true);

            });

 

            $('#disable').on('click'function (e) {

                console.log(this);

                var $trigger = $('#id_context_menu');

                $trigger.contextMenu(false);

            });

 

        });

    </script>

</body>

 

</html>

블로그 이미지

미나미나미

,