当前位置: 编程技术>jquery
jquery右键菜单的简单例子
来源: 互联网 发布时间:2014-10-04
本文导语: 例子,jquery实现的一例右键菜单代码。 代码示例: JQuery右键菜单_http://www. 右键点此 右键点此 不显示 显示第一项 显示全部 ...
例子,jquery实现的一例右键菜单代码。
代码示例:
JQuery右键菜单_http://www.
右键点此
右键点此
不显示
显示第一项
显示全部
- 打开
- 邮件
- 保存
- 关闭
- 选项一
- 选项二
- 选项三
- 选项四
- csdn
- javaeye
- itpub
//所有class为demo1的span标签都会绑定此右键菜单
$('span.demo1').contextMenu('myMenu1',
{
bindings:
{
'open': function(t) {
alert('Trigger was '+t.id+'/nAction was Open');
},
'email': function(t) {
alert('Trigger was '+t.id+'/nAction was Email');
},
'save': function(t) {
alert('Trigger was '+t.id+'/nAction was Save');
},
'delete': function(t) {
alert('Trigger was '+t.id+'/nAction was Delete');
}
}
});
//所有html元素id为demo2的绑定此右键菜单
$('#demo2').contextMenu('myMenu2', {
//菜单样式
menuStyle: {
border: '2px solid #000'
},
//菜单项样式
itemStyle: {
fontFamily : 'verdana',
backgroundColor : 'green',
color: 'white',
border: 'none',
padding: '1px'
},
//菜单项鼠标放在上面样式
itemHoverStyle: {
color: 'blue',
backgroundColor: 'red',
border: 'none'
},
//事件
bindings:
{
'item_1': function(t) {
alert('Trigger was '+t.id+'/nAction was item_1');
},
'item_2': function(t) {
alert('Trigger was '+t.id+'/nAction was item_2');
},
'item_3': function(t) {
alert('Trigger was '+t.id+'/nAction was item_3');
},
'item_4': function(t) {
alert('Trigger was '+t.id+'/nAction was item_4');
}
}
});
//所有div标签class为demo3的绑定此右键菜单
$('div.demo3').contextMenu('myMenu3', {
//重写onContextMenu和onShowMenu事件
onContextMenu: function(e) {
if ($(e.target).attr('id') == 'dontShow') return false;
else return true;
},
onShowMenu: function(e, menu) {
if ($(e.target).attr('id') == 'showOne') {
$('#item_2, #item_3', menu).remove();
}
return menu;
}
});