脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript开发中jquery实现右键菜单插件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

今天开发一个项目的时候需要一个模拟鼠标右键菜单的功能。也就是在网页点击鼠标右键的时候不是弹出系统的菜单而是我们制定的内容。这样可以拓展右键的功能。实现过程不多说了，写出来的代码和效果如下：

js部分：

 

代码如下:

//创建右键菜单
VAR epMenu={
    create:function(point,option){
        var menuNode=document.getElementById('epMenu');
        if(!menuNode){
            //没有菜单节点的时候创建一个
            menuNode=document.createElement("p");
            menuNode.setattribute('class','epMenu');
            menuNode.setAttribute('id','epMenu');
        }else $(menuNode).htML('');//清空里面的内容
       
        $(menuNode).css({left:point.left+'px',top:point.top+'px'});
        for(var x in option){
            var tempNode=document.createElement("a");
            $(tempNode).text(option[x]['name']).on('click',option[x].action);
            menuNode.apPEndChild(tempNode);
        }
       
        $("body").append(menuNode);
    },
    destory:function(){
        $(".epMenu").remove();
    }   
};

 

css部分代码如下：

 

代码如下:

/*右键菜单*/
.epMenu{ width:120px; background:#f0f0f0; posITion:fixed; left:0; top:0; box-shadow:2px 2px 2px 2px #807878;}
.epMenu a{ display:block; height:25px; line-height:25px; padding-left:15px; border-top:1px solid #e0e0e0; border-bottom:1px solid #fff; font-family:微软雅黑; font-Size:14px; cursor:default;}
.epMenu a:hover{ background:#fff;}

 

创建调用代码如下：

 

代码如下:

epMenu.create({left:500,top:500},[{name:'a1','action':addText},{name:'b222','action':addBTn},{name:'添加图片组件','action':addImage}]);

 

销毁调用代码如下：

 

代码如下:

epMenu.destory();

 

效果如下：

调用说明：

创建：epMenu.create(point,option);

point   整数型，表示菜单的位置，相对浏览器左上角。

          示例：{left:100, top:500}

option json数组型，表示菜单项,name表示名称，action表示点击激发的动作。

          示例：[{name:'a1','action':addText},{name:'b222','action':addBtn},{name:'添加图片组件','action':addImage}]

销毁：epMenu.destory();

销毁不需要参数。

这玩意其实很简单！还可以扩展一下，比如添加图片，二级菜单等等。由于这次项目开发需求比较简单，就这么的吧。

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ @L_360_1@，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript开发中jquery实现右键菜单插件全部内容，希望文章能够帮你解决javascript代码实例教程-JavaScript开发中jquery实现右键菜单插件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。