Jquery implements right-click menu plug-in and jquery right-click menu plug-in

Jquery implements right-click menu plug-in and jquery right-click menu plug-in

When developing a project today, You need to simulate the right-click menu function. That is, when you right-click a webpage, the system menu is not displayed, but the content we set. In this way, the right-click function can be expanded. The implementation process is not mentioned much. The written code and effects are as follows:

Js section:

Copy codeThe Code is as follows:
// Create a right-click menu
Var epMenu = {
Create: function (point, option ){
Var menuNode = document. getElementById ('epmenu ');
If (! MenuNode ){
// Create
MenuNode = document. createElement ("div ");
MenuNode. setAttribute ('class', 'epmenu ');
MenuNode. setAttribute ('id', 'epmenu ');
} Else consumer (menunodemo-.html (''); // clear the content

((Menunodemo-.css ({left: point. left + 'px ', top: point. top + 'px '});
For (var x in option ){
Var tempNode = document. createElement ("");
$ (TempNode). text (option [x] ['name']). on ('click', option [x]. action );
MenuNode. appendChild (tempNode );
}

$ ("Body"). append (menuNode );
},
Destory: function (){
$ (". EpMenu"). remove ();
}
};

The css code is as follows:

Copy codeThe Code is as follows:
/* Right-click the 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:; font-size: 14px; cursor: default ;}
. EpMenu a: hover {background: # fff ;}

The call code is as follows:

Copy codeThe Code is as follows:
EpMenu. create ({left: 500, top: 500}, [{name: 'a1', 'Action': addText}, {name: 'b222', 'Action ': addBtn}, {name: 'add image components', 'Action': addImage}]);

The destroy call code is as follows:

Copy codeThe Code is as follows:
EpMenu. destory ();

The effect is as follows:

Call description:

Create: epMenu. create (point, option );

Point integer, indicating the menu position, relative to the upper left corner of the browser.

Example: {left: 100, top: 500}

Option json array type, which indicates the menu item, name indicates the name, and action indicates the action triggered by clicking.

Example: [{name: 'a1', 'Action': addText}, {name: 'b222', 'Action': addBtn}, {name: 'add image components ', 'action': addImage}]

Destroy: epMenu. destory ();

Parameters are not required for destruction.

This is actually very simple! It can also be expanded, such as adding images and secondary menus. This is because the development requirements of this project are relatively simple.

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