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 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
纯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
PHP pear安装配置教程
2016/05/14 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
Python中的各种装饰器详解
2015/04/11 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
使用python+whoosh实现全文检索
2019/12/09 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
python中字符串的编码与解码详析
2020/12/03 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
模具专业推荐信
2013/10/30 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
考试诚信承诺书
2014/05/23 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL