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 相关文章推荐
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
Vue组件化开发思考
Feb 02 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
vue.js 实现点击展开收起动画效果
Jul 07 Javascript
vue实现放大镜效果
Sep 17 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 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中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
python列表操作使用示例分享
2014/02/21 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
Python手机号码归属地查询代码
2016/05/04 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
python实现梯度下降法
2020/03/24 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
利用python 下载bilibili视频
2020/11/13 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
美的官方商城:Midea
2016/09/14 全球购物
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
本科毕业论文致谢词
2015/05/14 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
python周期任务调度工具Schedule使用详解
2021/11/23 Python