2009-09-20 36 views
18

Tôi đã vô hiệu hóa thành công sự kiện nhấp chuột phải trên trang mà tôi đang sử dụng jquery. Tôi muốn tạo menu tùy chỉnh nhấp chuột phải. Tôi có thể làm cái này như thế nào? Điều này có cần cài đặt css liên quan để làm cho nó hoạt động (tức là "vị trí") không?cách viết trình đơn nhấp chuột phải của riêng bạn và tắt mặc định bằng cách sử dụng jquery/javascript

+0

Tôi khuyên bạn không nên làm điều này, trừ khi bạn cung cấp cho người dùng tùy chọn tắt nó - gây phiền nhiễu và phá vỡ cách "web" của mọi thứ. Ví dụ, nếu một người dùng muốn lưu một hình ảnh từ trang web của bạn, họ sẽ không thể làm như vậy một cách dễ dàng (họ vẫn có thể làm điều đó, chỉ cần đi qua hoops). – Chii

+7

Không phải là vấn đề vì tôi đang sử dụng nó cho một ứng dụng cho một nhóm trên mạng nội bộ. – kratz

Trả lời

3

dụ này hoạt động, mặc dù nó là cheesy. Những gì bạn có thể làm trong trình xử lý ngữ cảnh của bạn là hiển thị DIV ở một vị trí cụ thể trên màn hình với các mục bạn chọn. Theo tôi biết, không có cách nào để tùy chỉnh các mục trong menu ngữ cảnh xuất hiện khi bạn nhấp chuột phải vào các phần tử.

<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

Có plugin này quá: Audero Context Menu. Nó là miễn phí và rất đơn giản để sử dụng.

Các vấn đề liên quan