>  기사  >  웹 프론트엔드  >  JavaScript_javascript 기술을 기반으로 스마트 오른쪽 클릭 메뉴 구현

JavaScript_javascript 기술을 기반으로 스마트 오른쪽 클릭 메뉴 구현

WBOY
WBOY원래의
2016-05-16 15:12:371071검색

이 기사에서는 스마트 오른쪽 클릭 메뉴를 소개합니다. 가져와야 하는 파일은 기사 마지막 부분에 나와 있습니다.

구체적인 코드는 다음과 같습니다.

var cityArray = new Array(); 
cityArray.push("北京"); 
cityArray.push("上海"); 
//设置表头的鼠标右击事件 
$('th').mousedown(function(e){ 
var selected = e.target.innerHTML; 
//3表示右键 
if(e.which==3){ 
if(selected=="订票类型"){ 
var opertion ={ 
name : "订票类型" 
}; 
var data = [[{ 
text:'出票', 
func:function(){ 
alert("出票"); 
} 
}],[{ 
text:'留票', 
func:function(){ 
alert("留票"); 
} 
}],[{ 
text:'改签', 
func:function(){ 
alert("改签"); 
} 
}],[{ 
text:'退票', 
func:function(){ 
alert("退票"); 
} 
}],[{ 
text:'全部', 
func:function(){ 
alert("全部"); 
} 
}]]; 
$(this).smartMenu(data,opertion); 
}else if(selected=="出发城市"){ 
var opertion ={ 
name : "出发城市" 
}; 
var data = []; 
for(var i=0;i<cityArray.length;i++){ 
//使用闭包 
(function(i){ 
func = function(){ 
alert(cityArray[i]); 
} 
})(i); 
var obj = { 
text:cityArray[i], 
func:func 
}; 
var cArray = new Array(); 
cArray.push(obj); 
data.push(cArray); 
} 
var other = { 
text:"全部", 
func:function(){ 
alert("全部"); 
} 
} 
var otherArray = new Array(); 
otherArray.push(other); 
data.push(otherArray); 
$(this).smartMenu(data,opertion); 
} 
} 
return false;//阻止链接跳转 
});

$('th')는 마우스 오른쪽 버튼 클릭 라벨을 지정하는데, 이는 실제 상황에 따라 결정해야 하므로 테이블 헤더에 추가하는 것이므로 1번째 라벨입니다
e. which = 3은 마우스 오른쪽 버튼 클릭을 의미합니다

여기에는 두 가지 상황이 나열되어 있습니다

하나는 메뉴의 콘텐츠를 결정하는 것입니다. 이전 작업을 사용하여 고유한 마우스 오른쪽 버튼 클릭 메뉴의 이름을 정의합니다.

다른 하나는 확실하지 않습니다. 서버에서 데이터를 가져와서 배열에 저장할 수 있습니다. 여기서는 열심히 작성한 다음 클로저를 사용해야 하는 두 번째 방법을 사용합니다.

가져올 파일: http://download.csdn.net/detail/u012116457/9449905

위 내용은 자바스크립트 기반의 스마트 오른쪽 클릭 메뉴 구현에 관해 편집자가 공유한 지식입니다. 모든 분들께 도움이 되길 바랍니다!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.