jquery implementiert das Rechtsklick-Menü plug-in_jquery

Wenn ich heute ein Projekt entwickle, benötige ich eine Funktion, die das Kontextmenü der Maus simuliert. Das heißt, wenn Sie mit der rechten Maustaste auf die Webseite klicken, wird nicht das Systemmenü angezeigt, sondern der von uns formulierte Inhalt. Dadurch können die Funktionen des Rechtsklicks erweitert werden. Zum Implementierungsprozess gibt es nicht viel zu sagen:

js-Teil:

Code kopieren Der Code lautet wie folgt:

//Rechtsklick-Menü erstellen
var epMenu={
​ create:function(point,option){
        var menuNode=document.getElementById('epMenu');
           if(!menuNode){
                         //Erstelle einen Menüknoten, wenn niemand vorhanden ist
              menuNode=document.createElement("div");
               menuNode.setAttribute('class','epMenu');
               menuNode.setAttribute('id','epMenu');
            }else $(menuNode).html('');//Löschen Sie den Inhalt darin
                             
$(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();
}  
};

Der CSS-Teil des Codes lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

/*Rechtsklick-Menü*/
.epMenu{ width:120px; background:#f0f0f0; top:2px 2px 2px #807878; .epMenu a{ display:block height:25px; border-top:1px solid #fff; -size:14px; Cursor:default;}
.epMenu a:hover{ Hintergrund:#fff;}

Erstellen Sie den Aufrufcode wie folgt:

Code kopieren Der Code lautet wie folgt:

epMenu.create({left:500,top:500},[{name:'a1','action':addText},{name:'b222','action':addBtn},{name:'Bildkomponente hinzufügen ','action':addImage}]);

Der Zerstörungsaufrufcode lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

epMenu.destory();

Der Effekt ist wie folgt:

Anrufanweisungen:

Erstellen: epMenu.create(point,option);

point ist ein ganzzahliger Typ, der die Position des Menüs relativ zur oberen linken Ecke des Browsers angibt.

Beispiel: {left:100, top:500}

Option JSON-Array-Typ, stellt den Menüpunkt dar, Name stellt den Namen dar und Aktion stellt die durch den Klick ausgelöste Aktion dar.

Beispiel: [{name:'a1','action':addText},{name:'b222','action':addBtn},{name:'Add Image Component','action':addImage}]

Zerstörung: epMenu.destory();

Zerstörung erfordert keine Parameter.

Diese Sache ist eigentlich ganz einfach! Es kann auch erweitert werden, z. B. durch das Hinzufügen von Bildern, sekundären Menüs usw. Da die Entwicklungsanforderungen dieses Projekts relativ einfach sind, ist das alles.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.