亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jquery實(shí)現(xiàn)右鍵菜單插件

 更新時(shí)間：2015年03月29日 09:32:55   投稿：hebedich  
本文給大家分享的是使用jquery實(shí)現(xiàn)模擬右鍵菜單插件的方法和代碼分享，十分的實(shí)用，有需要的小伙伴可以參考下。

今天開(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部分：

復(fù)制代碼 代碼如下:

//創(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部分代碼如下：

復(fù)制代碼 代碼如下:

/*右鍵菜單*/
.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)用代碼如下：

復(fù)制代碼 代碼如下:

epMenu.create({left:500,top:500},[{name:'a1','action':addText},{name:'b222','action':addBtn},{name:'添加圖片組件','action':addImage}]);

銷毀調(diào)用代碼如下：

復(fù)制代碼 代碼如下:

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)容了，希望大家能夠喜歡。

相關(guān)文章

最新評(píng)論