jquery는 마우스 오른쪽 버튼 클릭 메뉴 플러그인_jquery를 구현합니다.

오늘은 프로젝트를 개발할 때 마우스 오른쪽 버튼 클릭 메뉴를 시뮬레이션하는 기능이 필요합니다. 즉, 웹 페이지에서 마우스 오른쪽 버튼을 클릭하면 나타나는 것은 시스템 메뉴가 아니라 우리가 구성한 컨텐츠입니다. 마우스 오른쪽 버튼 클릭 기능을 확장할 수 있습니다. 구현 과정에 대해서는 별로 할 말이 없습니다.

js 부분:

코드 복사 코드는 다음과 같습니다.

//오른쪽 클릭 메뉴 생성
var epMenu={
​ create:function(포인트,옵션){
        var menuNode=document.getElementById('epMenu');
           if(!menuNode){
                        //아무도 없을 때 메뉴 노드 생성
              menuNode=document.createElement("div");
               menuNode.setAttribute('class','epMenu');
               menuNode.setAttribute('id','epMenu');
            }else $(menuNode).html('');//내부 콘텐츠 지우기
                             
$(menuNode).css({left:point.left 'px',top:point.top 'px'});
for(var x in 옵션){
            var tempNode=document.createElement("a");
$(tempNode).text(option[x]['name']).on('click',option[x].action);
                menuNode.appendChild(tempNode);
}
                             
​​​​ $("body").append(menuNode);
},
삭제:함수(){
         $(".epMenu").remove();
}  
};

코드의 CSS 부분은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

/*오른쪽 클릭 메뉴*/
.epMenu{ 너비:120px; 배경:#f0f0f0; 왼쪽:0: 상자-그림자:2px 2px #807878;}
.epMenu a{ 디스플레이:블록; 높이:25px; 테두리 상단:1px 솔리드 #e0e0e0; 글꼴 계열:Microsoft Yahei; -크기:14px; 커서:기본값;}
.ep메뉴 a:hover{ 배경:#fff;}

다음과 같이 호출 코드를 만듭니다.

코드 복사 코드는 다음과 같습니다.

epMenu.create({left:500,top:500},[{name:'a1','action':addText},{name:'b222','action':addBtn},{name:'그림 구성 요소 추가 ','action':addImage}]);

파기 호출 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

epMenu.destory();

효과는 다음과 같습니다.

전화 안내:

생성: epMenu.create(point,option);

point는 브라우저의 왼쪽 상단을 기준으로 메뉴의 위치를 ​​나타내는 정수 유형입니다.

예: {왼쪽:100, 위쪽:500}

option json 배열 유형은 메뉴 항목을 나타내고, name은 이름을 나타내고, action은 클릭에 의해 트리거되는 동작을 나타냅니다.

예: [{name:'a1','action':addText},{name:'b222','action':addBtn},{name:'Add Image Component','action':addImage}]

파기: epMenu.destory();

파기에는 매개변수가 필요하지 않습니다.

이건 사실 매우 간단해요! 사진 추가, 보조 메뉴 등 확장도 가능합니다. 이 프로젝트의 개발 요구 사항은 비교적 간단하기 때문에 그게 전부입니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.