|
今天分享一个Jquery鼠标右键点击弹出菜单的组合功能。在项目中，主要是用在表格中，点击单元格，
弹出右键菜单，选择下一步的功能。
首先是，右键点击事件的获取：
鼠标的事件e，e.which： 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键 $(function(){
$('a').mousedown(function(e){
alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
return false;//阻止链接跳转
})
})
如
$('#downwps2010').mousedown(function(e){
if(3 == e.which){
alert('这 是右键单击事件');
}else if(1 == e.which){
alert('这 是左键单击事件');
}
})
2、右键菜单插件：
这里使用的是smartMenu.js 智能上下文菜单插件。百度网盘下载地址：
http://pan.baidu.com/s/1i3qkqW1
引用：
js：jquery-smartMenu.js <script src="../../JavaScript/RightMenu/jquery-smartMenu.js"></script>
css：smartMenu.css <link href="../../JavaScript/RightMenu/smartMenu.css" rel="stylesheet" />
css中可以根据你的实际情况调整一下宽度等。
右键菜单使用方法：
|
正如前面提到的，此插件的使用如下：
$(选择器).smartMenu(data, options);
其中$(选择器)元素就是你需要右键显示列表内容的元素。而data参数决定了右键显示的自定义菜单的内容（包括分组，层级等）。这里就具体讲下这个data参数。
首先data参数的结构模型如下：
var data = [[{}, {}, {}], [{}]];
右键出现的上下文菜单的每一项都是由一个有着固定键值的对象创建的，这个对象只支持三个关键键值：text, func, data，分别表示菜单文字，点击菜单的方法，菜单对应的二级菜单数据，例如下面，这是第一个demo页面设置图片内边距的对象数据：
{
text: "图片内间距",
func: function() {
$(this).css("padding", "10px");
}
}
|
smartMenu插件API参数详解
这里的API参数也就是options参数内容了，具体名称，作用等参见下表：
jQuery smartMenu插件API参数表
| 参数名 |
默认值 |
相关说明 |
| name |
"" |
字符串。上下文菜单的名称，用以区分不同的上下文菜单。如果页面只有一个上下文菜单，此参数可缺省；如果是多个菜单，此参数必须，否则菜单会出现冲突。 |
| offsetX |
2 |
数值。上下文菜单左上角距离鼠标水平偏移距离。 |
| offsetY |
2 |
数值。上下文菜单左上角距离鼠标垂直偏移距离。 |
| textLimit |
6 |
数值。上下文菜单项限制显示的文字个数。如果超出会截取，并以…补全，完成文字以title形式显示。 |
| beforeShow |
$.noop |
函数。菜单即将显示之前执行的回调函数。$.noop为jQuery 1.4+版本支持，所以，如果你想让插件向下兼容，可设置将插件js中所有的$.noop替换成function() {} |
| afterShow |
$.noop |
函数。菜单显示后执行的回调函数。 |
一般情况下，上面的API参数用的比较多的就是name。第二个demo页面中用到了beforeShow这个API参数，用来在菜单显示之前改变data数据。
完整代码： $("#TablebillList tbody tr").bind("mousedown", (function (e) {
if (e.which == 3) {
var opertionn = {
name: "",
offsetX: 2,
offsetY: 2,
textLimit: 10,
beforeShow: $.noop,
afterShow: $.noop
};
var imageMenuData = [
[{
text: e.target.cellIndex + ":" + e.target.innerHTML,
func: function () {
$(this).css("padding", "10px");
alert(e.target.innerHTML);
}
}, {
text: "添加",
func: function () {
alert(e.target.innerHTML);
}
}, {
text: "复制",
func: function () {
$(this).css("background-color", "#beceeb");
}
}],
[{
text: "再次查询",
func: function () {
var src = $(this).attr("src");
window.open(src.replace("/s512", ""));
}
}]
,
[{
text: "过滤",
func: function () {
var src = $(this).attr("src");
window.open(src.replace("/s512", ""));
}
}]
];
oTable.$('td.td_selected').removeClass('td_selected');
if ($(e.target).hasClass('td_selected')) {
$(e.target).removeClass('td_selected');
} else {
$(e.target).addClass('td_selected');
}
$(this).smartMenu(imageMenuData, opertionn);
}
}));
|
