Saya tahu pertanyaan ini sudah sangat lama, tetapi baru saja muncul dengan masalah yang sama dan menyelesaikannya sendiri, jadi saya menjawab seandainya ada yang menemukan ini melalui google seperti yang saya lakukan. Saya mendasarkan solusi saya pada @ Andrew's, tetapi pada dasarnya memodifikasi semuanya sesudahnya.
EDIT : melihat betapa populernya ini akhir-akhir ini, saya memutuskan untuk memperbarui juga gaya agar terlihat lebih seperti 2014 dan kurang seperti windows 95. Saya memperbaiki bug @ Quantico dan @Trengot terlihat jadi sekarang ini jawaban yang lebih solid.
EDIT 2 : Saya mengaturnya dengan StackSnippets karena mereka adalah fitur baru yang sangat keren. Saya meninggalkan jsfiddle yang baik di sini untuk referensi pemikiran (klik pada panel 4 untuk melihat mereka bekerja).
Cuplikan Stack Baru:
// JAVASCRIPT (jQuery)
// Trigger action when the contexmenu is about to be shown
$(document).bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
// Show contextmenu
$(".custom-menu").finish().toggle(100).
// In the right position (the mouse)
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});
// If the document is clicked somewhere
$(document).bind("mousedown", function (e) {
// If the clicked element is not the menu
if (!$(e.target).parents(".custom-menu").length > 0) {
// Hide it
$(".custom-menu").hide(100);
}
});
// If the menu element is clicked
$(".custom-menu li").click(function(){
// This is the triggered action name
switch($(this).attr("data-action")) {
// A case for each action. Your actions here
case "first": alert("first"); break;
case "second": alert("second"); break;
case "third": alert("third"); break;
}
// Hide it AFTER the action was triggered
$(".custom-menu").hide(100);
});
/* CSS3 */
/* The whole thing */
.custom-menu {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
padding: 0;
}
/* Each of the items in the list */
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
list-style-type: none;
transition: all .3s ease;
user-select: none;
}
.custom-menu li:hover {
background-color: #DEF;
}
<!-- HTML -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<ul class='custom-menu'>
<li data-action="first">First thing</li>
<li data-action="second">Second thing</li>
<li data-action="third">Third thing</li>
</ul>
<!-- Not needed, only for making it clickable on StackOverflow -->
Right click me
Catatan: Anda mungkin melihat beberapa bug kecil (dropdown jauh dari kursor, dll), pastikan itu berfungsi di jsfiddle , karena itu lebih mirip dengan halaman web Anda daripada StackSnippets.
Francisco Presencia
sumber
Seperti yang dikatakan Adrian, plugin akan bekerja dengan cara yang sama. Ada tiga bagian dasar yang akan Anda butuhkan:
1: Penangan
'contextmenu'acara untuk acara:Di sini, Anda dapat mengikat pengendali acara ke pemilih mana pun yang ingin Anda tampilkan menu. Saya telah memilih seluruh dokumen.
2: Pengatur
'click'acara untuk acara (untuk menutup menu khusus):3: CSS untuk mengontrol posisi menu:
Yang penting dengan CSS adalah memasukkan
z-indexdanposition: absoluteTidak akan terlalu sulit untuk membungkus semua ini dalam plugin jQuery yang apik.
Anda dapat melihat demo sederhana di sini: http://jsfiddle.net/andrewwhitaker/fELma/
sumber
event.targetbagian dalam klik yang mengikat padadocument. Jika tidak ada di dalam menu konteks, sembunyikan menu: jsfiddle.net/fELma/286sumber
di sini adalah contoh untuk menu konteks klik kanan dalam javascript: Klik Kanan Menu Konteks
Kode javasScript mentah digunakan untuk fungsionalitas menu konteks. Tolong periksa ini, harap ini akan membantu Anda.
Kode Langsung:
sumber
Menu konteks browser sedang diganti. Tidak ada cara untuk menambah menu konteks asli di browser utama apa pun.
Karena plugin membuat menu sendiri, satu-satunya bagian yang benar-benar disarikan adalah acara menu konteks browser. Plugin membuat menu html berdasarkan konfigurasi Anda, lalu menempatkan konten itu di lokasi klik Anda.
Ya, ini adalah satu-satunya cara untuk membuat menu konteks kustom. Jelas, plugin yang berbeda melakukan hal yang sedikit berbeda, tetapi mereka semua akan menimpa acara browser dan menempatkan menu berbasis html mereka sendiri di tempat yang benar.
sumber
Anda dapat menonton tutorial ini: http://www.youtube.com/watch?v=iDyEfKWCzhg Pastikan menu konteks disembunyikan pada awalnya dan memiliki posisi absolut. Ini akan memastikan bahwa tidak akan ada banyak menu konteks dan pembuatan menu konteks yang tidak berguna. Tautan ke halaman ditempatkan dalam deskripsi video YouTube.
sumber
Saya tahu ini agak tua juga. Baru-baru ini saya perlu membuat menu konteks yang saya masukkan ke situs lain yang memiliki properti berbeda berdasarkan elemen yang diklik.
Ini agak kasar, dan ada kemungkinan cara yang lebih baik untuk mencapai ini. Itu menggunakan menu konteks jQuery Library yang terletak di sini
Saya senang menciptakannya dan meskipun kalian mungkin bisa menggunakannya.
Ini biola . Saya berharap semoga dapat membantu seseorang di luar sana.
sumber
Saya memiliki implementasi yang bagus dan mudah menggunakan bootstrap sebagai berikut.
sumber