jquery实现右键菜单插件

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

部分js:

复制代码如下：//创建右键菜单var EP Menu={创建：函数(点，选项){var Menu Node=文档。getElementByID ('EP菜单')；if(！MenuNode){ //当没有菜单节点时，创建MenuNode=document . create element(' div ')；menuNode.setAttribute('class '，' epMenu ')；menuNode.setAttribute('id '，' epMenu ')；}else $(menuNode)。html(“”)；//清空内容$(menu node)。CSS ({left:point。左' px '，顶部：点。top ' px ' })；for(选项中的var x){ var tempNode=document . create element(' a ')；$(tempNode)。文本(选项[x]['name'])。打开('点击'，选项[x]。行动)；menunode . appendchild(tempNode)；} $(“body”)。追加(菜单代码)；}，destory:function(){ $('。epMenu’)。移除()；} };

css代码的一部分如下：

复制代码如下：/*右键菜单*/。epMenu { width:120px背景技术： # f0f 0；位置：固定；left:0top:0box-shadow :2 px 2px 2px # 807878；}.epMenu a { display:blockheight:25px线高：25 px；左衬垫left:15pxborder-top:1px实心# e0e0e0border-bottom:1px实心# fffFont-family:微软雅黑；font-size :14 px；cursor:default}.epMenu a : hover { background : # fff；}

按如下方式创建调用代码：

复制代码如下： epmenu . create({ left :500，top:500}，[{name:' a1 '，action ' :addtext }，{name3360' b222 '，action ' :addbtn }，{name:}

销毁调用代码如下：

复制代码如下： epmenu . destory()；

效果如下：

通话描述：

Create: epMenu.create(点，选项)；

指示菜单相对于浏览器左上角的位置的点整数。

示例：{left:100，top:500}

选项json数组，表示菜单项，名称表示名称，动作表示点击触发的动作。

例如：[{name:' a1 '，' action' :addtext}，{name:' b222 '，' action' :addbtn '，{name:' add picture component '，' action':addImage}]

destroy:epmenu . destory()；

销毁不需要参数。

这个事情其实很简单！也可以对其进行扩展，如添加图片、二级菜单等。既然这个项目的开发需求比较简单，那就到此为止吧。

以上就是本文的全部内容，希望大家喜欢。