Jquery shortcut menu ins-jquery-js tutorial

This article will share with you how to use jquery to simulate the right-click menu plug-in and share the code. It is very practical. If you need it, you can refer to it. 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:

The 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 ("p ");
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:

The 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:

The 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:

The 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.