基于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 相关文章推荐
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
原生js实现放大镜效果
Jan 11 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
浅析Angular19 自定义表单控件
Jan 31 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
js实现抽奖的两种方法
Mar 19 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
php的正则处理函数总结分析
2008/06/20 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
详解jquery和vue对比
2019/04/16 jQuery
深入理解JavaScript 箭头函数
2019/05/30 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
Python实现的多进程和多线程功能示例
2018/05/29 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
如何使用Python调整图像大小
2020/09/26 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
关于python中remove的一些坑小结
2021/01/04 Python
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
财务会计人员求职的自我评价
2014/01/13 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS