jquery实现右键菜单插件

发布时间：2020-12-14 22:32:31 所属栏目：资源来源：网络整理

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

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

js部分：

复制代码代码如下:

//创建右键菜单

var epMenu={

    create:function(point,option){

        var menuNode=document.getElementById('epMenu');

        if(!menuNode){

            //没有菜单节点的时候创建一个

            menuNode=document.createElement("div");

            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':addImage}]

销毁：epMenu.destory();

销毁不需要参数。

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

以上所述就是本文的全部内容了，希望大家能够喜欢。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!