基于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 写的一个简单的timer
Jul 30 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
jQuery的ready方法详解
Nov 27 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
小程序实现图片移动缩放效果
May 26 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
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Eclipse + Python 的安装与配置流程
2013/03/05 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
python3爬虫之设计签名小程序
2018/06/19 Python
在python里从协程返回一个值的示例
2019/02/19 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
函数指针的定义是什么
2016/08/14 面试题
中秋节寄语2015
2015/03/24 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
分家协议书范本
2016/03/22 职场文书
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript
nginx 配置指令之location使用详解
2022/05/25 Servers