복붙노트

[JQUERY] 내 웹 응용 프로그램에 대한 사용자 정의 마우스 오른쪽 단추로 클릭하고 상황에 맞는 메뉴 만들기

JQUERY

내 웹 응용 프로그램에 대한 사용자 정의 마우스 오른쪽 단추로 클릭하고 상황에 맞는 메뉴 만들기

해결법

  1. 1.이 질문은 아주 오래 알고 있지만, 너무 내가 그랬던 것처럼 누군가가 구글을 통해이 문제를 발견 한 경우에 응답하고있어, 자신을 같은 문제로 와서 그것을 해결. 나는 앤드류의 하나 @ 내 솔루션을 기반으로하지만, 기본적으로 나중에 모든 것을 수정했습니다.

    이 질문은 아주 오래 알고 있지만, 너무 내가 그랬던 것처럼 누군가가 구글을 통해이 문제를 발견 한 경우에 응답하고있어, 자신을 같은 문제로 와서 그것을 해결. 나는 앤드류의 하나 @ 내 솔루션을 기반으로하지만, 기본적으로 나중에 모든 것을 수정했습니다.

    편집 :이 요즘가 얼마나 인기보고, 나는 더 2014과 같이 덜 윈도우 95처럼 내가 @Quantico과 @Trengot 그것이 더 단단한 대답 그래서 지금 발견 버그를 수정하는 것도 스타일을 업데이트하기로 결정했다.

    편집 2 : 그들은 정말 새로운 기능을 냉각있는 한 내가 StackSnippets로를 설정합니다. 나는 (그 작품을 볼 수있는 제 4 회 패널 클릭) 참조 생각 여기 좋은의 jsfiddle을 둡니다.

    새로운 스택 코드 조각 :

    // JAVASCRIPT (jQuery를) // 트리거 액션을 contexmenu가 표시하려 할 때 $ (문서) .bind ( "의 ContextMenu", 기능 (이벤트) { 진짜 피 // 에서는 event.preventDefault (); // 표시하려면 contextmenu $ ( ". 사용자 정의 메뉴"). 마무리 (). 토글 (100). // 올바른 위치에서 (마우스) CSS ({ 상단 : event.pageY + "픽셀" 왼쪽 : event.pageX + "픽셀" }); }); // 문서를 클릭하면 어딘가 $ (문서) .bind ( "mousedown", 기능 (전자) { // 클릭 된 요소가 메뉴에없는 경우 만약 (! $ (e.target) .parents ( ". 사용자 정의 메뉴"). 길이> 0) { // 숨기기를 $ ( "사용자 정의 메뉴.") 숨기기 (100).; } }); // 메뉴 요소가 클릭하면 $ ( ". 사용자 정의 메뉴 리"). () {(기능을 클릭 //이 트리거 조 이름입니다 스위치 ($ (이) .attr ( "데이터 액션")) { // 각 작업에 대한 케이스. 여기 당신의 행동 경우 "첫 번째": ( "첫 번째") 경보; 단절; 경우 "두 번째"( "초") 경보; 단절; 경우 "세 번째"( "세 번째") 경보; 단절; } // 숨기기는 작업이 트리거 된 뒤에 $ ( "사용자 정의 메뉴.") 숨기기 (100).; }); / * CSS3 * / /* 모든 일 */ .custom 메뉴 { 표시 : 없음; Z- 색인 : 1000; 위치 : 절대; 오버 플로우 : 숨겨진; 국경 : 1 픽셀의 고체 #CCC; 공백 : 파라미터 nowrap; 글꼴 - 가족 : 산세 리프; 배경 : #FFF; 색상 : # 333; 경계 반경 : 5px; 패딩 : 0; } / * 목록의 각 항목 * / .custom 메뉴 리튬 { 패딩 : 8px 12 픽셀; 커서 : 포인터; 목록 스타일 타입 : 없음; 전환 : 모든 .3s이 완화; 사용자는-선택 : 없음; } .custom 메뉴 리 : 가져가 { 배경 색상 : #DEF; } <스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js">

      <리 데이터 조치 = "제"> 우선 <리 데이터 조치 = "초"> 번째 것은 <리 데이터 조치 = "세번째"> 셋째 일 마우스 오른쪽 단추 나 클릭

      참고 : (드롭 다운 훨씬 커서, 등)에서, 확인이 StackSnippets있을 것보다 웹 페이지에 더 유사한이의 같이 jsfiddle에서 작동하는지 확인하십시오 일부 작은 버그를 볼 수 있습니다.

    • 2.아드리안 말했듯이, 플러그인은 같은 방식으로 작동 할 것입니다. 당신이 필요 해요 세 가지 기본 부분이 있습니다 :

      아드리안 말했듯이, 플러그인은 같은 방식으로 작동 할 것입니다. 당신이 필요 해요 세 가지 기본 부분이 있습니다 :

      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 : '클릭'이벤트 (사용자 정의 메뉴를 종료)에 대한 이벤트 핸들러 :

      $(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- 색인 및 위치를 포함한다 : 절대

      매끄러운의 jQuery 플러그인이 모두를 감싸 너무 힘들하지 않을 것입니다.

      http://jsfiddle.net/andrewwhitaker/fELma/ : 현재 간단한 데모를 볼 수 있습니다

    • 3. <제목> 마우스 오른쪽 버튼으로 클릭 <링크 HREF = "https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css"REL = "스타일"TYPE = "텍스트 / CSS"/> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"> <스크립트 SRC = "https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js"유형 = "텍스트 / 자바 스크립트"> <스크립트 SRC = "https://swisnl.github.io/jQuery-contextMenu/dist/jquery.ui.position.min.js"유형 = "텍스트 / 자바 스크립트"> <스팬 클래스 = "컨텍스트 메뉴 하나"스타일 = "국경 : 고체 픽셀 두께의 블랙; 패딩 : 5px;"> 바로 내를 클릭 <스크립트 유형 = "텍스트 / 자바 스크립트"> () {(기능 $ $ .contextMenu ({ 선택 : '.context 메뉴 - 하나' 콜백 : 기능 (키, 옵션) { VAR 분은 = "클릭 :"+ 키; window.console && CONSOLE.LOG (m) || 경계 (m); }, 항목 : { "편집": {이름 : "편집"아이콘 "편집"}, "컷": {이름 : "컷"아이콘 "컷"}, 복사 : {이름 : "복사"아이콘 "복사"}, "붙여 넣기": {이름 : "붙여 넣기"아이콘 "붙여 넣기"}, "삭제": {이름 : "삭제"아이콘 "삭제"}, "sep1": "---------" "종료": {이름 : "종료"아이콘 : 기능 () { 복귀 '컨텍스트 메뉴 아이콘 컨텍스트 메뉴 아이콘 - 종료'; }} } }); $ ( '. 컨텍스트 메뉴 하나'). ({), 기능 (예 '를 클릭'에 CONSOLE.LOG는 (이 '클릭'); }) });

      <제목> 마우스 오른쪽 버튼으로 클릭 <링크 HREF = "https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css"REL = "스타일"TYPE = "텍스트 / CSS"/> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"> <스크립트 SRC = "https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js"유형 = "텍스트 / 자바 스크립트"> <스크립트 SRC = "https://swisnl.github.io/jQuery-contextMenu/dist/jquery.ui.position.min.js"유형 = "텍스트 / 자바 스크립트"> <스팬 클래스 = "컨텍스트 메뉴 하나"스타일 = "국경 : 고체 픽셀 두께의 블랙; 패딩 : 5px;"> 바로 내를 클릭 <스크립트 유형 = "텍스트 / 자바 스크립트"> () {(기능 $ $ .contextMenu ({ 선택 : '.context 메뉴 - 하나' 콜백 : 기능 (키, 옵션) { VAR 분은 = "클릭 :"+ 키; window.console && CONSOLE.LOG (m) || 경계 (m); }, 항목 : { "편집": {이름 : "편집"아이콘 "편집"}, "컷": {이름 : "컷"아이콘 "컷"}, 복사 : {이름 : "복사"아이콘 "복사"}, "붙여 넣기": {이름 : "붙여 넣기"아이콘 "붙여 넣기"}, "삭제": {이름 : "삭제"아이콘 "삭제"}, "sep1": "---------" "종료": {이름 : "종료"아이콘 : 기능 () { 복귀 '컨텍스트 메뉴 아이콘 컨텍스트 메뉴 아이콘 - 종료'; }} } }); $ ( '. 컨텍스트 메뉴 하나'). ({), 기능 (예 '를 클릭'에 CONSOLE.LOG는 (이 '클릭'); }) });

    • 4.여기에 자바 스크립트에서 마우스 오른쪽 버튼을 클릭 컨텍스트 메뉴에 대한 예입니다 : 마우스 오른쪽 클릭 컨텍스트 메뉴

      여기에 자바 스크립트에서 마우스 오른쪽 버튼을 클릭 컨텍스트 메뉴에 대한 예입니다 : 마우스 오른쪽 클릭 컨텍스트 메뉴

      컨텍스트 메뉴 기능에 대한 사용 원시 자바 스크립트 코드. 당신이 이것을 확인하시기 바랍니다 수 있습니다, 이것은 당신을 도움이되기를 바랍니다.

      라이브 코드 :

      (함수() { "엄격한 사용"; / *********************************************** 상황에 맞는 메뉴 기능 만 ******************************** / clickInsideElement 함수 (즉, 클래스 명) { VAR 엘 = e.srcElement || e.target; 경우 (el.classList.contains (클래스 명)) { 엘을 반환; } 다른 { 반면 (EL = el.parentNode) { 경우 (el.classList && el.classList.contains (클래스 명)) { 엘을 반환; } } } false를 반환; } 기능하는 getPosition (E) { VAR POSX = 0, POSY = 0; 만약 var에 전자 = window.event를 (예!) 경우 (e.pageX || e.pageY) { POSX = e.pageX; POSY = e.pageY; } 다른 경우 (e.clientX || e.clientY) { POSX = e.clientX document.body.scrollLeft + + document.documentElement.scrollLeft; POSY = e.clientY document.body.scrollTop + + document.documentElement.scrollTop; } 반환 { X : POSX, Y : 꽃다발 } } // 메뉴 클래스 이름 VAR taskItemClassName는 "엄지 손가락"=; VAR contextMenuClassName = "컨텍스트 메뉴"contextMenuItemClassName = "문맥 menu__item"contextMenuLinkClassName = "문맥 menu__link"contextMenuActive = "컨텍스트 메뉴 - 활성"; VAR taskItemInContext, clickCoords, clickCoordsX, clickCoordsY 메뉴 = document.querySelector ( "# 컨텍스트 메뉴") = menu.querySelectorAll 메뉴 아이템 ( "상황 menu__item."); VAR menuState = 0 menuWidth, menuHeight, menuPosition, menuPositionX, menuPositionY, windowWidth, windowHeight; initMenuFunction 함수 () { contextListener (); 에 ClickListener (); keyupListener (); resizeListener (); } / ** *하려면 contextmenu 이벤트를 수신. * / contextListener 함수 () { document.addEventListener ( "의 ContextMenu"함수 (E) { taskItemInContext = clickInsideElement (즉, taskItemClassName); 경우 (taskItemInContext) { e.preventDefault (); toggleMenuOn (); positionMenu (E); } 다른 { taskItemInContext = NULL; toggleMenuOff (); } }); } / ** * 클릭 이벤트를 수신합니다. * / 함수에 ClickListener () { document.addEventListener ({), 기능 (예 "를 클릭" VAR clickeElIsLink = clickInsideElement (즉, contextMenuLinkClassName); 경우 (clickeElIsLink) { e.preventDefault (); menuItemListener (clickeElIsLink); } 다른 { VAR 버튼 = e.which || e.button; 만약 (버튼 === 1) { toggleMenuOff (); } } }); } / ** *의 keyup 이벤트를 수신합니다. * / keyupListener 함수 () { window.onkeyup = 함수 (E) { 경우 (e.keyCode === 27) { toggleMenuOff (); } } } / ** * 창 크기 조정 이벤트 리스너 * / resizeListener 함수 () { window.onresize = 함수 (E) { toggleMenuOff (); }; } / ** *에 대한 사용자 정의 컨텍스트 메뉴를 켭니다. * / toggleMenuOn 함수 () { (menuState! == 1) {만약 menuState = 1; menu.classList.add (contextMenuActive); } } / ** * 사용자 정의 컨텍스트 메뉴 전원을 켭니다. * / toggleMenuOff 함수 () { (menuState! == 0)하는 경우 { menuState = 0; menu.classList.remove (contextMenuActive); } } 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; {- (clickCoordsX) 7) { 을 console.log ( '클릭 수 앨범 명 :'+ moveToAlbumSelectedId); } toggleMenuOff (); } initMenuFunction (); }) (); / * 본체 패딩 및 콘텐츠의 경우 * / 몸 {패딩 탑 : 70 픽셀; } 리 {텍스트 장식 :! 없음 중요한; } / * 썸네일만을 * / .thumb { 마진 - 하단 : 30 픽셀; } .thumb : 호버 A는 .thumb : 활성은 .thumb는 : {A에 초점을 국경 : 1 픽셀의 고체 보라색; } / ************** 컨텍스트 메뉴 *********** / / * 컨텍스트 메뉴 * / .context 메뉴 {디스플레이 : 없음; 위치 : 절대; Z- 색인 : 9999; 패딩 : 12 픽셀 0; 폭 : 200 픽셀; 배경 색상 : #fff; 국경 : 고체 1 픽셀 #dfdfdf; 상자 그림자 : 1 픽셀의 픽셀 두께의 2 픽셀 #cfcfcf; } .context 메뉴 - 활성 {디스플레이 : 블록; } .context-menu__items {목록 스타일 : 없음; 여백 : 0; 패딩 : 0; } .context-menu__item {디스플레이 : 블록; 마진 - 하단 : 4 픽셀; } .context-menu__item이 : 마지막으로 아이 {마진 - 하단 : 0; } .context-menu__link {디스플레이 : 블록; 패딩 : 4 픽셀 12 픽셀; 색상 : # 0066aa; 텍스트 장식 : 없음; } .context-menu__link : 가져가 {색상 : #fff; 배경 색상 : # 0066aa; } .context-menu__items UL {총수 : 절대; 공백 : 파라미터 nowrap; Z- 색인 : 1; 왼쪽 : -99999em은;} .context-menu__items> 리 : 호버> UL {왼쪽 : 자동; 패딩 - 가기 : 5px; 최소 폭 : 100 %; } .context-menu__items> 리튬 리튬 {UL 경계 남아 1 픽셀 고체 #fff} .context-menu__items> 리튬 리튬 : 호버> UL {좌 : 100 %; 맨 : -1px; } .context-menu__item UL {배경 컬러 : #FFFFFF; 패딩 : 7px 11px; 목록 스타일 타입 : 없음; 텍스트 장식 : 없음; 여백 왼쪽 : 40px; } .page 매체 .context-menu__items UL 리튬 {디스플레이 : 블록; } / ************** 컨텍스트 메뉴 *********** / <링크 HREF = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"REL = "스타일"/> <링크 HREF = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"REL = "스타일"/>

      썸네일 갤러리 <작은> (오른쪽 클릭 컨텍스트 메뉴를 볼 수)
      를
      를
      를
      를
      를
      를
      를
      를 <시간>

      'JQUERY' 카테고리의 다른 글

      [JQUERY] jQuery를 체크 박스가 선택된 경우  (0) 2020.10.17
      [JQUERY] 어떻게 부모 DIV에 만 불이 아니라 아이들 클릭 이벤트를하기?  (0) 2020.10.17
      [JQUERY] JQuery와 플러그인을 확장하는 가장 좋은 방법  (0) 2020.10.17
      [JQUERY] 어떻게 변경 이벤트에 라디오를 사용 하는가?  (0) 2020.10.17
      [JQUERY] 페이지 스크롤에서 Active 메뉴 항목을 변경?  (0) 2020.10.17
      ,

티스토리툴바