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 firefox兼容ie的dom方法脚本
May 18 Javascript
javascript document.images实例
May 27 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
react redux入门示例
Apr 19 Javascript
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
简单了解JavaScript作用域
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
自动分页的不完整解决方案
2007/01/12 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
基于js 本地存储(详解)
2017/08/16 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python找出9个连续的空闲端口
2016/02/01 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
柯基袜:Corgi Socks
2017/01/26 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
业务助理岗位职责
2013/11/18 职场文书
公司副总经理任命书
2014/06/05 职场文书
2014年药房工作总结
2014/11/22 职场文书
债务纠纷代理词
2015/05/25 职场文书
法制教育主题班会
2015/08/13 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
六年级作文之自救
2019/12/19 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL