[xPlugins] 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:   atlatl333@126.com ， Contextmenu 的完善需要大家的好建议。

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

1. var defaults={
2. offsetX:2,//鼠标在X轴偏移量
3. offsetY:2,//鼠标在Y轴偏移量
4. speed:300,//特效速度
5. flash:!1,//特效是否开启，默认不开启
6. flashMode:'',//特效模式,与flash为真时使用
7. cancel:!1,//排除不出现右键菜单区域
8. items:[],//菜单项
9. action:$.noop()//自由菜单项回到事件
10. };

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

1. <script type="text/javascript">
2. $(function(){
3. $('#WincontextMenu-Test').WinContextMenu({
4. cancel:'.cancel',
5. items:[{
6. id:'Item1',
7. text:'Item1项',
8. icon:'../skins/default/contextmenu/icons/Sync.png',
9. disable:!0,//新增加true/false
10. action:function(){alert('first-item1')}//按照项添加
11. },
12. {
13. id:'Item2',
14. text:'Item2项',
15. icon:'../skins/default/contextmenu/icons/Calendar.png',
16. action:function(){alert('Second-item2')}//按照项添加
17. }],
18. action:function(e){alert(e.id);}//自由设计项事件回调
19. });
20. });
21. </script>

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

1. <div id="WincontextMenu" class="WincontextMenu" style="top:100px; left:230px; display:none;">
2. <li><a id="copy" href="#"><img src="../skins/default/contextmenu/icons/Copy.png"><span>复制</span></a></li>
3. <li><a id="create" href="#"><img src="../skins/default/contextmenu/icons/New.png"><span>新建</span></a></li>
4. <div class="m-split"></div>
5. <li><a id="save" href="#"><img src="../skins/default/contextmenu/icons/Save.png"><span>保存</span></a></li>
6. <li><a id="table" href="#" class="cmDisable"><img src="../skins/default/contextmenu/icons/table.png"><span>表格</span></a></li>
7. <li><a id="setup" href="#"><img src="../skins/default/contextmenu/icons/Pinion.png"><span>设置</span></a></li>
8. </div>

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

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

代码片段(4)

[文件] AdminInterface-Contextmenu(源码v0.2).rar ~ 268KB    下载(34)

[代码] jquery UI contextmenu 右键菜单

 

1. /*
2. * Author:antianlu
3. * Date:2012-04-21
4. * Plugin name:jQuery.Contextmenu
5. * Address：http://www.oschina.net/code/snippet_153403_9880
6. * Version:0.2
7. * Email:atlatl333@126.com
8. */
9. (function(cm){
10. jQuery.fn.WinContextMenu=function(options){
11. var defaults={
12. offsetX:2,//鼠标在X轴偏移量
13. offsetY:2,//鼠标在Y轴偏移量
14. speed:300,//特效速度
15. flash:!1,//特效是否开启，默认不开启
16. flashMode:'',//特效模式,与flash为真时使用
17. cancel:!1,//排除不出现右键菜单区域
18. items:[],//菜单项
19. action:$.noop()//自由菜单项回到事件
20. };
21. var opt=cm.extend(true,defaults,options);
22. function create(e){
23. var m=cm('<ul class="WincontextMenu"></ul>').appendTo(document.body);
24. cm.each(opt.items,function(i,itm){
25. if(itm){
26. var row=cm('<li><a class="'+(itm.disable?'cmDisable':'')+'" ref="sitem" href="javascript:void(0)"><span></span></a></li>').appendTo(m);
27. itm.icon?cm('<img src="'+itm.icon+'">').insertBefore(row.find('span')):'';
28. itm.text?row.find('span').text(itm.text):'';
29. if(itm.action) {
30. row.find('a').click(function(){this.className!='cmDisable'?itm.action(e):null;});}
31. }
32. });
33. if(cm('#WincontextMenu').html()!=null){
34. cm(cm('#WincontextMenu').html().replace(/#/g,'javascript:void(0)')).appendTo(m);}
35. return m;
36. }
37. if(opt.cancel){//排除不出现右键菜单区域
38. cm(opt.cancel).live('contextmenu',function(e){return false});}
39. this.live('contextmenu',function(e){
40. var m=create(e).show();
41. var l = e.pageX + opt.offsetX,
42. t = e.pageY+opt.offsetY,
43. p={
44. wh:cm(window).height(),
45. ww:cm(window).width(),
46. mh:m.height(),
47. mw:m.width()
48. }
49. t=(t+p.mh)>=p.wh?(t-=p.mh):t;//当菜单超出窗口边界时处理
50. l=(l+p.mw)>=p.ww?(l-=p.mw):l;
51. m.css({zIndex:1000001, left:l, top:t}).live('contextmenu', function() { return false; });
52. m.find('a').click(function(e){//呼叫新从页面增加的菜单项
53. var b=$(this).attr('ref');
54. if(b!='sitem'){this.className!='cmDisable'?opt.action(this):null;}
55. e.preventDefault();
56. });
57. cm(document.body).live('contextmenu click', function() {//防止有动态加载的标签失效问题
58. m.remove();
59. });
60. return false;
61. });
62. return this;
63. }
64. })(jQuery);

原文地址：http://www.oschina.net/code/snippet_153403_9880