Maison > interface Web > js tutoriel > Implémentation d'un menu contextuel intelligent basé sur les compétences JavaScript_javascript

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

WBOY
Libérer: 2016-05-16 15:12:37
original
1097 Les gens l'ont consulté

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;//阻止链接跳转 
});
Copier après la connexion

$('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 !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal