2009-09-20 9 views
18

का उपयोग करके डिफ़ॉल्ट को अक्षम करें, मैंने उस पेज पर राइट क्लिक इवेंट सफलतापूर्वक अक्षम कर दिया है जिसे मैं jquery का उपयोग करने पर काम कर रहा हूं। मैं एक कस्टमाइज़ राइट क्लिक मेनू बनाना चाहता हूं। मैं यह कैसे कर सकता हूँ? क्या इसे काम करने के लिए प्रासंगिक सीएसएस सेटिंग की आवश्यकता है (यानी "स्थिति")?अपना खुद का राइट क्लिक मेनू कैसे लिखें और jquery/javascript

+0

मैं आपको यह करने की सलाह नहीं दूंगा, जब तक कि आप उपयोगकर्ता को इसे बंद करने का विकल्प न दें - यह परेशान है, और चीजों को करने का "वेब" तरीका तोड़ देता है। उदाहरण के लिए, यदि कोई उपयोगकर्ता आपकी वेबसाइट से कोई छवि सहेजना चाहता था, तो वे इतनी आसानी से ऐसा करने में सक्षम नहीं होंगे (वे अभी भी इसे कर सकते हैं, बस हुप्स के माध्यम से जाने की आवश्यकता है)। – Chii

+7

कोई समस्या नहीं है क्योंकि मैं इसे इंट्रानेट पर किसी समूह के लिए एप्लिकेशन में उपयोग कर रहा हूं। – kratz

उत्तर

11

वहाँ बाहर विभिन्न jQuery संदर्भ मेनू प्लगइन्स रहे हैं, का उपयोग करने के लिए तैयार:

+0

क्या मैं संदर्भ मेनू प्लगइन पर नए फ़ंक्शन (डिफ़ॉल्ट प्रतिलिपि, संपादन, पेस्ट .. आदि से अलग) जोड़ सकता हूं? – kratz

3

यह उदाहरण, काम करता है, हालांकि यह घटिया है। आप अपने संदर्भमेनू हैंडलर में क्या कर सकते हैं, स्क्रीन पर किसी विशिष्ट स्थान पर आपके चयन के आइटम के साथ एक डीआईवी दिखाया जाता है। जहां तक ​​मुझे पता है, संदर्भ मेनू में आइटम्स को कस्टमाइज़ करने का कोई तरीका नहीं है जो तब दिखाई देता है जब आप तत्वों पर राइट-क्लिक करते हैं।

<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

यह प्लगइन भी है: Audero Context Menu। यह उपयोग करने के लिए स्वतंत्र और बहुत आसान है।

संबंधित मुद्दे