# 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>
'[javascript] > [jquery]' 카테고리의 다른 글
| [jquery] 웹에디터 썸머노트(SummerNote) 단락(Paragraph) 사용기 & 커스텀 버튼 버전 (0) | 2020.08.30 |
|---|---|
| [jquery] 웹에디터 썸머노트(SummerNote) 커스텀 버튼 (0) | 2020.08.29 |
| [jquery] 웹에디터 플러그인(plugin) 썸머노트(SummerNote) 한글화 사용법 (0) | 2020.08.26 |
| [Jquery] JsonViewer 만들기 JsonView.js 사용법 (JsonViewer) (0) | 2019.10.21 |
| [jquery] 자바스크립트 모든 input값 가져오기 (input selector) (2) | 2018.04.24 |
미나미나미