基于JavaScript實(shí)現(xiàn)智能右鍵菜單

更新時(shí)間：2016年03月02日 10:28:30 作者：_coding_

這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)智能右鍵菜單的相關(guān)資料,需要的朋友可以參考下

通過本文給大家介紹智能右鍵菜單，需要引入的文件再文末會給出，先給大家展示下代碼：

具體代碼如下所示：

var cityArray = new Array(); 
cityArray.push("北京"); 
cityArray.push("上海"); 
//設(shè)置表頭的鼠標(biāo)右擊事件 
$('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=="出發(fā)城市"){ 
var opertion ={ 
name : "出發(fā)城市" 
}; 
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;//阻止鏈接跳轉(zhuǎn) 
});

$('th') 指定加右鍵的標(biāo)簽，根據(jù)實(shí)際來確定我這里是加在表格的表頭上，所以是th標(biāo)簽
e.which = 3 表示是右鍵

這里列出了兩種情況

一種是菜單上的內(nèi)容確定用前面一種opertion定義該右鍵菜單的名稱，要唯一

另一種是不確定可以通過從服務(wù)端獲取數(shù)據(jù)，存儲在數(shù)組中，我這里寫死了，然后用第二種方式實(shí)現(xiàn) 其中需要用到閉包

需要引入的文件：http://download.csdn.net/detail/u012116457/9449905

以上內(nèi)容是小編給大家分享的基于JavaScript實(shí)現(xiàn)智能右鍵菜單的相關(guān)知識，希望對大家有所幫助！

您可能感興趣的文章:

相關(guān)文章

信息滾動效果的實(shí)例講解
下面小編就為大家?guī)硪黄畔L動效果的實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
javascript中的self和this用法小結(jié)
本篇文章主要是對javascript中的self和this用法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
nodejs實(shí)用示例縮址還原
nodejs最近好紅火，我也趁寒冷天氣在nodejs的火爐邊取暖一下?？s址還原實(shí)現(xiàn)代碼。
2010-12-12
JS使用Promise時(shí)常見的5個(gè)錯(cuò)誤總結(jié)
Promise?提供了一種優(yōu)雅的方法來處理?JS?中的異步操作。這也是避免“回調(diào)地獄”的解決方案。然而，并沒有多少開發(fā)人員了解其中的內(nèi)容。因此，許多人在實(shí)踐中往往會犯錯(cuò)誤。在本文中，介紹一下使用?promise?時(shí)的五個(gè)常見錯(cuò)誤，希望大家能夠避免
2022-11-11
在layui中select更改后生效的方法
今天小編就為大家分享一篇在layui中select更改后生效的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JavaScript實(shí)現(xiàn)單擊下拉框選擇直接跳轉(zhuǎn)頁面的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)單擊下拉框選擇直接跳轉(zhuǎn)頁面的方法,涉及javascript控制頁面跳轉(zhuǎn)的相關(guān)技巧,需要的朋友可以參考下
2015-07-07
12種JavaScript常用的MVC框架比較分析
這篇文章主要介紹了12種JavaScript常用的MVC框架比較分析,以獨(dú)特的視角分析了12中常見的JavaScript MVC框架各種優(yōu)缺點(diǎn),具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11
瀏覽器緩存技術(shù)實(shí)現(xiàn)淺析
這篇文章主要為大家介紹了瀏覽器緩存技術(shù)實(shí)現(xiàn)淺析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
將JSON字符串轉(zhuǎn)換成Map對象的方法
下面小編就為大家?guī)硪黄獙SON字符串轉(zhuǎn)換成Map對象的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11
form+iframe解決跨域上傳文件的方法
下面小編就為大家?guī)硪黄猣orm+iframe解決跨域上傳文件的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11