jquery melaksanakan menu klik kanan plug-in_jquery

Hari ini apabila membangunkan projek, saya memerlukan fungsi yang menyerupai menu klik kanan tetikus. Maksudnya, apabila anda mengklik kanan tetikus pada halaman web, bukan menu sistem yang muncul tetapi kandungan yang telah kami rumuskan. Ini boleh mengembangkan fungsi klik kanan. Tidak banyak yang boleh dikatakan tentang proses pelaksanaan Kod dan kesannya adalah seperti berikut:

bahagian js:

Salin kod Kod adalah seperti berikut:

//Buat menu klik kanan
var epMenu={
​ create:function(point,option){
        var menuNode=document.getElementById('epMenu');
           if(!menuNode){
                         //Buat nod menu apabila tiada sesiapa
              menuNode=document.createElement("div");
               menuNode.setAttribute('class','epMenu');
               menuNode.setAttribute('id','epMenu');
            } lain $(menuNode).html('');//Kosongkan kandungan di dalam
                             
$(menuNode).css({left:point.left 'px',top:point.top 'px'});
untuk(var x dalam pilihan){
            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();
}  
};

Bahagian css kod adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

/*Menu klik kanan*/
.epMenu{ lebar:120px; latar belakang:#f0f0f0; .epMenu a{ display:blok; tinggi baris:25px; -saiz:14px; kursor: lalai;}
.epMenu a:hover{ background:#fff;}

Buat kod panggilan seperti berikut:

Salin kod Kod adalah seperti berikut:

epMenu.create({left:500,top:500},[{name:'a1','action':addText},{name:'b222','action':addBtn},{name:'Tambah komponen gambar ','action':addImage}]);

Kod panggilan pemusnahan adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

epMenu.destory();

Kesannya adalah seperti berikut:

Arahan panggilan:

Buat: epMenu.create(titik, pilihan);

titik ialah jenis integer, menunjukkan kedudukan menu, berbanding penjuru kiri sebelah atas penyemak imbas.

Contoh: {kiri:100, atas:500}

jenis tatasusunan json pilihan, mewakili item menu, nama mewakili nama dan tindakan mewakili tindakan yang dicetuskan oleh klik.

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

Kemusnahan: epMenu.destory();

Kemusnahan tidak memerlukan parameter.

Perkara ini sebenarnya sangat mudah! Ia juga boleh dikembangkan, seperti menambah gambar, menu sekunder, dsb. Memandangkan keperluan pembangunan projek ini agak mudah, itu sahaja.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.