Как написать собственное меню правой кнопкой мыши и отключить настройки по умолчанию, используя jquery / javascript - PullRequest
Новая
       14

Как написать собственное меню правой кнопкой мыши и отключить настройки по умолчанию, используя jquery / javascript

18 голосов
/ 20 сентября 2009

Я успешно отключил событие правого клика на странице, над которой я работаю, используя jquery. Я хочу создать меню правой кнопки мыши. Как я могу это сделать? Нужна ли соответствующая настройка css, чтобы она работала (то есть «позиция»)?

Ответы [ 3 ]

11 голосов
/ 20 сентября 2009

Существуют различные плагины контекстного меню jQuery, готовые к использованию:

3 голосов
/ 20 сентября 2009

Этот пример работает, хотя это глупо. В обработчике контекстного меню вы могли бы показать DIV в определенном месте на экране с выбранными вами элементами. Насколько я знаю, нет способа настроить элементы в контекстном меню, которое появляется при щелчке правой кнопкой мыши по элементам. 

<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>
1 голос
/ 23 мая 2012

Также имеется этот плагин: Контекстное меню Audero . Это бесплатно и очень просто в использовании.

...