2009-09-20 11 views
18

Ich habe erfolgreich das Rechtsklick-Ereignis auf der Seite deaktiviert, an der ich mit jquery arbeite. Ich möchte ein benutzerdefiniertes Kontextmenü erstellen. Wie kann ich das machen? Benötigt dies eine relevante CSS-Einstellung, um es zum Laufen zu bringen (d. H. "Position")?Wie schreibe ich mein eigenes Rechtsklickmenü und deaktiviere den Standard unter Verwendung von jquery/javascript

+0

Ich würde Ihnen empfehlen, dies nicht zu tun, es sei denn, Sie geben dem Benutzer die Option, es auszuschalten - es ist ärgerlich, und bricht den "Web" Weg der Dinge zu tun. Zum Beispiel, wenn ein Benutzer ein Bild von Ihrer Website speichern wollte, wären sie nicht in der Lage, dies einfach zu tun (sie können es immer noch tun, müssen nur durch die Reifen gehen). – Chii

+7

Kein Problem, da ich es zu einer Anwendung für eine Gruppe in einem Intranet verwende. – kratz

Antwort

3

Dieses Beispiel funktioniert, wenn es kitschig ist. Was Sie in Ihrem Contextmenu-Handler tun könnten, ist ein DIV an einem bestimmten Ort auf dem Bildschirm mit Gegenständen Ihrer Wahl zu zeigen. Soweit ich weiß, gibt es keine Möglichkeit, die Elemente im Kontextmenü anzupassen, das angezeigt wird, wenn Sie mit der rechten Maustaste auf Elemente klicken.

<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

Es gibt auch dieses Plugin: Audero Context Menu. Es ist kostenlos und sehr einfach zu bedienen.

Verwandte Themen