基于JavaScript實(shí)現(xiàn)智能右鍵菜單
通過本文給大家介紹智能右鍵菜單,需要引入的文件再文末會(huì)給出,先給大家展示下代碼:
具體代碼如下所示:
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ù),存儲(chǔ)在數(shù)組中,我這里寫死了,然后用第二種方式實(shí)現(xiàn) 其中需要用到閉包
需要引入的文件:http://download.csdn.net/detail/u012116457/9449905
以上內(nèi)容是小編給大家分享的基于JavaScript實(shí)現(xiàn)智能右鍵菜單的相關(guān)知識(shí),希望對(duì)大家有所幫助!
相關(guān)文章
javascript 強(qiáng)制刷新頁面的實(shí)現(xiàn)代碼
javascript 強(qiáng)制刷新頁面的代碼,大家經(jīng)常能用的到。2009-12-12JavaScript實(shí)現(xiàn)圖片瀑布流和底部刷新
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圖片瀑布流和底部刷新,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01淺談關(guān)于JS下大批量異步任務(wù)按順序執(zhí)行解決方案一點(diǎn)思考
這篇文章主要介紹了淺談關(guān)于JS下大批量異步任務(wù)按順序執(zhí)行解決方案一點(diǎn)思考,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01JS簡單實(shí)現(xiàn)String轉(zhuǎn)Date的方法
這篇文章主要介紹了JS簡單實(shí)現(xiàn)String轉(zhuǎn)Date的方法,涉及JavaScript字符串與日期相互轉(zhuǎn)換的相關(guān)技巧,需要的朋友可以參考下2016-03-03微信小程序網(wǎng)絡(luò)請(qǐng)求的封裝與填坑之路
本文主要介紹了關(guān)于小程序網(wǎng)絡(luò)請(qǐng)求的封裝的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04javascript過濾數(shù)組重復(fù)元素的實(shí)現(xiàn)方法
這篇文章主要介紹了javascript過濾數(shù)組重復(fù)元素的實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2017-05-05解決css和js的{}與smarty定界符沖突問題的兩種方法
當(dāng)輸入url地址后網(wǎng)頁出現(xiàn)如下文所描述的問題通常是css和js的{}與smarty定界符沖突導(dǎo)致的,解決方法有兩個(gè),具體如下,感興趣的朋友可以參考下2013-09-09javascript正則表達(dá)式中參數(shù)g(全局)的作用
表達(dá)式加上參數(shù)g之后,表明可以進(jìn)行全局匹配,注意這里可以的含義。2010-11-11js ajaxfileupload.js上傳報(bào)錯(cuò)的解決方法
這篇文章主要為大家詳細(xì)介紹了js ajaxupload.js上傳報(bào)錯(cuò)的解決方法,感興趣的小伙伴們可以參考一下2016-05-05