基于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实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 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实现mysql数据库备份类
2008/03/20 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
php解决约瑟夫环示例
2014/04/09 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
python字符串对其居中显示的方法
2015/07/11 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
Python3常用内置方法代码实例
2019/11/18 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
公司部门司机岗位职责
2014/01/03 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
酒店员工检讨书
2014/02/18 职场文书
保护环境倡议书500字
2014/05/19 职场文书
团干部培训方案
2014/06/03 职场文书
副总经理任命书
2014/06/05 职场文书
大学感恩节活动总结
2015/05/05 职场文书
关于军训的感想
2015/08/07 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android