基于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 相关文章推荐
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 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防注入安全代码
2008/04/09 PHP
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php简单压缩css样式示例
2016/09/22 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
php函数式编程简单示例
2019/08/08 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
return false;和e.preventDefault();的区别
2010/07/11 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
详解Django框架中的视图级缓存
2015/07/23 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
常用的HTML5列表标签
2017/06/20 HTML / CSS
香港交友网站:be2香港
2018/07/22 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
平安校园建设方案
2014/05/02 职场文书
期末评语大全
2014/05/04 职场文书
社团活动总结怎么写
2014/06/30 职场文书
法人代表证明书
2014/09/18 职场文书
个人授权委托书范文
2014/09/21 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
《去年的树》教学反思
2016/02/18 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
nginx七层负载均衡配置详解
2022/07/15 Servers