jQuery Contextmenu右键菜单

[2012-04-12] Contextmenu 右键菜单 v0.1 版本发布

[功能] 在特定区域弹出右键菜单

[功能] 可以在弹出右键菜单区域内，再屏蔽某个小区域。

[功能] 有两种方式添加右键菜单项，参数配置添加和指定ID项。

[功能] 支持事件回调，有两种，一种以参数配置方式对应回调，指定ID项统一回调，可根据设置链接标签区别。

[2012-04-29]Contextmenu 右键菜单 v0.2版本更新

[修正] 修正了指定ID添加内容在不存在时的bug。

[新增] 新增了菜单失效后变成灰色，事件回调失效的功能。

[调整] 调整了部分css，源代码分为模型，和调试部分。

插件说明

Contextmenu 是一款基于 jQuery 的多功能对话框插件。

运行环境

兼容 IE6+、Firefox、Chrome、Opera 等主流浏览器。

使用授权

Contextmenu 永久免费使用，如果有好的建议，请 Email:   [email protected] ， Contextmenu 的完善需要大家的好建议。  

由于配置整体项目开发要用到右键菜单，比如表格，web桌面等。介绍右键菜单设计有哪些功能，可以根据配置文件注释得知。

var defaults={   


offsetX:2,//鼠标在X轴偏移量   


offsetY:2,//鼠标在Y轴偏移量   


speed:300,//特效速度   


flash:!1,//特效是否开启，默认不开启   


flashMode:'',//特效模式,与flash为真时使用   


cancel:!1,//排除不出现右键菜单区域   


items:[],//菜单项   


action:$.noop()//自由菜单项回到事件   


};   

关于右键菜单的添加有两种方式： 一种是以items项添加并直接带有事件回调；

<script type="text/javascript">   


$(function(){   


$('#WincontextMenu-Test').WinContextMenu({   


cancel:'.cancel',   


items:[{   


id:'Item1',   


text:'Item1项',   


icon:'../skins/default/contextmenu/icons/Sync.png',   


disable:!0,//新增加true/false   


action:function(){alert('first-item1')}//按照项添加   


},   


{   


id:'Item2',   


text:'Item2项',   


icon:'../skins/default/contextmenu/icons/Calendar.png',   


action:function(){alert('Second-item2')}//按照项添加   


}],   


action:function(e){alert(e.id);}//自由设计项事件回调   


});   


});   



</script>  

第二种在web页面中按指定的ID为WincontextMenu添加li标记

<div id="WincontextMenu" class="WincontextMenu" style="top:100px; left:230px; display:none;">   



  <li><a id="copy" href="#"><img src="../skins/default/contextmenu/icons/Copy.png"><span>复制</span></a></li>   




  <li><a id="create" href="#"><img src="../skins/default/contextmenu/icons/New.png"><span>新建</span></a></li>   




  <div class="m-split"></div>   




  <li><a id="save" href="#"><img src="../skins/default/contextmenu/icons/Save.png"><span>保存</span></a></li>   




  <li><a id="table" href="#" class="cmDisable"><img src="../skins/default/contextmenu/icons/table.png"><span>表格</span></a></li>   




  <li><a id="setup" href="#"><img src="../skins/default/contextmenu/icons/Pinion.png"><span>设置</span></a></li>   




</div>   

以上两种添加方式是以items项添加在前，按指定ID追加的排在后。

百闻不如一见，还是直接奔源代码去……本页面有下载。