基于JavaScript实现智能右键菜单


Posted in Javascript onMarch 02, 2016

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

具体代码如下所示:

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实现智能右键菜单的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
javascript下判断一个元素是否存在的代码
Mar 05 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
node.js入门教程
Jun 01 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
JS简单实现String转Date的方法
Mar 02 #Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 #Javascript
JS判断是否长按某一键的方法
Mar 02 #Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 #Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 #Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 #Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 #Javascript
You might like
PHP利用imagick生成组合缩略图
2016/02/19 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
Django权限机制实现代码详解
2018/02/05 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
python 求定积分和不定积分示例
2019/11/20 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
技校毕业生的自我评价
2013/12/27 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
春季运动会加油词
2015/07/18 职场文书
获奖感言范文
2015/07/31 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript