基于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自动显示最后更新时间
Mar 15 Javascript
javascript下高性能字符串连接StringBuffer类
Aug 16 Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
koa-router源码学习小结
2018/09/07 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
python 性能优化方法小结
2017/03/31 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
使用Python设计一个代码统计工具
2018/04/04 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
采用怎样的方法保证数据的完整性
2013/12/02 面试题
自荐信结尾
2013/10/27 职场文书
业务员岗位职责
2013/11/16 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
php 原生分页
2021/04/01 PHP
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
Python如何识别银行卡卡号?
2021/06/10 Python
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python