[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:   [email protected] , 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><id="copy" href="#"><img src="../skins/default/contextmenu/icons/Copy.png"><span>复制</span></a></li>   
  3.   <li><id="create" href="#"><img src="../skins/default/contextmenu/icons/New.png"><span>新建</span></a></li>   
  4.   <div class="m-split"></div>   
  5.   <li><id="save" href="#"><img src="../skins/default/contextmenu/icons/Save.png"><span>保存</span></a></li>   
  6.   <li><id="table" href="#" class="cmDisable"><img src="../skins/default/contextmenu/icons/table.png"><span>表格</span></a></li>   
  7.   <li><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:[email protected]  
  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><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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。