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;//阻止链接跳转 });
$('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!