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

效果如下:

调用说明:

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

销毁不需要参数。

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

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

时间: 2024-11-03 19:16:06

jquery实现右键菜单插件_jquery的相关文章

jquery实现在网页指定区域显示自定义右键菜单效果_jquery

本文实例讲述了jquery实现在网页指定区域显示自定义右键菜单效果.分享给大家供大家参考.具体如下: 这是一个jquery实现的网页右键菜单效果,与其它自定义的右键菜单不同之处在于,本菜单只在指定区域内才有效,若超出指定区域的话,点击右键后显示的仍是浏览器的右键菜单.运行效果后,请在橘色区域内点击鼠标右键,会弹出一个带图标的自定义右键菜单,和浏览器的右键菜单完全不一样哦! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-ar

jquery自定义右键菜单、全选、不连续选择_jquery

最近在项目中要实现一些自定义效果,例如右键菜单.全选.不连续选择等等,个人认为主要是理清楚逻辑和事件关系.要实现这些,也有现成的插件可以用,如jQuery UI的selectable. 1.右键菜单 当浏览网页时,单击鼠标右键(或ctrl+触模板左键)会出现浏览器默认的右键菜单项,就像这样子的: 但是当要对某个元素自定义右键,像这样子的: 就必须得先禁用浏览器默认的菜单,需要监听contextmenu事件,关键代码如下: $(function(){ $('#box').on('contextme

jQuery实现右键菜单、遮罩等效果代码_jquery

最近要做个某管理系统的界面,然后涉及到右键菜单,因为之前没有做过所以就做了一下~感觉还可以,不过我个人不是很喜欢右键菜单的这种形式. 操作:在固定区域内点击鼠标右键出现菜单,然后选择任意一项后进行对应页面的跳转.刚开始的想法是用catch..case..的方法,对应不同的选项,只改变弹出层里的内容,但是内容都要用jQuery生成拼接,所以选用了比较简单的页面跳转. 下面就只贴上一个示例页面的相关代码. 先上效果图: **index.html主要代码** <div id="myMenu&qu

jQuery EasyUI右键菜单实现关闭标签/选项卡_jquery

本文实例为大家分享了jQuery EasyUI右键菜单可以选择关闭标签/选项卡操作,供大家参考,具体内容如下 目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind("contextmenu", function(e){ return false; }); }); 效果图: 方式一: <%@ page language="java" import="java.uti

JQuery右键菜单插件ContextMenu使用指南_jquery

插件下载地址: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js 压缩版: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js Jquery主页:   http://jquery.com/ 通过此插件可以在不同的html元素内建立contextmenu,并且可以自定义样式. 复制代码

JQuery右键菜单插件ContextMenu使用指南

 通过此插件可以在不同的html元素内建立contextmenu,并且可以自定义样式.   代码如下: <HTML>  <HEAD>   <TITLE> JQuery右键菜单 </TITLE>   <script  src="jquery-1.2.6.min.js"></script>   <script src="jquery.contextmenu.r2.js"></scr

jquery事件机制扩展插件 jquery鼠标右键事件。_jquery

jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直接使用$().rightClick();来使用. jQuery的插件主要分3种类型 1.封装对象方法的插件 (这种

分享14个很酷的jQuery导航菜单插件_jquery

导航按钮是网站的非常重要的一部分,因其将网站的所有部分而集中一处,jQuery导航菜单插件在其中扮演重要的角色. 本文介绍了14个很酷的jQuery导航菜单插件,它们够漂亮.简单,并且完全兼容各种类型的web浏览器. 1.Facets Navigation Demo | Download 2.Rocking & Rolling Demo | Download 3.Garage Door Menu Demo | Download 4.Little Boxes Menu Demo | Downloa

JQuery右键菜单插件contextmenu事件控制右键事件

新的项目中要求在图片上不能进行点击下载,针对小白进行简单防盗链防下载!我想到了contextmenu事件控制右键事件,且兼容所有主流浏览器.实现原理是绑定contextmenu事件,阻止浏览器的默认事件,显示你的自定义菜单(或者直接阻止,以达到屏蔽右键菜单的效果).  代码如下 复制代码 window.onload = function(e) {     var showimgtag = document.getElementById('showimgtag'),         showimg