반응형
웹 앱에 대한 사용자 지정 마우스 오른쪽 단추 클릭 상황에 맞는 메뉴 만들기
마우스 오른쪽 버튼을 클릭하면 맞춤형 드롭다운 메뉴가 있는 구글 문서나 지도 퀘스트 같은 웹 사이트가 몇 개 있습니다.어떻게 해서든 그들은 브라우저의 드롭다운 메뉴의 동작을 무시하고 이제 그들이 어떻게 하는지 정확하게 확신합니다.이것을 하는 jQuery 플러그인을 찾았지만 몇 가지가 여전히 궁금합니다.
- 이것은 어떻게 작동합니까?브라우저의 드롭다운 메뉴가 실제로 무시되고 있습니까? 아니면 효과가 시뮬레이션된 것입니까?만약 그렇다면, 어떻게?
- 플러그인은 무엇을 추상화합니까?뒤에서 무슨 일이 벌어지고 있는 거지?
- 이것이 이 효과를 얻을 수 있는 유일한 방법입니까?
저는 이 질문이 아주 오래된 것으로 알고 있지만, 그냥 똑같은 문제를 생각해 내 스스로 해결했기 때문에, 혹시 저처럼 구글을 통해 이 문제를 발견하는 사람이 있을까봐 답을 드립니다.저는 @Andrew의 솔루션을 기반으로 했지만 기본적으로 그 이후에 모든 것을 수정했습니다.
편집: 최근에 이것이 얼마나 인기가 많은지를 보고, 저는 윈도우 95보다 덜 2014년처럼 보이게 스타일도 업데이트하기로 결정했습니다.@Quantico와 @Trengot spoted라는 버그를 수정했기 때문에 지금은 더 확실한 답변입니다.
편집 2: StackSnipets는 정말 멋진 새로운 기능이기 때문에 설정했습니다.참고용으로 좋은 jsfiddle을 여기에 남겨둡니다(4번째 패널을 클릭하면 작동합니다).
새 스택 스니펫:
// JAVASCRIPT (jQuery)
// Trigger action when the contexmenu is about to be shown
$(document).bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
// Show contextmenu
$(".custom-menu").finish().toggle(100).
// In the right position (the mouse)
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});
// If the document is clicked somewhere
$(document).bind("mousedown", function (e) {
// If the clicked element is not the menu
if (!$(e.target).parents(".custom-menu").length > 0) {
// Hide it
$(".custom-menu").hide(100);
}
});
// If the menu element is clicked
$(".custom-menu li").click(function(){
// This is the triggered action name
switch($(this).attr("data-action")) {
// A case for each action. Your actions here
case "first": alert("first"); break;
case "second": alert("second"); break;
case "third": alert("third"); break;
}
// Hide it AFTER the action was triggered
$(".custom-menu").hide(100);
});/* CSS3 */
/* The whole thing */
.custom-menu {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
padding: 0;
}
/* Each of the items in the list */
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
list-style-type: none;
transition: all .3s ease;
user-select: none;
}
.custom-menu li:hover {
background-color: #DEF;
}<!-- HTML -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<ul class='custom-menu'>
<li data-action="first">First thing</li>
<li data-action="second">Second thing</li>
<li data-action="third">Third thing</li>
</ul>
<!-- Not needed, only for making it clickable on StackOverflow -->
Right click me참고: 약간의 작은 버그(커서에서 멀리 떨어지는 등)가 보일 수 있으므로 스택 스니펫보다 웹 페이지와 더 유사하므로 jsfiddle에서 작동하는지 확인하십시오.
Adrian이 말했듯이 플러그인도 똑같이 작동할 것입니다.필요한 기본 부품은 세 가지입니다.
1: 이벤트 처리기:'contextmenu'이벤트:
$(document).bind("contextmenu", function(event) {
event.preventDefault();
$("<div class='custom-menu'>Custom menu</div>")
.appendTo("body")
.css({top: event.pageY + "px", left: event.pageX + "px"});
});
여기서는 메뉴를 표시할 선택기에 이벤트 핸들러를 바인딩할 수 있습니다.저는 전체 문서를 선택했습니다.
2: 이벤트 처리기:'click'event(사용자 정의 메뉴를 닫으려면):
$(document).bind("click", function(event) {
$("div.custom-menu").hide();
});
3: 메뉴의 위치를 제어하는 CSS:
.custom-menu {
z-index:1000;
position: absolute;
background-color:#C0C0C0;
border: 1px solid black;
padding: 2px;
}
CSS의 중요한 것은 다음을 포함하는 것입니다.z-index그리고.position: absolute
이 모든 것을 능청스러운 jQuery 플러그인으로 포장하는 것은 그리 어렵지 않을 것입니다.
간단한 데모는 여기에서 보실 수 있습니다: http://jsfiddle.net/andrewwhitaker/fELma/
<!DOCTYPE html>
<html>
<head>
<title>Right Click</title>
<link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.ui.position.min.js" type="text/javascript"></script>
</head>
<body>
<span class="context-menu-one" style="border:solid 1px black; padding:5px;">Right Click Me</span>
<script type="text/javascript">
$(function() {
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
copy: {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: function(){
return 'context-menu-icon context-menu-icon-quit';
}}
}
});
$('.context-menu-one').on('click', function(e){
console.log('clicked', this);
})
});
</script>
</body>
</html>다음은 javascript에서 오른쪽 클릭 컨텍스트 메뉴의 예입니다.마우스 오른쪽 단추로 클릭한 상황에 맞는 메뉴
상황에 맞는 메뉴 기능을 위해 원시 자바스크립트 코드를 사용했습니다.이것 좀 확인해 주실 수 있나요, 도움이 되길 바랍니다.
라이브 코드:
(function() {
"use strict";
/*********************************************** Context Menu Function Only ********************************/
function clickInsideElement( e, className ) {
var el = e.srcElement || e.target;
if ( el.classList.contains(className) ) {
return el;
} else {
while ( el = el.parentNode ) {
if ( el.classList && el.classList.contains(className) ) {
return el;
}
}
}
return false;
}
function getPosition(e) {
var posx = 0, posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
} else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return {
x: posx,
y: posy
}
}
// Your Menu Class Name
var taskItemClassName = "thumb";
var contextMenuClassName = "context-menu",contextMenuItemClassName = "context-menu__item",contextMenuLinkClassName = "context-menu__link", contextMenuActive = "context-menu--active";
var taskItemInContext, clickCoords, clickCoordsX, clickCoordsY, menu = document.querySelector("#context-menu"), menuItems = menu.querySelectorAll(".context-menu__item");
var menuState = 0, menuWidth, menuHeight, menuPosition, menuPositionX, menuPositionY, windowWidth, windowHeight;
function initMenuFunction() {
contextListener();
clickListener();
keyupListener();
resizeListener();
}
/**
* Listens for contextmenu events.
*/
function contextListener() {
document.addEventListener( "contextmenu", function(e) {
taskItemInContext = clickInsideElement( e, taskItemClassName );
if ( taskItemInContext ) {
e.preventDefault();
toggleMenuOn();
positionMenu(e);
} else {
taskItemInContext = null;
toggleMenuOff();
}
});
}
/**
* Listens for click events.
*/
function clickListener() {
document.addEventListener( "click", function(e) {
var clickeElIsLink = clickInsideElement( e, contextMenuLinkClassName );
if ( clickeElIsLink ) {
e.preventDefault();
menuItemListener( clickeElIsLink );
} else {
var button = e.which || e.button;
if ( button === 1 ) {
toggleMenuOff();
}
}
});
}
/**
* Listens for keyup events.
*/
function keyupListener() {
window.onkeyup = function(e) {
if ( e.keyCode === 27 ) {
toggleMenuOff();
}
}
}
/**
* Window resize event listener
*/
function resizeListener() {
window.onresize = function(e) {
toggleMenuOff();
};
}
/**
* Turns the custom context menu on.
*/
function toggleMenuOn() {
if ( menuState !== 1 ) {
menuState = 1;
menu.classList.add( contextMenuActive );
}
}
/**
* Turns the custom context menu off.
*/
function toggleMenuOff() {
if ( menuState !== 0 ) {
menuState = 0;
menu.classList.remove( contextMenuActive );
}
}
function positionMenu(e) {
clickCoords = getPosition(e);
clickCoordsX = clickCoords.x;
clickCoordsY = clickCoords.y;
menuWidth = menu.offsetWidth + 4;
menuHeight = menu.offsetHeight + 4;
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
if ( (windowWidth - clickCoordsX) < menuWidth ) {
menu.style.left = (windowWidth - menuWidth)-0 + "px";
} else {
menu.style.left = clickCoordsX-0 + "px";
}
// menu.style.top = clickCoordsY + "px";
if ( Math.abs(windowHeight - clickCoordsY) < menuHeight ) {
menu.style.top = (windowHeight - menuHeight)-0 + "px";
} else {
menu.style.top = clickCoordsY-0 + "px";
}
}
function menuItemListener( link ) {
var menuSelectedPhotoId = taskItemInContext.getAttribute("data-id");
console.log('Your Selected Photo: '+menuSelectedPhotoId)
var moveToAlbumSelectedId = link.getAttribute("data-action");
if(moveToAlbumSelectedId == 'remove'){
console.log('You Clicked the remove button')
}else if(moveToAlbumSelectedId && moveToAlbumSelectedId.length > 7){
console.log('Clicked Album Name: '+moveToAlbumSelectedId);
}
toggleMenuOff();
}
initMenuFunction();
})();/* For Body Padding and content */
body { padding-top: 70px; }
li a { text-decoration: none !important; }
/* Thumbnail only */
.thumb {
margin-bottom: 30px;
}
.thumb:hover a, .thumb:active a, .thumb:focus a {
border: 1px solid purple;
}
/************** For Context menu ***********/
/* context menu */
.context-menu { display: none; position: absolute; z-index: 9999; padding: 12px 0; width: 200px; background-color: #fff; border: solid 1px #dfdfdf; box-shadow: 1px 1px 2px #cfcfcf; }
.context-menu--active { display: block; }
.context-menu__items { list-style: none; margin: 0; padding: 0; }
.context-menu__item { display: block; margin-bottom: 4px; }
.context-menu__item:last-child { margin-bottom: 0; }
.context-menu__link { display: block; padding: 4px 12px; color: #0066aa; text-decoration: none; }
.context-menu__link:hover { color: #fff; background-color: #0066aa; }
.context-menu__items ul { position: absolute; white-space: nowrap; z-index: 1; left: -99999em;}
.context-menu__items > li:hover > ul { left: auto; padding-top: 5px ; min-width: 100%; }
.context-menu__items > li li ul { border-left:1px solid #fff;}
.context-menu__items > li li:hover > ul { left: 100%; top: -1px; }
.context-menu__item ul { background-color: #ffffff; padding: 7px 11px; list-style-type: none; text-decoration: none; margin-left: 40px; }
.page-media .context-menu__items ul li { display: block; }
/************** For Context menu ***********/<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Thumbnail Gallery <small>(Right click to see the context menu)</small></h1>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">
</a>
</div>
</div>
<hr>
</div>
<!-- /.container -->
<!-- / The Context Menu -->
<nav id="context-menu" class="context-menu">
<ul class="context-menu__items">
<li class="context-menu__item">
<a href="#" class="context-menu__link" data-action="Delete This Photo"><i class="fa fa-empire"></i> Delete This Photo</a>
</li>
<li class="context-menu__item">
<a href="#" class="context-menu__link" data-action="Photo Option 2"><i class="fa fa-envira"></i> Photo Option 2</a>
</li>
<li class="context-menu__item">
<a href="#" class="context-menu__link" data-action="Photo Option 3"><i class="fa fa-first-order"></i> Photo Option 3</a>
</li>
<li class="context-menu__item">
<a href="#" class="context-menu__link" data-action="Photo Option 4"><i class="fa fa-gitlab"></i> Photo Option 4</a>
</li>
<li class="context-menu__item">
<a href="#" class="context-menu__link" data-action="Photo Option 5"><i class="fa fa-ioxhost"></i> Photo Option 5</a>
</li>
<li class="context-menu__item">
<a href="#" class="context-menu__link"><i class="fa fa-arrow-right"></i> Add Photo to</a>
<ul>
<li><a href="#!" class="context-menu__link" data-action="album-one"><i class="fa fa-camera-retro"></i> Album One</a></li>
<li><a href="#!" class="context-menu__link" data-action="album-two"><i class="fa fa-camera-retro"></i> Album Two</a></li>
<li><a href="#!" class="context-menu__link" data-action="album-three"><i class="fa fa-camera-retro"></i> Album Three</a></li>
<li><a href="#!" class="context-menu__link" data-action="album-four"><i class="fa fa-camera-retro"></i> Album Four</a></li>
</ul>
</li>
</ul>
</nav>
<!-- End # Context Menu -->
</body>브라우저의 상황에 맞는 메뉴를 재정의하고 있습니다.주요 브라우저에서 기본 컨텍스트 메뉴를 확대할 수 있는 방법은 없습니다.
플러그인이 자체 메뉴를 만들고 있기 때문에 실제로 추상화되는 부분은 브라우저의 상황에 맞는 메뉴 이벤트뿐입니다.플러그인은 구성을 기반으로 HTML 메뉴를 만든 다음 클릭 위치에 해당 컨텐츠를 배치합니다.
예, 이 방법만이 사용자 정의 상황에 맞는 메뉴를 만들 수 있습니다.물론 플러그인에 따라 약간 다른 작업을 수행하지만 브라우저의 이벤트를 무시하고 자신의 html 기반 메뉴를 올바른 위치에 배치합니다.
이 자습서를 보실 수 있습니다: http://www.youtube.com/watch?v=iDyEfKWCzhg 상황에 맞는 메뉴가 처음에는 숨겨져 있고 절대적인 위치에 있는지 확인하세요.이렇게 하면 여러 개의 상황에 맞는 메뉴가 생성되지 않고 상황에 맞는 메뉴가 불필요하게 생성되지 않습니다.해당 페이지에 대한 링크는 YouTube 동영상 설명에 있습니다.
$(document).bind("contextmenu", function(event){
$("#contextmenu").css({"top": event.pageY + "px", "left": event.pageX + "px"}).show();
});
$(document).bind("click", function(){
$("#contextmenu").hide();
});
이것도 꽤 오래된 것으로 알고 있습니다.클릭한 요소를 기반으로 속성이 다른 다른 사이트에 주입하는 컨텍스트 메뉴를 최근에 만들어야 했습니다.
이것은 다소 거칠고, 이를 달성하기 위한 더 나은 방법이 있을 것입니다.여기에 위치한 jQuery Context 메뉴 Library Located Here를 사용합니다.
나는 그것을 만드는 것이 즐거웠고 여러분들이 그것을 조금이라도 활용할 수 있을지도 모른다고 생각했습니다.
음정은 여기 있습니다.누군가에게 도움이 되기를 바랍니다.
$(function() {
function createSomeMenu() {
var all_array = '{';
var x = event.clientX,
y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);
if (elementMouseIsOver.closest('a')) {
all_array += '"Link-Fold": {"name": "Link", "icon": "fa-external-link", "items": {"fold2-key1": {"name": "Open Site in New Tab"}, "fold2-key2": {"name": "Open Site in Split Tab"}, "fold2-key3": {"name": "Copy URL"}}},';
}
if (elementMouseIsOver.closest('img')) {
all_array += '"Image-Fold": {"name": "Image","icon": "fa-picture-o","items": {"fold1-key1": {"name":"Download Image"},"fold1-key2": {"name": "Copy Image Location"},"fold1-key3": {"name": "Go To Image"}}},';
}
all_array += '"copy": {"name": "Copy","icon": "copy"},"paste": {"name": "Paste","icon": "paste"},"edit": {"name": "Edit HTML","icon": "fa-code"}}';
return JSON.parse(all_array);
}
// setup context menu
$.contextMenu({
selector: 'body',
build: function($trigger, e) {
return {
callback: function(key, options) {
var m = "clicked: " + key;
console.log(m);
},
items: createSomeMenu()
};
}
});
});
심플원
- 문서의 아무 곳이나 마우스 오른쪽 단추로 클릭할 때 상황에 맞는 메뉴 표시
- 상황에 맞는 메뉴 내부를 클릭할 때 상황에 맞는 메뉴 숨기기 방지
- 마우스 왼쪽 버튼을 누를 때 컨텍스트 메뉴 닫기
참고: display를 사용하지 마십시오. 아무도 숨김과 표시에 불투명도를 사용하지 않습니다.
var menu= document.querySelector('.context_menu');
document.addEventListener("contextmenu", function(e) {
e.preventDefault();
menu.style.position = 'absolute';
menu.style.left = e.pageX + 'px';
menu.style.top = e.pageY + 'px';
menu.style.opacity = 1;
});
document.addEventListener("click", function(e){
if(e.target.closest('.context_menu'))
return;
menu.style.opacity = 0;
});.context_menu{
width:70px;
background:lightgrey;
padding:5px;
opacity :0;
}
.context_menu div{
margin:5px;
background:grey;
}
.context_menu div:hover{
margin:5px;
background:red;
cursor:pointer;
}<div class="context_menu">
<div>menu 1</div>
<div>menu 2</div>
</div>여분의 CSS
var menu= document.querySelector('.context_menu');
document.addEventListener("contextmenu", function(e) {
e.preventDefault();
menu.style.position = 'absolute';
menu.style.left = e.pageX + 'px';
menu.style.top = e.pageY + 'px';
menu.style.opacity = 1;
});
document.addEventListener("click", function(e){
if(e.target.closest('.context_menu'))
return;
menu.style.opacity = 0;
});.context_menu{
width:120px;
background:white;
border:1px solid lightgrey;
opacity :0;
}
.context_menu div{
padding:5px;
padding-left:15px;
margin:5px 2px;
border-bottom:1px solid lightgrey;
}
.context_menu div:last-child {
border:none;
}
.context_menu div:hover{
background:lightgrey;
cursor:pointer;
}<div class="context_menu">
<div>menu 1</div>
<div>menu 2</div>
<div>menu 3</div>
<div>menu 4</div>
</div>저는 다음과 같이 부트스트랩을 이용한 멋지고 쉬운 구현을 하고 있습니다.
<select class="custom-select" id="list" multiple></select>
<div class="dropdown-menu" id="menu-right-click" style=>
<h6 class="dropdown-header">Actions</h6>
<a class="dropdown-item" href="" onclick="option1();">Option 1</a>
<a class="dropdown-item" href="" onclick="option2();">Option 2</a>
</div>
<script>
$("#menu-right-click").hide();
$(document).on("contextmenu", "#list", function (e) {
$("#menu-right-click")
.css({
position: 'absolute',
left: e.pageX,
top: e.pageY,
display: 'block'
})
return false;
});
function option1() {
// something you want...
$("#menu-right-click").hide();
}
function option2() {
// something else
$("#menu-right-click").hide();
}
</script>
언급URL : https://stackoverflow.com/questions/4495626/making-custom-right-click-context-menus-for-my-web-app
반응형
'programing' 카테고리의 다른 글
| jboss 7 오라클 데이터 소스 구성 (0) | 2023.09.18 |
|---|---|
| HTTP GET 요청에 탭별 데이터 바인딩 (0) | 2023.09.18 |
| Oracle 11g - RegEx로 제약 조건 확인 (0) | 2023.09.18 |
| MariaDB Active Directory 인증확인 (0) | 2023.09.18 |
| 현재 사용자가 읽기 권한을 가진 테이블 목록을 가져오는 Oracle 쿼리 (0) | 2023.09.18 |