JQuery之ContextMenu(右键菜单) jquery 鼠标右键菜单-爱华网

插件下载地址:

http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js
压缩版:
http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js

Jquery主页:http://jquery.com/

插件中的参数说明:
Parameters
menu_id
Theidofthemenuasdefinedinyourmarkup.Youcanbindoneormoreelementstoamenu.Eg$("tabletd").contextMenu("myMenu")willbindthemenuwithid"myMenu"toalltablecells.
Note:Thisbehaviourhaschangedfromr1whereyouneededa"#"beforetheid

settings
ContextMenutakesanoptionalsettingsobjectthatletsyoustyleyourmenuandbindclickhandlerstoeachoption.ContextMenusupportsthefollowingpropertiesinthesettingsobject:

bindings
Anobjectcontaining"id":functionpairs.Thesuppliedfunctionistheactiontobeperformedwhentheassociateditemisclicked.Theelementthattriggeredthecurrentmenuispassedtothishandlerasthefirstparameter.
Note:Thisbehaviourhaschangedfromr1whereyouneededa"#"beforetheid
menuStyle
AnobjectcontainingstyleName:valuepairsforstylingthecontaining<ul>menu.
itemStyle
AnobjectcontainingstyleName:valuepairsforstylingthe<li>elements.
itemHoverStyle
AnobjectcontainingstyleName:valuepairsforstylingthehoverbehaviourof<li>elements.
shadow
Boolean:displayabasicdropshadowonthemenu.
Defaultstotrue
eventPosX
Allowsyoutodefinewhichclickeventisusedtodeterminewheretoplacethemenu.Therearepossiblytimes(particularlyinIE6)whereyouwillneedtosetthisto"clientX".
Defaultsto:'pageX'
eventPosY
Allowsyoutodefinewhichclickeventisusedtodeterminewheretoplacethemenu.Therearepossiblytimes(particularlyinIE6)whereyouwillneedtosetthisto"clientY".
Defaultsto:'pageY'
onContextMenu(event)
Acustomeventfunctionwhichrunsbeforethecontextmenuisdisplayed.Ifthefunctionreturnsfalsethemenuisnotdisplayed.Thisallowsyoutoattachthecontextmenutoalargeblockelement(ortheentiredocument)andthenfilteronrightclickwhetherornotthecontextmenushouldbeshown.
onShowMenu(event,menu)
Acustomeventfunctionwhichrunsbeforethemenuisdisplayed.Itispassedareferencetothemenuelementandallowsyoutomanipulatetheoutputbeforethemenuisshown.Thisallowsyoutohide/showoptionsoranythingelseyoucanthinkofbeforeshowingthecontextmenutotheuser.Thisfunctionmustreturnthemenu.

通过此插件可以在不同的html元素内建立contextmenu,并且可以自定义样式.

<HTML>
<HEAD>
<TITLE>JQuery右键菜单</TITLE>
<scriptsrc="jquery-1.2.6.min.js"></script>
<scriptsrc="jquery.contextmenu.r2.js"></script>
</HEAD>

<BODY>
<span>
右键点此
</span>
<hr/>
<divid="demo2">
右键点此
</div>
<hr/>
<divid="dontShow">
不显示
</div>
<hr/>
<divid="showOne">
显示第一项
</div>
<hr/>
<divid="showAll">
显示全部
</div>

<hr/>

<divid="myMenu1">
<ul>
<liid="open"><imgsrc="folder.png"/>打开</li>
<liid="email"><imgsrc="email.png"/>邮件</li>
<liid="save"><imgsrc="disk.png"/>保存</li>
<liid="delete"><imgsrc="cross.png"/>关闭</li>
</ul>
</div>

<divid="myMenu2">
<ul>
<liid="item_1">选项一</li>
<liid="item_2">选项二</li>
<liid="item_3">选项三</li>
<liid="item_4">选项四</li>
</ul>
</div>

<divid="myMenu3">
<ul>
<liid="item_1">csdn</li>
<liid="item_2">javaeye</li>
<liid="item_3">itpub</li>
</ul>
</div>
</BODY>
<script>
//所有class为demo1的span标签都会绑定此右键菜单
$('span.demo1').contextMenu('myMenu1',
{
bindings:
{
'open':function(t){
alert('Triggerwas'+t.id+'nActionwasOpen');
},
'email':function(t){
alert('Triggerwas'+t.id+'nActionwasEmail');
},
'save':function(t){
alert('Triggerwas'+t.id+'nActionwasSave');
},
'delete':function(t){
alert('Triggerwas'+t.id+'nActionwasDelete');
}
}

});
//所有html元素id为demo2的绑定此右键菜单
$('#demo2').contextMenu('myMenu2',{
//菜单样式
menuStyle:{
border:'2pxsolid#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('Triggerwas'+t.id+'nActionwasitem_1');
},
'item_2':function(t){
alert('Triggerwas'+t.id+'nActionwasitem_2');
},
'item_3':function(t){
alert('Triggerwas'+t.id+'nActionwasitem_3');
},
'item_4':function(t){
alert('Triggerwas'+t.id+'nActionwasitem_4');
}
}
});
//所有div标签class为demo3的绑定此右键菜单
$('div.demo3').contextMenu('myMenu3',{
//重写onContextMenu和onShowMenu事件
onContextMenu:function(e){
if($(e.target).attr('id')=='dontShow')returnfalse;
elsereturntrue;
},

onShowMenu:function(e,menu){
if($(e.target).attr('id')=='showOne'){
$('#item_2,#item_3',menu).remove();
}
returnmenu;
}

});

</script>
</HTML>
效果图:

contextmenu右键菜单

爱华网本文地址 » http://www.413yy.cn/a/25101018/375276.html

JQuery之ContextMenu(右键菜单) jquery 鼠标右键菜单

更多阅读

360如何管理鼠标右键菜单鼠标右键新建菜单管理

开发工具之Eclipse快捷键 eclipse前端开发工具

CSOL海皇之怒属性及使用技巧，海皇值得抽吗？ csol海皇之怒右键

win7鼠标右键菜单清理 win7右键菜单设置怎么清理鼠标右键菜单

《王孟英医案绎注》-卷五、卷六小学六年级毕业考试卷

声明:《JQuery之ContextMenu(右键菜单) jquery 鼠标右键菜单》为网友風有霧分享！如侵犯到您的合法权益请联系我们删除