2009-09-20 11 views
18

Udało mi się wyłączyć zdarzenie prawego przycisku myszy na stronie, nad którą pracuję przy użyciu jquery. Chcę utworzyć niestandardowe menu z prawym przyciskiem myszy. Jak mogę to zrobić? Czy to wymaga odpowiedniego ustawienia css, aby działało (np. "Pozycja")?jak napisać własne menu z prawym przyciskiem myszy i wyłączyć domyślne za pomocą jquery/javascript

+0

Nie powinienem tego robić, chyba że dasz użytkownikowi opcję wyłączenia - denerwujące i przerywa "internetowy" sposób robienia rzeczy. Na przykład, jeśli użytkownik chciałby zapisać obraz ze swojej witryny, nie byłby w stanie tego zrobić tak łatwo (nadal mogą to robić, wystarczy przejść przez obręcze). – Chii

+7

Nie stanowi to problemu, ponieważ używam go do aplikacji dla grupy w intranecie. – kratz

Odpowiedz

3

Ten przykład działa, choć jest tandetna. To, co możesz zrobić w procedurze obsługi kontekstu, to pokazywanie DIV w określonej lokalizacji na ekranie z wybranymi elementami. O ile mi wiadomo, nie ma sposobu, aby dostosować elementy w menu kontekstowym, które pojawia się po kliknięciu prawym przyciskiem myszy elementów.

<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> 
Powiązane problemy