js中智能右鍵菜單

這篇文章來介紹一下智能右鍵菜單,需要引入的文件再文末會給出,首先先看代碼:

    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')   指定加右鍵的標籤,根據實際來確定  我這裏是加在表格的表頭上,所以是th標籤

e.which = 3 表示是右鍵 

這裏列出了兩種情況  

一種是菜單上的內容確定  用前面一種opertion定義該右鍵菜單的名稱,要唯一

另一種是不確定 可以通過從服務端獲取數據,存儲在數組中,我這裏寫死了,然後用第二種方式實現  其中需要用到閉包

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


發佈了196 篇原創文章 · 獲贊 214 · 訪問量 87萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章