jquery實現右鍵選單外掛

jquery實現右鍵選單外掛

今天開發一個專案的時候需要一個模擬滑鼠右鍵選單的功能。也就是在網頁點選滑鼠右鍵的時候不是彈出系統的選單而是我們制定的內容。這樣可以拓展右鍵的功能。實現過程不多說了,寫出來的程式碼和效果如下:

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 動態生成Table表格例項程式碼jQuery動態生成Bootstrap表格JQuery Ajax動態生成Table表格Jquery 動態生成表格示例程式碼jquery建立表格(自動增加表格)程式碼分享基於jquery的動態建立表格的外掛JQuery右鍵選單外掛ContextMenu使用指南jQuery右鍵選單contextMenu使用例項jquery實現在網頁指定區域顯示自定義右鍵選單效果jQuery實現自定義右鍵選單的樹狀選單效果jQuery實現右鍵選單、遮罩等效果程式碼jQuery動態生成表格及右鍵選單功能示例