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 相关文章推荐
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
JS中使用textPath实现线条上的文字
Dec 25 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
纯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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
python基础教程之Filter使用方法
2017/01/17 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
Python统计单词出现的次数
2018/04/04 Python
浅谈Python中(&,|)和(and,or)之间的区别
2019/08/07 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
骆驼官方商城:CAMEL
2016/11/22 全球购物
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
退休教师欢送会主持词
2014/03/31 职场文书
素质拓展训练感想
2015/08/07 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python