基于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 相关文章推荐
firefox插件Firebug的使用教程
Jan 02 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
微信小程序表单弹窗实例
Jul 19 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数据库表中取出随机数据的代码
2007/09/05 PHP
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python中转换角度为弧度的radians()方法
2015/05/18 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
python程序输出无内容的解决方式
2020/04/09 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
铭万公司.net面试题笔试题
2014/07/20 面试题
应届大学生求职信
2013/12/01 职场文书
和平主题的演讲稿
2014/01/12 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
企业安全生产检查制度
2015/08/06 职场文书
党员理论学习心得体会
2016/01/21 职场文书
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技