Implémentation d'un menu contextuel intelligent basé sur les compétences JavaScript_javascript

Cet article vous présentera le menu contextuel intelligent. Les fichiers qui doivent être importés seront indiqués à la fin de l'article. Laissez-moi d'abord vous montrer le code :

Le code spécifique est le suivant :

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') précise l'étiquette du clic droit, qui doit être déterminée en fonction de la situation réelle. Je l'ajoute à l'en-tête du tableau, c'est donc la ème étiquette
. e. which = 3 signifie clic droit

Deux situations sont répertoriées ici

La première consiste à déterminer le contenu du menu. Utilisez l'opération précédente pour définir le nom du menu contextuel, qui doit être unique

L'autre est incertain. Vous pouvez obtenir les données du serveur et les stocker dans un tableau, je l'ai écrit en dur ici, puis utiliser la deuxième façon de l'implémenter, qui nécessite l'utilisation de fermetures

Fichiers à importer : http://download.csdn.net/detail/u012116457/9449905

Le contenu ci-dessus est les connaissances partagées par l'éditeur sur la mise en œuvre d'un menu contextuel intelligent basé sur JavaScript. J'espère qu'il sera utile à tout le monde !