基于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 相关文章推荐
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
浅谈js中的bind
Mar 18 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的输入输出流
2007/02/14 PHP
php 魔术函数使用说明
2010/02/21 PHP
php中Smarty模板初体验
2011/08/08 PHP
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
JavaScript实现表格排序方法
2013/06/14 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
python 实现堆排序算法代码
2012/06/05 Python
Python实现简单多线程任务队列
2016/02/27 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
Python中字符串List按照长度排序
2019/07/01 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
python pygame实现球球大作战
2019/11/25 Python
python生成特定分布数的实例
2019/12/05 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
如何提高MySql的安全性
2014/06/19 面试题
餐饮服务员岗位职责
2015/02/09 职场文书
学校捐款活动总结
2015/05/09 职场文书
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers