jquery implémente le menu contextuel plug-in

jquery implémente le menu contextuel plug-in_jquery

WBOY

Libérer： 2016-05-16 16:07:15

original

1273 Les gens l'ont consulté

Aujourd'hui, lors du développement d'un projet, j'ai besoin d'une fonction qui simule le menu contextuel de la souris. C'est-à-dire que lorsque vous cliquez avec le bouton droit de la souris sur la page Web, ce n'est pas le menu système qui apparaît mais le contenu que nous avons formulé. Cela peut étendre les fonctions du clic droit. Pas grand chose à dire sur le processus de mise en œuvre. Le code et les effets sont les suivants :

partie js :

Copier le code Le code est le suivant :

//Créer un menu contextuel

var epMenu={

​ créer:fonction(point,option){

        var menuNode=document.getElementById('epMenu');

           if(!menuNode){

                         //Créer un nœud de menu lorsqu'il n'y a personne 

              menuNode=document.createElement("div");

               menuNode.setAttribute('class','epMenu');

               menuNode.setAttribute('id','epMenu');

            }else $(menuNode).html('');//Effacer le contenu à l'intérieur

$(menuNode).css({left:point.left 'px',top:point.top 'px'});

pour(var x en 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();

}  

};

La partie CSS du code est la suivante :

Copier le code Le code est le suivant :

/*Menu clic droit*/

.epMenu{ width:120px; background:#f0f0f0; position:left:0; top:0; box-shadow:2px 2px 2px #807878;}

.epMenu a{ display:block height:25px; line-height:25px; padding-left:15px; border-top:1px solid #e0e0e0; -taille : 14 px ; curseur : par défaut ;🎜>
.epMenu a:hover{ background:#fff;}

Créez le code d'appel comme suit :

Copier le code Le code est le suivant :

epMenu.create({left:500,top:500},[{name:'a1','action':addText},{name:'b222','action':addBtn},{name:'Ajouter un composant d'image ','action':addImage}]);

Le code d'appel de destruction est le suivant :

Copier le code Le code est le suivant :

epMenu.destory();

L'effet est le suivant :

Instructions d'appel :

Créer : epMenu.create(point,option);

point est un type entier, indiquant la position du menu, par rapport au coin supérieur gauche du navigateur.

Exemple : {gauche : 100, haut : 500>

option type de tableau json, représente l'élément de menu, name représente le nom et action représente l'action déclenchée par le clic.

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

Destruction : epMenu.destory();

La destruction ne nécessite aucun paramètre.

Cette chose est en fait très simple ! Il peut également être étendu, par exemple en ajoutant des images, des menus secondaires, etc. Puisque les exigences de développement de ce projet sont relativement simples, c'est tout.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.