18

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")?

JoshJordan
  • 12,676
  • 10
  • 53
  • 63
kratz
  • 576
  • 4
  • 9
  • 19
  • 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 Sep 20 '09 at 03:29
  • 7
    Not a problem since I am using it to an application for a group on an intranet. – kratz Sep 21 '09 at 20:23

3 Answers3

11

There are various jQuery context menu plugins out there, ready to use:

patrick
  • 11,519
  • 8
  • 71
  • 80
Christian C. Salvadó
  • 807,428
  • 183
  • 922
  • 838
  • can I add new functions (aside from default copy,edit, paste .. etc) on context menu plugin? – kratz Sep 20 '09 at 03:00
3

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>
David Andres
  • 31,351
  • 7
  • 46
  • 36
1

There is this plugin too: Audero Context Menu. It is free and very simple to use.

Aurelio De Rosa
  • 21,856
  • 8
  • 48
  • 71