jquery实现右键菜单插件


Posted in Javascript onMarch 29, 2015

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

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

效果如下:

jquery实现右键菜单插件

调用说明:

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

销毁不需要参数。

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

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

Javascript 相关文章推荐
javascript显示用户停留时间的简单实例
Aug 05 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 #Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 #Javascript
JQuery调用绑定click事件的3种写法
Mar 28 #Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 #Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 #Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 #Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 #Javascript
You might like
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
php实现删除空目录的方法
2015/03/16 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
树结构之JavaScript
2017/01/24 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
Vue SPA 首屏优化方案
2021/02/26 Vue.js
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
python之mock模块基本使用方法详解
2019/06/27 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
Internet体系结构
2014/12/21 面试题
DELPHI面试题研发笔试试卷
2015/11/08 面试题
羽毛球社团活动总结
2014/06/27 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
Python matplotlib多个子图绘制整合
2022/04/13 Python
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python