Heim > Web-Frontend > js-Tutorial > Hauptteil

Implementierung eines intelligenten Rechtsklick-Menüs basierend auf JavaScript_Javascript-Kenntnissen

WBOY
Freigeben: 2016-05-16 15:12:37
Original
1078 Leute haben es durchsucht

Dieser Artikel führt Sie in das intelligente Rechtsklick-Menü ein, das am Ende des Artikels angezeigt wird:

Der spezifische Code lautet wie folgt:

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;//阻止链接跳转 
});
Nach dem Login kopieren

$('th') gibt die Rechtsklick-Beschriftung an, die entsprechend der tatsächlichen Situation bestimmt werden sollte. Ich füge sie der Kopfzeile der Tabelle hinzu, also ist es die te-Beschriftung
e.which = 3 bedeutet Rechtsklick

Hier sind zwei Situationen aufgeführt

Eine besteht darin, den Inhalt des Menüs zu bestimmen. Verwenden Sie die vorherige Operation, um den Namen des Rechtsklick-Menüs zu definieren, der eindeutig sein muss

Das andere ist ungewiss. Sie können die Daten vom Server abrufen und in einem Array speichern, das ich hier hart geschrieben habe, und sie dann mit der zweiten Methode implementieren, die die Verwendung von Abschlüssen erfordert

Zu importierende Dateien:

http://download.csdn.net/detail/u012116457/9449905

Bei dem oben genannten Inhalt handelt es sich um das vom Herausgeber geteilte Wissen über die Implementierung eines intelligenten Rechtsklickmenüs auf Basis von JavaScript. Ich hoffe, es wird für alle hilfreich sein!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage