jquery實(shí)現(xiàn)右鍵菜單插件
今天開(kāi)發(fā)一個(gè)項(xiàng)目的時(shí)候需要一個(gè)模擬鼠標(biāo)右鍵菜單的功能。也就是在網(wǎng)頁(yè)點(diǎn)擊鼠標(biāo)右鍵的時(shí)候不是彈出系統(tǒng)的菜單而是我們制定的內(nèi)容。這樣可以拓展右鍵的功能。實(shí)現(xiàn)過(guò)程不多說(shuō)了，寫出來(lái)的代碼和效果如下：
js部分：
//創(chuàng)建右鍵菜單
var epMenu={
create:function(point,option){
var menuNode=document.getElementById('epMenu');
if(!menuNode){
//沒(méi)有菜單節(jié)點(diǎn)的時(shí)候創(chuàng)建一個(gè)
menuNode=document.createElement("div");
menuNode.setAttribute('class','epMenu');
menuNode.setAttribute('id','epMenu');
}else $(menuNode).html('');//清空里面的內(nèi)容
$(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;}
創(chuàng)建調(diào)用代碼如下：
epMenu.create({left:500,top:500},[{name:'a1','action':addText},{name:'b222','action':addBtn},{name:'添加圖片組件','action':addImage}]);
銷毀調(diào)用代碼如下：
epMenu.destory();
效果如下：
調(diào)用說(shuō)明：
創(chuàng)建：epMenu.create(point,option);
point 整數(shù)型，表示菜單的位置，相對(duì)瀏覽器左上角。
示例：{left:100, top:500}
option json數(shù)組型，表示菜單項(xiàng),name表示名稱，action表示點(diǎn)擊激發(fā)的動(dòng)作。
示例：[{name:'a1','action':addText},{name:'b222','action':addBtn},{name:'添加圖片組件','action':addImage}]
銷毀：epMenu.destory();
銷毀不需要參數(shù)。
這玩意其實(shí)很簡(jiǎn)單！還可以擴(kuò)展一下，比如添加圖片，二級(jí)菜單等等。由于這次項(xiàng)目開(kāi)發(fā)需求比較簡(jiǎn)單，就這么的吧。
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
- JQuery 動(dòng)態(tài)生成Table表格實(shí)例代碼
- jQuery動(dòng)態(tài)生成Bootstrap表格
- JQuery Ajax動(dòng)態(tài)生成Table表格
- Jquery 動(dòng)態(tài)生成表格示例代碼
- jquery創(chuàng)建表格(自動(dòng)增加表格)代碼分享
- 基于jquery的動(dòng)態(tài)創(chuàng)建表格的插件
- JQuery右鍵菜單插件ContextMenu使用指南
- jQuery右鍵菜單contextMenu使用實(shí)例
- jquery實(shí)現(xiàn)在網(wǎng)頁(yè)指定區(qū)域顯示自定義右鍵菜單效果
- jQuery實(shí)現(xiàn)自定義右鍵菜單的樹(shù)狀菜單效果
- jQuery實(shí)現(xiàn)右鍵菜單、遮罩等效果代碼
- jQuery動(dòng)態(tài)生成表格及右鍵菜單功能示例
相關(guān)文章
jquery中常用的SET和GET$(”#msg”).html循環(huán)介紹
jquery中常用的SET和GET$(”#msg”).html循環(huán)想必大家并不陌生吧，本文整理了一些，感興趣的朋友可以參考下2013-10-10
JQuery 進(jìn)入頁(yè)面默認(rèn)給已賦值的復(fù)選框打鉤
這篇文章主要介紹了JQuery 進(jìn)入頁(yè)面默認(rèn)給已賦值的復(fù)選框打鉤的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-03-03
通過(guò)pjax實(shí)現(xiàn)無(wú)刷新翻頁(yè)(兼容新版jquery)
這篇文章主要介紹了通過(guò)pjax實(shí)現(xiàn)無(wú)刷新翻頁(yè)，兼容新版jquery，使用心得方法,需要的朋友可以參考下2014-01-01
jQuery實(shí)現(xiàn)拖拽頁(yè)面元素并將其保存到cookie的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)拖拽頁(yè)面元素并將其保存到cookie的方法,涉及jQuery基于cookie針對(duì)頁(yè)面元素屬性的相關(guān)保存操作技巧,需要的朋友可以參考下2016-06-06
2013-05-05
這篇文章主要介紹了jQuery的層級(jí)查找方式,結(jié)合實(shí)例形式分析了jQuery常用的三種層級(jí)查找的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
ztree實(shí)現(xiàn)左邊動(dòng)態(tài)生成樹(shù)右邊為內(nèi)容詳情功能
zTree 是利用 JQuery 的核心代碼，實(shí)現(xiàn)一套能完成大部分常用功能的 Tree 插件。接下來(lái)通過(guò)本文給大家分享ztree實(shí)現(xiàn)左邊動(dòng)態(tài)生成樹(shù)右邊為內(nèi)容詳情功能，需要的朋友參考下吧2017-11-11
這篇文章主要為大家詳細(xì)介紹了jquery表單插件Autotab使用方法，Autotab自動(dòng)Tab文本框，感興趣的小伙伴們可以參考一下2016-06-06
JQuery+div+css 無(wú)限級(jí)聯(lián)樹(shù)實(shí)現(xiàn)代碼
JQuery+div+css 無(wú)限級(jí)聯(lián)樹(shù)實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-03-03
基于jquery實(shí)現(xiàn)在線選座訂座之影院篇
通過(guò)電商購(gòu)買過(guò)電影票的朋友都很熟悉此功能，那么在線選座訂座使用程序怎么實(shí)現(xiàn)的呢，接下來(lái)，給大家分享基于jquery實(shí)現(xiàn)在線選座訂座之影院篇，感興趣的朋友快來(lái)圍觀2015-08-08