jquery implements right-click menu plug-in

jquery implements right-click menu plug-in_jquery

WBOY

Release： 2016-05-16 16:07:15

Original

1272 people have browsed it

Today when developing a project, I need a function that simulates the mouse right-click menu. That is to say, when you right-click the mouse on the web page, it is not the system menu that pops up but the content we have formulated. This can expand the functions of the right click. Not much to say about the implementation process. The code and effects are as follows:

js part:

Copy code The code is as follows:

//Create right-click menu

var epMenu={

​ create:function(point,option){

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

           if(!menuNode){

                         //Create a menu node when there is no one 

              menuNode=document.createElement("div");

               menuNode.setAttribute('class','epMenu');

               menuNode.setAttribute('id','epMenu');

            }else $(menuNode).html('');//Clear the content inside

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

}  

};

The css part of the code is as follows:

Copy code The code is as follows:

/*Right-click menu*/

.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:Microsoft Yahei; font-size:14px; cursor:default;}

.epMenu a:hover{ background:#fff;}

Create the calling code as follows:

Copy code The code is as follows:

epMenu.create({left:500,top:500},[{name:'a1','action':addText},{name:'b222','action':addBtn},{name:'Add picture component ','action':addImage}]);

The destruction call code is as follows:

Copy code The code is as follows:

epMenu.destory();

The effect is as follows:

Calling instructions:

Create: epMenu.create(point,option);

point is an integer type, indicating the position of the menu, relative to the upper left corner of the browser.

Example: {left:100, top:500}

option json array type, represents the menu item, name represents the name, and action represents the action triggered by the click.

Example: [{name:'a1','action':addText},{name:'b222','action':addBtn},{name:'Add Image Component','action':addImage}]

Destruction: epMenu.destory();

Destruction requires no parameters.

This thing is actually very simple! It can also be expanded, such as adding pictures, secondary menus, etc. Since the development requirements of this project are relatively simple, that’s it.

The above is the entire content of this article, I hope you all like it.