基于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 while语句和do while语句的区别分析
Dec 08 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 Javascript
javascript前端实现多视频上传
Dec 13 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生成curl命令行的方法
2015/12/14 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
经验几则 推荐
2006/09/05 Javascript
js计数器代码
2006/11/04 Javascript
用htc组件制作windows选项卡
2007/01/13 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
浅谈vue首屏加载优化
2018/06/28 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
2014年母亲节演讲稿范文
2014/05/07 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
网站出售协议书范文
2014/10/10 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
2015高考寄语集锦
2015/02/27 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
vue+spring boot实现校验码功能
2021/05/27 Vue.js
Python实现列表拼接和去重的三种方式
2021/07/02 Python