jquery实现右键菜单插件_jquery
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jquery实现右键菜单插件_jquery,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1850字,纯文字阅读大概需要3分钟。
内容图文
![jquery实现右键菜单插件_jquery](/upload/InfoBanner/zyjiaocheng/325/e436174a2cb44a45a716c602f5df7b93.jpg)
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();
效果如下:
调用说明:
创建: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();
销毁不需要参数。
这玩意其实很简单!还可以扩展一下,比如添加图片,二级菜单等等。由于这次项目开发需求比较简单,就这么的吧。
以上所述就是本文的全部内容了,希望大家能够喜欢。
内容总结
以上是互联网集市为您收集整理的jquery实现右键菜单插件_jquery全部内容,希望文章能够帮你解决jquery实现右键菜单插件_jquery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。