Home > Web Front-end > JS Tutorial > body text

Implementing smart right-click menu based on JavaScript_javascript skills

WBOY
Release: 2016-05-16 15:12:37
Original
1077 people have browsed it

This article will introduce you to the smart right-click menu. The files that need to be imported will be given at the end of the article. Let me show you the code first:

The specific code is as follows:

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;//阻止链接跳转 
});
Copy after login

$('th') specifies the right-click label, which should be determined according to the actual situation. I am adding it to the header of the table, so it is the th label
e.which = 3 means right click

Two situations are listed here

One is to determine the content on the menu. Use the previous opertion to define the name of the right-click menu, which must be unique

The other is uncertain. You can get the data from the server and store it in an array. I have written it hard here, and then use the second way to implement it, which requires the use of closures

Files to be imported: http://download.csdn.net/detail/u012116457/9449905

The above content is the knowledge shared by the editor about implementing smart right-click menu based on JavaScript. I hope it will be helpful to everyone!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template