基于JavaScript实现智能右键菜单

 更新时间:2016年03月02日 10:28:30   作者:_coding_  
这篇文章主要介绍了基于JavaScript实现智能右键菜单的相关资料,需要的朋友可以参考下

通过本文给大家介绍智能右键菜单,需要引入的文件再文末会给出,先给大家展示下代码:

具体代码如下所示:

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

以上内容是小编给大家分享的基于JavaScript实现智能右键菜单的相关知识,希望对大家有所帮助!

相关文章

  • 信息滚动效果的实例讲解

    信息滚动效果的实例讲解

    下面小编就为大家带来一篇信息滚动效果的实例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • javascript中的self和this用法小结

    javascript中的self和this用法小结

    本篇文章主要是对javascript中的self和this用法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • nodejs实用示例 缩址还原

    nodejs实用示例 缩址还原

    nodejs最近好红火,我也趁寒冷天气在nodejs的火炉边取暖一下。缩址还原实现代码。
    2010-12-12
  • JS使用Promise时常见的5个错误总结

    JS使用Promise时常见的5个错误总结

    Promise 提供了一种优雅的方法来处理 JS 中的异步操作。这也是避免“回调地狱”的解决方案。然而,并没有多少开发人员了解其中的内容。因此,许多人在实践中往往会犯错误。在本文中,介绍一下使用 promise 时的五个常见错误,希望大家能够避免
    2022-11-11
  • 在layui中select更改后生效的方法

    在layui中select更改后生效的方法

    今天小编就为大家分享一篇在layui中select更改后生效的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript实现单击下拉框选择直接跳转页面的方法

    JavaScript实现单击下拉框选择直接跳转页面的方法

    这篇文章主要介绍了JavaScript实现单击下拉框选择直接跳转页面的方法,涉及javascript控制页面跳转的相关技巧,需要的朋友可以参考下
    2015-07-07
  • 12种JavaScript常用的MVC框架比较分析

    12种JavaScript常用的MVC框架比较分析

    这篇文章主要介绍了12种JavaScript常用的MVC框架比较分析,以独特的视角分析了12中常见的JavaScript MVC框架各种优缺点,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 浏览器缓存技术实现浅析

    浏览器缓存技术实现浅析

    这篇文章主要为大家介绍了浏览器缓存技术实现浅析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 将JSON字符串转换成Map对象的方法

    将JSON字符串转换成Map对象的方法

    下面小编就为大家带来一篇将JSON字符串转换成Map对象的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • form+iframe解决跨域上传文件的方法

    form+iframe解决跨域上传文件的方法

    下面小编就为大家带来一篇form+iframe解决跨域上传文件的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11

最新评论