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

插件下载地址:
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<</span>ul>menu.
itemStyle
AnobjectcontainingstyleName:valuepairsforstylingthe<</span>li>elements.
itemHoverStyle
AnobjectcontainingstyleName:valuepairsforstylingthehoverbehaviourof<</span>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,并且可以自定义样式.

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

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

<</span>hr/>

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

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

<</span>divid="myMenu3">
<</span>ul>
<</span>liid="item_1">csdn</</span>li>
<</span>liid="item_2">javaeye</</span>li>
<</span>liid="item_3">itpub</</span>li>
</</span>ul>
</</span>div>
</</span>BODY>
<</span>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;
}

});



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

  

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

更多阅读

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

很多时候我们用鼠标右键点击某个文件的时候,列表中会有很多选项,部分选项是系统默认的,而部分选项是安装某些软件的时候附加上去的。对于一些不常用的内容,可以通过右键菜单管理把它去掉。或者对于一些常用的功能,可以增加上。360鼠标右

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

Eclipse的编辑功能非常强大,掌握了Eclipse快捷键功能,能够大大提高开发效率。Eclipse中有如下一些和编辑相关的快捷键。开发工具之Eclipse快捷键——步骤/方法开发工具之Eclipse快捷键 1、【ALT+/】此快捷键为用户编辑的好帮手,能为用

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

win7鼠标右键菜单清理 win7右键菜单设置——简介虽然我们现在打开某个软件都是双击解决完事,但是偶尔我们需要右键属性的时候,可以看到右键菜单拖拖拉拉长长的一堆,占了大半个屏幕,看起来绝对不美观、不简洁,这是由于长期使用电脑中安装

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

王孟英, 医案<目录><篇名>卷五属性:高汉芳患滞下色酱。日数十行。年已七十七岁。自去秋以来。渐形疲惫。即服补药。驯致见痢。黄某径用温补。势乃剧。孟英诊之。右脉弦细芤迟。口渴溲涩。时时面赤自汗。乃吸受暑邪。误作虚治。幸其所

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