jquery实现右键菜单插件

今天开发一个项目的时候需要一个模拟鼠标右键菜单的功能,复制代码 代码如下,今天开发一个项目的时候需要一个模拟鼠标右键菜单的功能,复制代码 代码如下

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

jquery实现右键菜单插件,jquery右键菜单插件

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

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();

效果如下:

图片 1

调用说明:

创建: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();

销毁不需要参数。

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

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

今天开发一个项目的时候需要一个模拟鼠标右键菜单的功能。也就是在网页点击鼠标右键的时候…

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();

效果如下:

图片 2

调用说明:

创建: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();

销毁不需要参数。

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

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

您可能感兴趣的文章:

  • JQuery
    动态生成Table表格实例代码
  • jQuery动态生成Bootstrap表格
  • JQuery
    Ajax动态生成Table表格
  • Jquery
    动态生成表格示例代码
  • jquery创建表格(自动增加表格)代码分享
  • 基于jquery的动态创建表格的插件
  • JQuery右键菜单插件ContextMenu使用指南
  • jQuery右键菜单contextMenu使用实例
  • jquery实现在网页指定区域显示自定义右键菜单效果
  • jQuery实现自定义右键菜单的树状菜单效果
  • jQuery实现右键菜单、遮罩等效果代码
  • jQuery动态生成表格及右键菜单功能示例