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 相关文章推荐
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
java必学必会之static关键字
Dec 03 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
JS实现“全选”和"全不选"功能代码实例
Feb 06 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 Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
PHP $_FILES函数详解
2011/03/09 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
Python list操作用法总结
2015/11/10 Python
Python 爬虫图片简单实现
2017/06/01 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
Python单链表原理与实现方法详解
2020/02/22 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
什么是makefile? 如何编写makefile?
2012/08/08 面试题
宣传策划类求职信范文
2014/01/31 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
大学生心理活动总结
2014/07/04 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
委托书英文
2015/01/28 职场文书
办公室卫生管理制度
2015/08/04 职场文书