jQuery Contextmenu右键菜单
作者:licqi 时间:2012-05-14阅读数:人阅读
[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桌面等。介绍右键菜单设计有哪些功能,可以根据配置文件注释得知。
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追加的排在后。 百闻不如一见,还是直接奔源代码去……本页面有下载。 代码片段(4) [文件] AdminInterface-Contextmenu(源码v0.2).rar ~ 268KB 下载
[代码] jquery UI contextmenu 右键菜单
/* * Author:antianlu * Date:2012-04-21 * Plugin name:jQuery.Contextmenu * Address:http://www.oschina.net/code/snippet_153403_9880 * Version:0.2 * Email:atlatl333@126.com */ (function(cm){ jQuery.fn.WinContextMenu=function(options){ var defaults={ offsetX:2,//鼠标在X轴偏移量 offsetY:2,//鼠标在Y轴偏移量 speed:300,//特效速度 flash:!1,//特效是否开启,默认不开启 flashMode:'',//特效模式,与flash为真时使用 cancel:!1,//排除不出现右键菜单区域 items:[],//菜单项 action:$.noop()//自由菜单项回到事件 }; var opt=cm.extend(true,defaults,options); function create(e){ var m=cm('<ul class="WincontextMenu"></ul>').appendTo(document.body); cm.each(opt.items,function(i,itm){ if(itm){ var row=cm('<li><a class="'+(itm.disable?'cmDisable':'')+'" ref="sitem" href="javascript:void(0)"><span></span></a></li>').appendTo(m); itm.icon?cm('<img src="'+itm.icon+'">').insertBefore(row.find('span')):''; itm.text?row.find('span').text(itm.text):''; if(itm.action) { row.find('a').click(function(){this.className!='cmDisable'?itm.action(e):null;});} } }); if(cm('#WincontextMenu').html()!=null){ cm(cm('#WincontextMenu').html().replace(/#/g,'javascript:void(0)')).appendTo(m);} return m; } if(opt.cancel){//排除不出现右键菜单区域 cm(opt.cancel).live('contextmenu',function(e){return false});} this.live('contextmenu',function(e){ var m=create(e).show(); var l = e.pageX + opt.offsetX, t = e.pageY+opt.offsetY, p={ wh:cm(window).height(), ww:cm(window).width(), mh:m.height(), mw:m.width() } t=(t+p.mh)>=p.wh?(t-=p.mh):t;//当菜单超出窗口边界时处理 l=(l+p.mw)>=p.ww?(l-=p.mw):l; m.css({zIndex:1000001, left:l, top:t}).live('contextmenu', function() { return false; }); m.find('a').click(function(e){//呼叫新从页面增加的菜单项 var b=$(this).attr('ref'); if(b!='sitem'){this.className!='cmDisable'?opt.action(this):null;} e.preventDefault(); }); cm(document.body).live('contextmenu click', function() {//防止有动态加载的标签失效问题 m.remove(); }); return false; }); return this; } })(jQuery);原文地址:http://www.oschina.net/code/snippet_153403_9880
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com
下一篇:HTML 5的一个滑动拼图游戏