Sé que esta pregunta es muy antigua, pero surgió el mismo problema y lo resolví yo mismo, así que respondo en caso de que alguien encuentre esto a través de Google como lo hice yo. Basé mi solución en la de @ Andrew, pero básicamente modifiqué todo después.
EDITAR : al ver cuán popular ha sido esto últimamente, decidí actualizar también los estilos para que se parezca más a 2014 y menos a Windows 95. Solucioné los errores que @Quantico y @Trengot descubrieron, así que ahora es una respuesta más sólida.
EDIT 2 : lo configuré con StackSnippets ya que son una nueva característica realmente genial. Dejo el buen jsfiddle aquí para referencia (haga clic en el cuarto panel para verlos funcionar).
Nuevo fragmento de pila:
// 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
Nota: es posible que vea algunos pequeños errores (menú desplegable lejos del cursor, etc.), asegúrese de que funcione en jsfiddle , ya que es más similar a su página web de lo que podría ser StackSnippets.
Francisco Presencia
fuente
Como dijo Adrian, los complementos van a funcionar de la misma manera. Hay tres partes básicas que necesitará:
1: controlador de
'contextmenu'eventos para eventos:Aquí, puede vincular el controlador de eventos a cualquier selector para el que desee mostrar un menú. Elegí todo el documento.
2: controlador de
'click'eventos para eventos (para cerrar el menú personalizado):3: CSS para controlar la posición del menú:
Lo importante con el CSS es incluir el
z-indexyposition: absoluteNo sería demasiado difícil envolver todo esto en un sofisticado complemento jQuery.
Puede ver una demostración simple aquí: http://jsfiddle.net/andrewwhitaker/fELma/
fuente
event.targetinterior del enlace de clic endocument. Si no está dentro del menú contextual, oculte el menú: jsfiddle.net/fELma/286fuente
aquí es un ejemplo de menú contextual del botón derecho en javascript: clic derecho menú contextual
Se utilizó el código javasScript sin formato para la funcionalidad del menú contextual. ¿Puedes comprobar esto? Espero que esto te ayude.
Código en vivo:
fuente
Se está anulando el menú contextual del navegador. No hay forma de aumentar el menú contextual nativo en ningún navegador importante.
Dado que el complemento está creando su propio menú, la única parte que realmente se está abstrayendo es el evento del menú contextual del navegador. El complemento crea un menú html basado en su configuración, luego coloca ese contenido en la ubicación de su clic.
Sí, esta es la única forma de crear un menú contextual personalizado. Obviamente, los diferentes complementos hacen las cosas un poco diferentes, pero todos anularán el evento del navegador y colocarán su propio menú basado en html en el lugar correcto.
fuente
Puede ver este tutorial: http://www.youtube.com/watch?v=iDyEfKWCzhg Asegúrese de que el menú contextual esté oculto al principio y tenga una posición absoluta. Esto asegurará que no habrá un menú contextual múltiple y una creación inútil del menú contextual. El enlace a la página se coloca en la descripción del video de YouTube.
fuente
Sé que esto también es bastante viejo. Recientemente tuve la necesidad de crear un menú contextual que inyecte en otros sitios que tienen diferentes propiedades basadas en el elemento en el que se hizo clic.
Es bastante difícil, y probablemente haya mejores formas de lograrlo. Utiliza el menú contextual jQuery Biblioteca ubicada aquí
Disfruté creándolo y aunque ustedes podrían tener algo de utilidad.
Aquí está el violín . Espero que pueda ayudar a alguien por ahí.
fuente
Tengo una implementación agradable y fácil usando bootstrap de la siguiente manera.
fuente