<![CDATA[
<p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>contextMenu 를 사용한 우클릭 메뉴(서브메뉴)화면 만들기</b></span></p><p> </p><p><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html lang="ko"> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><head> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta charset="UTF-8"> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta name="viewport" content="width=device-width, initial-scale=1.0"> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <title>Context Menu 만들기</title> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- jquery 불러오기 --> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <script src="<a href="https://code.jquery.com/jquery-3.5.1.min.js" target="_blank" class="ke-link">https://code.jquery.com/jquery-3.5.1.min.js</a>" </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- 우클릭시 contextmenu 만들기 --> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        href="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css" target="_blank" class="ke-link">https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css</a>"> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js" target="_blank" class="ke-link">https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js</a>"></script> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js" target="_blank" class="ke-link">https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js</a>"></script> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><body> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- 활성화 비활성화 조절 버튼 --> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <button id="actvie">활성화</button> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <button id="disable">비활성화</button> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- id 접근 요소 --> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <div id="id_context_menu" </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        style="position: relative; top:20px; left:100px; width:200px; height:200px; background-color: black;"> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        asdsadasdasd </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- class 접근 요소 --> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <div class="class_context_menu" </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        style="position: relative; margin-top:10px; top:20px; left:100px; width:200px; height:200px; background-color: red;"> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        asdsadasdasd </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <script> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        $(function () { </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            $.contextMenu({ </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                // 선택자 어떤 dom의 요소를 선택할 것인가? </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                selector: '#id_context_menu', </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                // 클래스 접근 방법 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                // selector: '.class_context_menu',  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                // 어느 위치에 우클릭 menu를 생성할 것인가? , 없을 경우 클릭한 위치에서 생성 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                appendTo: '.class_context_menu', </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                // 마우스가 생성하는 dom 위치에 있을 때, accesskey 누른 경우 메뉴 화면 생성 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                //accesskey: 'a',  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                callback: function (key, options) { </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    // 메뉴 아이템을 클릭한 경우, callback 이벤트 동작 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    console.log(arguments); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    console.log("Clicked on " + key + " on element id " + options.$trigger.attr("id") + " on element name " + options.$trigger.attr("name")); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    console.log("options", options); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    // return false; // 리턴값이 false인 경우, 메뉴가 사라지지 않음  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                }, </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                // 메뉴 생성 트리거 요소 [right , left , hover, touchstart, none] </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                trigger: 'hover', </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                items: { </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    "edit": { </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        // 아이템 표현되는 이름  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        name: "Edit", </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        // fontawsome을 통한 아이콘 표현  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        icon: "edit", </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        // 버튼 클릭시 콜백 받는 부분 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        callback: (itemKey, opt, e) => { </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            console.log(arguments); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            console.log("edit 아이템 클릭"); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        } </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    }, </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    "cut": { name: "Cut", icon: "cut" }, </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    copy: { name: "Copy", icon: "copy" }, </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    "paste": { name: "Paste", icon: "paste" }, </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    "delete": { name: "Delete", icon: "delete" }, </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    "sep1": "---------", </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    // 아이템 안에 아이템을 만드는 경우 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    "fold1": { </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        "name": "Sub group", </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        "items": { </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            "fold1-key1": { "name": "Foo bar" }, </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            "fold2": { </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                                "name": "Sub group 2", </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                                "items": { </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                                    "fold2-key1": { "name": "alpha" }, </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                                    "fold2-key2": { "name": "bravo" }, </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                                    "fold2-key3": { "name": "charlie" } </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                                } </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            }, </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            "fold1-key3": { "name": "delta" } </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        } </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    }, </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    "sep2": "---------", </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    "quit": { </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        name: "Quit", icon: function () { </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            return 'context-menu-icon context-menu-icon-quit'; </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        } </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    } </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                }, </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                events: { </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    show: function (options) { </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        // S.fn.init [div#id_context_menu] 메뉴화면  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        console.log(this); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        // 메뉴 생성 시 클래스 추가  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        this.addClass('currently-showing-menu'); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        var open = confirm‎('메뉴 화면을 생성하시겠습니까?' + "\n dom 선택자 : " + options.selector + '?'); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        return open === true ? true : false; </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    }, </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    hide: function (options) { </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        // 메뉴 화면이 사라질떄 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        var hide = confirm‎('메뉴 화면을 숨기겠습니까?' + "\n dom 선택자 : " + options.selector + '?'); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        return hide === true ? true : false; </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    }, </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    activated: function (options) { </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        // 메뉴화면이 활성화 되었을 때  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        var activated = confirm‎('메뉴 활성화 하겠습니까?' + "\n dom 선택자 : " + options.selector + '?'); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        return activated === true ? true : false; </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    } </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                } </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            }); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            $('#actvie').on('click', function (e) { </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                console.log(this); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                var $trigger = $('#id_context_menu'); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                $trigger.contextMenu(true); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            }); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            $('#disable').on('click', function (e) { </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                console.log(this); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                var $trigger = $('#id_context_menu'); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                $trigger.contextMenu(false); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            }); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        }); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </script> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html></b></span></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p><a href="https://minaminaworld.tistory.com/175" target="_blank" class="ke-link">https://minaminaworld.tistory.com/175</a></p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b><b>contextMenu 를 사용한 우클릭 메뉴(서브메뉴)화면 만들기</b></b></span></p>
<!-- -->
]]>
카페 게시글
◈─---… HTML 파일방
contextMenu 를 사용한 우클릭 메뉴(서브메뉴)화면 만들기
gyun님
추천 0
조회 1
23.03.25 14:26
댓글 2
북마크 번역하기 공유하기 기능 더보기
다음검색
첫댓글 <!------------------------------------------------------------------------------------------------
■ 우측 최근 본 상품 ■
※ 해당영역을 사용을 원치 않을 경우, @import < 의 @를 삭제해주시기 바랍니다. ( 추후 재사용시에는 @다시 붙여서 사용 )
※ 앞에 @가 있는 파일들을 수정하실 경우, 마우스 오버시 보이는 파일열기 버튼 클릭 후 나타나는 창에서 수정하시면 됩니다.
------------------------------------------------------------------------------------------------->
<!------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------->