基于JavaScript实现智能右键菜单
本文介绍如何使用JavaScript实现智能右键菜单功能。通过监听表格表头的鼠标右击事件,区分固定菜单与动态获取菜单两种场景。代码展示了如何定义菜单项名称、处理点击事件,并利用闭包机制动态生成菜单数据,最终调用smartMenu方法渲染菜单。
智能右键菜单实现概述
本文将详细介绍如何开发一个智能右键菜单,所需引入的文件列表将在文末提供,首先展示核心代码实现。
具体代码实现如下所示:
核心代码逻辑分析
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;//阻止链接跳转
});
代码中通过选择器指定需要添加右键菜单的HTML标签,具体选择需根据实际业务场景确定,例如本例中针对表格表头,因此选用th标签。同时,通过判断e.which等于3来识别鼠标右键操作。
此处列举了两种不同的菜单配置情况。
第一种情况是菜单内容固定,此时需通过operation对象定义该右键菜单的名称,且名称必须保持唯一性。
第二种情况是菜单内容不确定,可通过从服务端获取数据并存入数组来实现。本例中为了演示,将数据硬编码,并利用闭包机制实现动态菜单的生成。
资源引入说明
需要引入的相关文件下载地址为:http://download.csdn.net/detail/u012116457/9449905
以上分享了基于JavaScript实现智能右键菜单的相关技术要点,希望能对读者有所帮助。
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
