基于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 选择文件夹对话框(web)
Jul 07 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
axios学习教程全攻略
Mar 26 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
vue render函数动态加载img的src路径操作
Oct 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
PHP 读取Postgresql中的数组
2013/04/14 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
python导入模块交叉引用的方法
2019/01/19 Python
python中如何使用insert函数
2020/01/09 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
Python安装whl文件过程图解
2020/02/18 Python
Django配置跨域并开发测试接口
2020/11/04 Python
Pandas的数据过滤实现
2021/01/15 Python
贝佳斯官方网站:Borghese
2020/05/08 全球购物
综合实践教学反思
2014/01/31 职场文书
党员三严三实心得体会
2014/10/13 职场文书
公司股份合作协议书
2014/12/07 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang