今天開發(fā)一個項目的時候需要一個模擬鼠標右鍵菜單的功能。也就是在網(wǎng)頁點擊鼠標右鍵的時候不是彈出系統(tǒng)的菜單而是我們制定的內(nèi)容。這樣可以拓展右鍵的功能。實現(xiàn)過程不多說了，寫出來的代碼和效果如下：
js部分：
//創(chuàng)建右鍵菜單
var epMenu={
create:function(point,option){
var menuNode=document.getElementById('epMenu');
if(!menuNode){
//沒有菜單節(jié)點的時候創(chuàng)建一個
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)用說明：
創(chuàng)建：epMenu.create(point,option);
point 整數(shù)型，表示菜單的位置，相對瀏覽器左上角。
示例：{left:100, top:500}
option json數(shù)組型，表示菜單項,name表示名稱，action表示點擊激發(fā)的動作。
示例：[{name:'a1','action':addText},{name:'b222','action':addBtn},{name:'添加圖片組件','action':addImage}]
銷毀：epMenu.destory();
銷毀不需要參數(shù)。
這玩意其實很簡單！還可以擴展一下，比如添加圖片，二級菜單等等。由于這次項目開發(fā)需求比較簡單，就這么的吧。
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
