JQuery之ContextMenu(右键菜单)
插件下载地址:http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js
压缩版:
http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js
Jquery主页:/
插件中的参数说明:
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>
<spanclass="demo1"style="color:green;">
右键点此
</span>
<hr/>
<divid="demo2">
右键点此
</div>
<hr/>
<divclass="demo3"id="dontShow">
不显示
</div>
<hr/>
<divclass="demo3"id="showOne">
显示第一项
</div>
<hr/>
<divclass="demo3"id="showAll">
显示全部
</div>
<hr/>
<!--右键菜单的源-->
<divclass="contextMenu"id="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>
<divclass="contextMenu"id="myMenu2">
<ul>
<liid="item_1">选项一</li>
<liid="item_2">选项二</li>
<liid="item_3">选项三</li>
<liid="item_4">选项四</li>
</ul>
</div>
<divclass="contextMenu"id="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> //------------------------------------------
关于JQuery的serialize方法.让我崩溃一天的问题解决了
这几天做一个Ajax像服务器动态提交的表单然后给出即时反馈.这些表单内容都是一系列的.内容大同小异.所以代码和页面结构也是大同小异.但是其中有一个页面使用AJAX始终无法提取到服务器值.反而将此页的整个render出来的页面显示出来.关键代码如下:
$(document).ready(function(){
$("#Submit").click(function(){
vara=$("#aspnetForm").serialize();
/*因为使用了masterpage,所以页面form的ID为aspnetForm*/
$.ajax({
url:"xxx.aspx",
type:"get",
data:a,
success:function(data){
$("#result").html(data);
}
});
});
});
后台代码简略如下.只是为了让大家明白意思:
protectedvoidPage_Load(objectsender,EventArgse)
{
if(Request.QueryString["length"]!=null)
{
Response.Clear();
Response.Write("这里是回传的数据");
Response.End();
}
}
如果觉得《JQuery之ContextMenu(右键菜单)》对你有帮助，请点赞、收藏，并留下你的观点哦！
