基于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 相关文章推荐
jquery multiSelect 多选下拉框
Jul 09 Javascript
javascript中的delete使用详解
Apr 11 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
详解如何运行vue项目
Apr 15 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 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
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
PHP制作用户注册系统
2015/10/23 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
Extjs学习笔记之七 布局
2010/01/08 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
jquery密码强度校验
2015/12/02 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
理解Python中的类与实例
2015/04/27 Python
python实现类的静态变量用法实例
2015/05/08 Python
python遍历目录的方法小结
2016/04/28 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
对python函数签名的方法详解
2019/01/22 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
药剂专业自荐书
2014/06/20 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
800字作文之大雪
2019/12/04 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js