基于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 相关文章推荐
js汉字转拼音实现代码
Feb 06 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
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 类自动载入的方法
2015/06/03 PHP
php实现json编码的方法
2015/07/30 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
javascript 写类方式之五
2009/07/05 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
js document.write()使用介绍
2014/02/21 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
Python 3中的yield from语法详解
2017/01/18 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
python基础教程项目三之万能的XML
2018/04/02 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
python队列原理及实现方法示例
2019/11/27 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
Python 里最强的地图绘制神器
2021/03/01 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
高校学生干部的自我评价分享
2013/11/04 职场文书
毕业设计计划书
2014/01/09 职场文书
关于毕业的广播稿
2014/01/10 职场文书
丑小鸭教学反思
2014/02/03 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
辞职信范文大全
2015/03/02 职场文书
爱护公物主题班会
2015/08/17 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS