I successfully disabled the right click event on the page that I am working on using jquery. I want to create a customize right click menu. How can I do this? Does this need relevant css setting to get it working (i.e. "position")?
-
I'd recommend you not to do this, unless you give the user the option to turn it off - its annoying, and breaks the "web" way of doing things. For example, if a user wanted to save a image from your website, they wouldnt be able to do so easily (they can still do it, just need to go thru hoops).Chii– Chii2009-09-20 03:29:10 +00:00Commented Sep 20, 2009 at 3:29
-
7Not a problem since I am using it to an application for a group on an intranet.kratz– kratz2009-09-21 20:23:45 +00:00Commented Sep 21, 2009 at 20:23
Add a comment
|
3 Answers
There are various jQuery context menu plugins out there, ready to use:
answered Sep 20, 2009 at 2:13
Christian C. Salvadó
831k185 gold badges929 silver badges845 bronze badges
1 Comment
kratz
can I add new functions (aside from default copy,edit, paste .. etc) on context menu plugin?
This example works, though it is cheesy. What you could do in your contextmenu handler is show a DIV at a specific location on the screen with items of your choosing. As far as I know, there is no way to customize the items within the context menu that appears when you right-click on elements.
<html>
<head>
<title>Context menu test</title>
<style type="text/css">
.element {
background-color: blue;
height: 300px;
width: 300px;
}
.popup {
background-color: red;
border: 1px solid black;
width: 100px;
height: 100px;
position: absolute;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".element").contextmenu
(
function(e) {
$("div.popup").remove();
$("<div class='popup'>Hi</div>").appendTo("body")
.css("left", e.pageX)
.css("top", e.pageY)
.show();
e.preventDefault(); // return false; also works
}
);
}
);
$.fn.contextmenu = function(func) {
return this.bind("contextmenu", func);
}
</script>
</head>
<body>
<div class="element"></div>
</body>
</html>
Comments
There is this plugin too: Audero Context Menu. It is free and very simple to use.
