কীভাবে কোনও ওয়েবপৃষ্ঠায় কাস্টম রাইট-ক্লিক মেনু যুক্ত করবেন?

291

আমি আমার ওয়েব অ্যাপ্লিকেশনটিতে একটি কাস্টম রাইট-ক্লিক মেনু যুক্ত করতে চাই। কোনও প্রাক-নির্মিত গ্রন্থাগার ব্যবহার না করে এটি করা যায়? যদি তাই হয় তবে কীভাবে একটি সাধারণ কাস্টম রাইট-ক্লিক মেনু প্রদর্শিত হবে যা তৃতীয় পক্ষের জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করে না?

আমি গুগল ডক্স যা করে তার মতো কিছু লক্ষ্য করছি। এটি ব্যবহারকারীদের ডান-ক্লিক করতে এবং ব্যবহারকারীদের তাদের নিজস্ব মেনু প্রদর্শন করতে দেয়।

দ্রষ্টব্য: আমি বেশিরভাগ সময় থেকেই ইতিমধ্যে তৈরি কাউকে ব্যবহার করে কীভাবে নিজের নিজের তৈরি করা যায় তা শিখতে চাই, 3rd য় পক্ষের গ্রন্থাগারগুলি বৈশিষ্ট্যগুলি সহ প্রস্ফুটিত হয়েছে যখন আমি কেবল আমার প্রয়োজনীয় বৈশিষ্ট্য চাই তাই আমি এটি সম্পূর্ণরূপে হাতে তৈরি করা চাই আমাকে.

javascript  contextmenu  right-click 
— নিবন্ধিত ব্যবহারকারী
সূত্র
3
হোঁচট খেয়েছে: ডেভিডওয়ালস.নেম / এইচটিএমএল 5- কনটেক্সট- মেনু ভালোবাসা এইচটিএমএল 5
— টিডি_নিজবোয়ার
2
এটি অবশ্যই একটি সদৃশ নয়। যেহেতু প্রশ্নের তৃতীয় পক্ষের লাইব্রেরি ছাড়া উত্তরগুলির প্রয়োজন হয় এবং অন্যটি জ্যাকারি ব্যবহার করতে পারে (আমি কোনও ইউজারক্রিপ্টের অভ্যন্তরে প্রসঙ্গ মেনুর মতো একটি প্রসঙ্গ গুগলের ড্রাইভ লিখতে চেয়েছিলাম) ।
— ব্যবহারকারী 2284570
ঠিক আজই আমি এ সম্পর্কে আরও দুটি ভাল উদাহরণ পেয়েছি (আমি মনে করি): ডেমো 1 // ডেমো 2 (এই ডেমোটির jquery UI দরকার ) আমি আশা করি যে কারও কাছে সহায়তা করবে, বিবি।
— ড্রকো
2
কেবল এটি উল্লেখ করতে চাই যে এইচটিএমএল 5 প্রসঙ্গ মেনুটি কেবল ফায়ারফক্সের কয়েকটি সংস্করণে সমর্থিত এবং যতদূর আমি বলতে পারি এটির সমর্থন করে না nothing Version১ সংস্করণ হিসাবে ক্রোম এটিকে সমর্থন করে না।
— ড্যান উইলেট
2
প্রতিক্রিয়া ব্যবহারকারী লোকেদের জন্য - নেটিভ-মেনু বিদ্যমান কার্যকারিতা (অনুলিপি, নতুন ট্যাবে খুলুন, গুগল ইত্যাদিতে) এর সমস্ত প্রতিরূপ তৈরি করে যখন দেশীয় দেখতে (ব্রাউজারের উপর নির্ভর করে বিভিন্ন স্টাইল প্রয়োগ করে)। ডেমো
— সামাদ্দে

উত্তর:

247

আপনার প্রশ্নের উত্তর দেওয়া হচ্ছে - contextmenuনীচের মত ইভেন্টটি ব্যবহার করুন :

if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    alert("You've tried to open context menu"); //here you draw your own menu
    e.preventDefault();
  }, false);
} else {
  document.attachEvent('oncontextmenu', function() {
    alert("You've tried to open context menu");
    window.event.returnValue = false;
  });
}
<body>
  Lorem ipsum...
</body>
স্নিপেট প্রসারিত করুন

তবে আপনার নিজের জিজ্ঞাসা করা উচিত, আপনি কি সত্যিই ডিফল্ট ডান ক্লিকের আচরণটি ওভাররাইট করতে চান - এটি আপনি যে অ্যাপ্লিকেশনটি বিকাশ করছেন তার উপর নির্ভর করে।

JSFIDDLE

— রাদেক বেনকেল
সূত্র
12
অপেরা 11.01, ফায়ারফক্স 3.6.13, ক্রোম 9, সাফারি 5 (অ্যাডেন্টেন্টলিস্টারের মাধ্যমে সমস্ত 4) এবং আইই 8 (সংযুক্তি) তে পরীক্ষিত।
— রাদেক বেনকেল
54
ডান-ক্লিক মেনুটি কীভাবে অক্ষম করবেন তা আপনি কেবল ব্যাখ্যা করেছেন। কিভাবে আমাদের নিজস্ব মেনু তৈরি করবেন ??
— শাশ্বত
13
@ শাশ্বত আপনি যে জায়গাটি জানেন সেখানে ব্যবহারকারী ক্লিক করেছেন এবং আপনার আসল মেনু নেই। সেই জায়গায় একটি ধারক তৈরি করুন এবং আপনার মেনুটি সেখানে প্রদর্শন করুন।
— রাদেক বেনকেল
2
এটি সঠিক: ডেভেলপার.মোজিলা.আর.ইন- ইউএস / ডকস / ডিওএম / এলিমেন্ট.এডডিএভেন্টলিস্টনার ডকুমেন্টও একটি উপাদান।
— রাদেক বেনকেল
4
@ শানেহোবান আপনি কোডটি সন্ধান করার পরে আপনি এই লাইনটি দেখতে পাবেন e.preventDefault();। এই কারণেই নিয়মিত মেনু প্রদর্শিত হয় না। আপনি যা করতে পারেন তা হ'ল কিছু শর্তযুক্ত যুক্তি তৈরি করা যা যাচাই করে, ডান ক্লিক করার সময় কী টিপানো হয় এবং তারপরে কল না করা e.preventDefault()- আপনি তখন নিয়মিত ব্রাউজার মেনু পাবেন।
— রাদেক বেনকেল
54

আমার জন্য খুব দরকারী ছিল। আমার মতো লোকের পক্ষে, মেনুটির অঙ্কন প্রত্যাশা করে, আমি এখানে ডান-ক্লিক মেনুটি তৈরি করতে কোডটি রেখেছি:

$(document).ready(function() {


  if ($("#test").addEventListener) {
    $("#test").addEventListener('contextmenu', function(e) {
      alert("You've tried to open context menu"); //here you draw your own menu
      e.preventDefault();
    }, false);
  } else {

    //document.getElementById("test").attachEvent('oncontextmenu', function() {
    //$(".test").bind('contextmenu', function() {
    $('body').on('contextmenu', 'a.test', function() {


      //alert("contextmenu"+event);
      document.getElementById("rmenu").className = "show";
      document.getElementById("rmenu").style.top = mouseY(event) + 'px';
      document.getElementById("rmenu").style.left = mouseX(event) + 'px';

      window.event.returnValue = false;


    });
  }

});

// this is from another SO post...  
$(document).bind("click", function(event) {
  document.getElementById("rmenu").className = "hide";
});



function mouseX(evt) {
  if (evt.pageX) {
    return evt.pageX;
  } else if (evt.clientX) {
    return evt.clientX + (document.documentElement.scrollLeft ?
      document.documentElement.scrollLeft :
      document.body.scrollLeft);
  } else {
    return null;
  }
}

function mouseY(evt) {
  if (evt.pageY) {
    return evt.pageY;
  } else if (evt.clientY) {
    return evt.clientY + (document.documentElement.scrollTop ?
      document.documentElement.scrollTop :
      document.body.scrollTop);
  } else {
    return null;
  }
}
.show {
  z-index: 1000;
  position: absolute;
  background-color: #C0C0C0;
  border: 1px solid blue;
  padding: 2px;
  display: block;
  margin: 0;
  list-style-type: none;
  list-style: none;
}

.hide {
  display: none;
}

.show li {
  list-style: none;
}

.show a {
  border: 0 !important;
  text-decoration: none;
}

.show a:hover {
  text-decoration: underline !important;
}
<!-- jQuery should be at least version 1.7 -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="contextmenu.js"></script>
<link rel="stylesheet" href="contextmenu.css" />


<div id="test1">
  <a href="www.google.com" class="test">Google</a>
  <a href="www.google.com" class="test">Link 2</a>
  <a href="www.google.com" class="test">Link 3</a>
  <a href="www.google.com" class="test">Link 4</a>
</div>

<!-- initially hidden right-click menu -->
<div class="hide" id="rmenu">
  <ul>
    <li>
      <a href="http://www.google.com">Google</a>
    </li>

    <li>
      <a href="http://localhost:8080/login">Localhost</a>
    </li>

    <li>
      <a href="C:\">C</a>
    </li>
  </ul>
</div>
স্নিপেট প্রসারিত করুন

— মোহাম্মদ ইকজাস
সূত্র
7
@Schism Suffixed mouseY(event)এবং mouseX(event)সঙ্গে pxকরতে হিসাবে এটি প্রত্যাশিত কাজ: http://jsfiddle.net/a6w7n64o/ ।
— জানেতু
3
আপনি আইডি দ্বারা একটি উপাদান উল্লেখ করছেন testকিন্তু এর আইডিতে কোনও উপাদান নেই test। শ্রেণীর সাথে কেবলমাত্র উপাদান test।
— মার্শালের ডিউক שלום
1
@ অ্যাডেলফিয়া - যে কোনও কিছুই দেশীয় নয় এবং নিজের দ্বারা তৈরি করা হয়নি তা তৃতীয় পক্ষ। jQueryআসলে অতিরিক্ত জিনিস দিয়ে স্ফীত হয় না। এমন কোনও ডিগ্রি নয় যে এটি কিছুটা ধীর করে দেবে। এটি খুব দরকারী এবং jQueryএই উত্তরটিতে একইটি সহজেই স্ট্যান্ডার্ড JavaScriptকমান্ডে রূপান্তরিত হতে পারে । এটি মূল প্রশ্নের অনুরোধের সাথে 100% ইনলাইন নাও হতে পারে, তবে এটি অবশ্যই এটির সাথে 95% ইনলাইন রয়েছে।
— মার্শালের ডিউক שלום
6
ফায়ারফক্স 39-এ ডিফল্ট প্রসঙ্গটি এখনও কাস্টম মেনুর শীর্ষে প্রদর্শিত হয়। এছাড়াও কাস্টম মেনু প্রদর্শন করার পরে তাত্ক্ষণিকভাবে খারিজ।
— ম্যাট
1
@ ম্যাট আমার ফায়ারফক্স ৫৮ এর সাথে একই সমস্যা ছিল This এই পোস্টটি একটি সমাধান বর্ণনা করে যা আমার পক্ষে কাজ করে: stackoverflow.com/a/40545465/2922675 আপনি নথির জন্য ইভেন্ট-প্রসারণ নিষ্ক্রিয় করে উইন্ডো অবজেক্টে আপনার প্রসঙ্গ-মেনু-হ্যান্ডলারটি নিবন্ধ করুন । এখানে একটি অ্যাডজাস্টেড ফিডল রয়েছে: jsfiddle.net/jjgkLe3g/1
— নিলস-ও-মাদুর
27

কোনও বাহ্যিক লাইব্রেরি সহ কিছু দুর্দান্ত সিএসএস এবং কিছু অ-মানক এইচটিএমএল ট্যাগের সংমিশ্রণ একটি দুর্দান্ত ফলাফল দিতে পারে (জেএসফিডাল)

এইচটিএমএল

<menu id="ctxMenu">
    <menu title="File">
        <menu title="Save"></menu>
        <menu title="Save As"></menu>
        <menu title="Open"></menu>
    </menu>
    <menu title="Edit">
        <menu title="Cut"></menu>
        <menu title="Copy"></menu>
        <menu title="Paste"></menu>
    </menu>
</menu>

দ্রষ্টব্য: মেনু ট্যাগটি বিদ্যমান নেই, আমি এটি তৈরি করছি (আপনি কিছু ব্যবহার করতে পারেন)

সিএসএস

#ctxMenu{
    display:none;
    z-index:100;
}
menu {
    position:absolute;
    display:block;
    left:0px;
    top:0px;
    height:20px;
    width:20px;
    padding:0;
    margin:0;
    border:1px solid;
    background-color:white;
    font-weight:normal;
    white-space:nowrap;
}
menu:hover{
    background-color:#eef;
    font-weight:bold;
}
menu:hover > menu{
    display:block;
}
menu > menu{
    display:none;
    position:relative;
    top:-20px;
    left:100%;
    width:55px;
}
menu[title]:before{
    content:attr(title);
}
menu:not([title]):before{
    content:"\2630";
}

জাভাস্ক্রিপ্ট কেবল এই উদাহরণের জন্য, আমি উইন্ডোতে অবিরাম মেনুগুলির জন্য ব্যক্তিগতভাবে এটি সরিয়ে ফেলি

var notepad = document.getElementById("notepad");
notepad.addEventListener("contextmenu",function(event){
    event.preventDefault();
    var ctxMenu = document.getElementById("ctxMenu");
    ctxMenu.style.display = "block";
    ctxMenu.style.left = (event.pageX - 10)+"px";
    ctxMenu.style.top = (event.pageY - 10)+"px";
},false);
notepad.addEventListener("click",function(event){
    var ctxMenu = document.getElementById("ctxMenu");
    ctxMenu.style.display = "";
    ctxMenu.style.left = "";
    ctxMenu.style.top = "";
},false);

এছাড়াও মনে রাখবেন, আপনি সম্ভাব্য পরিবর্তন করতে পারেন menu > menu{left:100%;}করতে menu > menu{right:100%;}একটি মেনু যে বাম ডান দিক থেকে বিস্তৃতি জন্য। যদিও আপনাকে কোথাও একটি মার্জিন বা কিছু যুক্ত করতে হবে

— ইসহাক
সূত্র
20

এখানে এবং অন্যান্য প্রবাহের উত্তর অনুসারে, আমি এমন একটি সংস্করণ তৈরি করেছি যা CSS3 রূপান্তর সহ গুগল ক্রোমের মতো দেখাচ্ছে। JS Fiddle

আসুন শুরু করা যাক, যেহেতু এই পৃষ্ঠায় আমাদের উপরের জেএস রয়েছে, আমরা সিএসএস এবং লেআউটটি নিয়ে চিন্তা করতে পারি। আমরা যে লেআউটটি ব্যবহার করব তা হ'ল <a>একটি <img>উপাদান বা একটি ফন্টের দুর্দান্ত আইকন ( <i class="fa fa-flag"></i>) এবং <span>কীবোর্ড শর্টকাটগুলি দেখানোর জন্য একটি উপাদান । সুতরাং এটি কাঠামো:

<a href="#" onclick="doSomething()">
  <img src="path/to/image.gif" />
  This is a menu option
  <span>Ctrl + K</span>
</a>

আমরা এগুলিকে একটি ডিভের মধ্যে রাখব এবং সেই ডিভিটি ডান-ক্লিকে দেখাব। গুগল ক্রোমে তাদের মতো স্টাইল করি, আমরা কি করব?

#menu a {
  display: block;
  color: #555;
  text-decoration: no[...]

এখন আমরা গৃহীত উত্তর থেকে কোড যুক্ত করব, এবং কার্সারের এক্স এবং ওয়াই মান পাব। এটি করার জন্য, আমরা ব্যবহার করব e.clientXএবং e.clientY। আমরা ক্লায়েন্ট ব্যবহার করছি, তাই মেনু ডিভ ঠিক করতে হবে।

var i = document.getElementById("menu").style;
if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    var posX = e.clientX;
    var posY = e.client[...]

আর এটাই! বিবর্ণ হয়ে ওঠার জন্য কেবল সিএসএস রূপান্তরগুলি যুক্ত করুন এবং হয়ে গেল!

কোড স্নিপেট দেখান

— স্টিফান স্ট্যানিসিক
সূত্র
এটি আমাকে একটি বিশাল মাথা ব্যথা বাঁচিয়েছে! ওপি যদি পুরো ওয়েবপৃষ্ঠায় কেবলমাত্র একটি ডিভ নয়, কেবল কোনও সাধারণ উপায় ব্যবহারের সন্ধান করে তবে এটি উত্তরটি গ্রহণ করা উচিত :)
— উডি
12

আপনি নিজের বডি ট্যাগটিতে নিম্নলিখিতগুলি যোগ করে প্রসঙ্গ মেনুটি কেবল ব্লক করার চেষ্টা করতে পারেন:

<body oncontextmenu="return false;">

এটি প্রসঙ্গ মেনুতে সমস্ত অ্যাক্সেস ব্লক করবে (ডান মাউস বোতাম থেকে নয় পাশাপাশি কীবোর্ড থেকেও)।

PS আপনি প্রসঙ্গ মেনুটি অক্ষম করতে চান এমন কোনও ট্যাগ এ এটি যুক্ত করতে পারেন

উদাহরণ স্বরূপ:

<div class="mydiv" oncontextmenu="return false;">

কেবলমাত্র সেই বিশেষ বিভাগে প্রসঙ্গ মেনু অক্ষম করবে

— by0
সূত্র
10 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>

<title>Context menu - LabLogic.net</title>

</head>
<body>

<script language="javascript" type="text/javascript">

document.oncontextmenu=RightMouseDown;
document.onmousedown = mouseDown; 



function mouseDown(e) {
    if (e.which==3) {//righClick
        alert("Right-click menu goes here");
    }
}


function RightMouseDown() { return false; }

</script>

</body>
</html>

পরীক্ষিত এবং অপেরা 11.6, ফায়ারফক্স 9.01, ইন্টারনেট এক্সপ্লোরার 9 এবং ক্রোম 17 এ কাজ করে আপনি জাভাস্ক্রিপ্টের ডান ক্লিক মেনুতে একটি কাজের নমুনা পরীক্ষা করতে পারেন

— LabLogic
সূত্র
এটি কাজ করে তবে আপনার পৃষ্ঠায় ডেমো মেনুটি খুব ছোট এবং সঙ্কুচিত। যদিও ভাল উদাহরণ।
— ডেভিড মিলার
2
আপনি যদি তিন বোতামের মাউস ব্যবহার করেন তবে এটি কাজ করে। Ctrl- ক্লিক ব্যবহারকারীকে উচ্চ এবং শুকনো ছেড়ে দেয়। @ সিংগলসের কাছে আরও ভাল পরামর্শ রয়েছে, যদিও তা কল্পনাতে কিছুটা বাদ দেয়।
— এজেফারাকাস
7

আমি জানি এটি ইতিমধ্যে উত্তর দেওয়া হয়েছে, তবে দেশীয় প্রসঙ্গ মেনুটি অদৃশ্য হয়ে যেতে এবং ব্যবহারকারী যেখানে ক্লিক করেছে তা এটি প্রদর্শন করার জন্য আমি দ্বিতীয় উত্তরের সাথে কুস্তি করে কিছু সময় ব্যয় করেছি ।
এইচটিএমএল

<body>
    <div id="test1">
        <a href="www.google.com" class="test">Google</a>
        <a href="www.google.com" class="test">Link 2</a>
        <a href="www.google.com" class="test">Link 3</a>
        <a href="www.google.com" class="test">Link 4</a>
    </div>

    <!-- initially hidden right-click menu -->
    <div class="hide" id="rmenu">
        <ul>
            <li class="White">White</li>
            <li>Green</li>
            <li>Yellow</li>
            <li>Orange</li>
            <li>Red</li>
            <li>Blue</li>
        </ul>
    </div>
</body>

সিএসএস

.hide {
  display: none;
}

#rmenu {
  border: 1px solid black;
  background-color: white;
}

#rmenu ul {
  padding: 0;
  list-style: none;
}
#rmenu li
{
  list-style: none;
  padding-left: 5px;
  padding-right: 5px;
}

জাভাস্ক্রিপ্ট

if (document.getElementById('test1').addEventListener) {
    document.getElementById('test1').addEventListener('contextmenu', function(e) {
            $("#rmenu").toggleClass("hide");
            $("#rmenu").css(
              {
                position: "absolute",
                top: e.pageY,
                left: e.pageX
              }
            );
            e.preventDefault();
     }, false);
}

// this is from another SO post...  
$(document).bind("click", function(event) {
  document.getElementById("rmenu").className = "hide";
});

কোডপেন উদাহরণ

— ক্রিস্টেন নীলসেন
সূত্র
6

এটা চেষ্টা কর

$(function() {
var doubleClicked = false;
$(document).on("contextmenu", function (e) {
if(doubleClicked == false) {
e.preventDefault(); // To prevent the default context menu.
var windowHeight = $(window).height()/2;
var windowWidth = $(window).width()/2;
if(e.clientY > windowHeight && e.clientX <= windowWidth) {
  $("#contextMenuContainer").css("left", e.clientX);
  $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
  $("#contextMenuContainer").css("right", "auto");
  $("#contextMenuContainer").css("top", "auto");
} else if(e.clientY > windowHeight && e.clientX > windowWidth) {
  $("#contextMenuContainer").css("right", $(window).width()-e.clientX);
  $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
  $("#contextMenuContainer").css("left", "auto");
  $("#contextMenuContainer").css("top", "auto");
} else if(e.clientY <= windowHeight && e.clientX <= windowWidth) {
  $("#contextMenuContainer").css("left", e.clientX);
  $("#contextMenuContainer").css("top", e.clientY);
  $("#contextMenuContainer").css("right", "auto");
  $("#contextMenuContainer").css("bottom", "auto");
} else {
  $("#contextMenuContainer").css("right", $(window).width()-e.clientX);
  $("#contextMenuContainer").css("top", e.clientY);
  $("#contextMenuContainer").css("left", "auto");
  $("#contextMenuContainer").css("bottom", "auto");
}
 $("#contextMenuContainer").fadeIn(500, FocusContextOut());
  doubleClicked = true;
} else {
  e.preventDefault();
  doubleClicked = false;
  $("#contextMenuContainer").fadeOut(500);
}
});
function FocusContextOut() {
 $(document).on("click", function () {
   doubleClicked = false; 
   $("#contextMenuContainer").fadeOut(500);
   $(document).off("click");           
 });
}
});

http://jsfiddle.net/AkshayBandivadekar/zakn7Lwb/14/

— AkshayBandivadekar
সূত্র
কোড দুর্দান্ত, তবে দয়া করে ওপিএস সমস্যাটি কী এবং এটি কীভাবে সমাধান করে তা সম্পর্কে কিছু বিবরণ অন্তর্ভুক্ত করুন।
— ররি ম্যাকক্রসন
আমি এই সমাধানটি পছন্দ করি, তবে ফায়ারফক্স 39-এ মেনুটি আসার পরে এটি তার নিজের উপর থেকে খারিজ হয়।
— ম্যাট
এই পৃষ্ঠাটি আসলে কাজ করে না যদি আপনি পৃষ্ঠাটিকে একটি স্ক্রোল রাখতে বাধ্য করেন (বলুন যে আপনি একগুচ্ছ ট্যাগ ট্যাগগুলি যোগ করেছেন) এবং এর নীচের অংশে কোথাও আছেন।
— ড্যানিয়েল
এটি কাজ করার জন্য আপনার পৃষ্ঠার এক্স এবং পেজওয়াইয়ের পরিবর্তে ক্লায়েন্টএক্স এবং ক্লায়েন্টওয়াই ব্যবহার করা উচিত; : খুঁজে বার করো এই মহান উত্তর stackoverflow.com/questions/9262741/...
— DanielM
হ্যাঁ, ড্যানিয়েলএম স্ক্রল করার সময় ডান ক্লিক মেনুতে সমস্যা রয়েছে তাই এটি পেজএক্স এবং পেজওয়াইয়ের পরিবর্তে ক্লায়েন্টএক্স এবং ক্লায়েন্টওয়াই ব্যবহার করে কাটিয়ে উঠেছে, আমি কোডে পরিবর্তন করেছি। সহায়তার জন্য ধন্যবাদ ...
— অক্ষয়বান্দিবাদেকার
5

সত্যিকারের গতিশীল রাইট ক্লিক প্রসঙ্গ মেনুটির জন্য খাঁটি জেএস এবং সিএসএস সমাধান, আইডি, লিংক ইত্যাদির জন্য পূর্বনির্ধারিত নামকরণের কনভেনশনের উপর ভিত্তি করে, জেএসফিডেল এবং কোডটি যে কোনও একক স্ট্যাটিক এইচটিএমএল পৃষ্ঠায় আপনি অনুলিপি করতে পারেন:

<html>

<head>
  <style>
    .cls-context-menu-link {
      display: block;
      padding: 20px;
      background: #ECECEC;
    }
    
    .cls-context-menu {
      position: absolute;
      display: none;
    }
    
    .cls-context-menu ul,
    #context-menu li {
      list-style: none;
      margin: 0;
      padding: 0;
      background: white;
    }
    
    .cls-context-menu {
      border: solid 1px #CCC;
    }
    
    .cls-context-menu li {
      border-bottom: solid 1px #CCC;
    }
    
    .cls-context-menu li:last-child {
      border: none;
    }
    
    .cls-context-menu li a {
      display: block;
      padding: 5px 10px;
      text-decoration: none;
      color: blue;
    }
    
    .cls-context-menu li a:hover {
      background: blue;
      color: #FFF;
    }
  </style>
</head>

<body>

  <!-- those are the links which should present the dynamic context menu -->
  <a id="link-1" href="#" class="cls-context-menu-link">right click link-01</a>
  <a id="link-2" href="#" class="cls-context-menu-link">right click link-02</a>

  <!-- this is the context menu -->
  <!-- note the string to=0 where the 0 is the digit to be replaced -->
  <div id="div-context-menu" class="cls-context-menu">
    <ul>
      <li><a href="#to=0">link-to=0 -item-1 </a></li>
      <li><a href="#to=0">link-to=0 -item-2 </a></li>
      <li><a href="#to=0">link-to=0 -item-3 </a></li>
    </ul>
  </div>

  <script>
    var rgtClickContextMenu = document.getElementById('div-context-menu');

    /** close the right click context menu on click anywhere else in the page*/
    document.onclick = function(e) {
      rgtClickContextMenu.style.display = 'none';
    }

    /**
     present the right click context menu ONLY for the elements having the right class
     by replacing the 0 or any digit after the "to-" string with the element id , which
     triggered the event
    */
    document.oncontextmenu = function(e) {
      //alert(e.target.id)
      var elmnt = e.target
      if (elmnt.className.startsWith("cls-context-menu")) {
        e.preventDefault();
        var eid = elmnt.id.replace(/link-/, "")
        rgtClickContextMenu.style.left = e.pageX + 'px'
        rgtClickContextMenu.style.top = e.pageY + 'px'
        rgtClickContextMenu.style.display = 'block'
        var toRepl = "to=" + eid.toString()
        rgtClickContextMenu.innerHTML = rgtClickContextMenu.innerHTML.replace(/to=\d+/g, toRepl)
        //alert(rgtClickContextMenu.innerHTML.toString())
      }
    }
  </script>
</body>

</html>
স্নিপেট প্রসারিত করুন

— ইওর্ডান জর্জিভ
সূত্র
এটি আমি প্রত্যাশার চেয়ে আরও বেশি উত্তর পেয়েছি, উদাহরণটিতে ডান ক্লিকের মেনুটি পরিবর্তিত করা হয়েছে
— জেসি রেজা খোরাসানী
হ্যাঁ, একটি অনুরূপ উদাহরণ হতে পারে: কোডেপেন.ইও / ইয়ারডেঞ্জেরজি / স্পেন / জিজেডব্লুজেড এবং চূড়ান্ত পণ্য: qto.fi/qto/view/concepts_doc (কেবল লগইনে ক্লিক করুন ...)
— ইয়ার্ডান জর্জিভ
3

এখানে একটি কার্যকর ওয়ার্কিং কোড উদাহরণ (জিকুয়ারি এবং অন্যান্য লাইব্রেরী ছাড়া) একটি কাস্টম প্রসঙ্গ মেনু কীভাবে তৈরি করবেন তার একটি খুব সুন্দর টিউটোরিয়াল ।

আপনি গিটহাবে তাদের ডেমো কোডও সন্ধান করতে পারেন ।

তারা একটি ধাপে ধাপে ধাপে ধরণের ব্যাখ্যা দেয় যা আপনি নিজের ডান-ক্লিকের প্রসঙ্গ মেনুটি (এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট কোড সহ) তৈরি করতে অনুসরণ করতে পারেন এবং সম্পূর্ণ উদাহরণ কোডটি দিয়ে শেষে সংক্ষিপ্ত করে রাখুন।

আপনি সহজেই অনুসরণ করতে পারেন এবং এটি আপনার নিজের প্রয়োজনের সাথে খাপ খাইয়ে নিতে পারেন। এবং জিকুয়েরি বা অন্যান্য গ্রন্থাগারের প্রয়োজন নেই।

তাদের উদাহরণ মেনু কোডটি দেখতে এইভাবে:

<nav id="context-menu" class="context-menu">
    <ul class="context-menu__items">
      <li class="context-menu__item">
        <a href="#" class="context-menu__link" data-action="View"><i class="fa fa-eye"></i> View Task</a>
      </li>
      <li class="context-menu__item">
        <a href="#" class="context-menu__link" data-action="Edit"><i class="fa fa-edit"></i> Edit Task</a>
      </li>
      <li class="context-menu__item">
        <a href="#" class="context-menu__link" data-action="Delete"><i class="fa fa-times"></i> Delete Task</a>
      </li>
    </ul>
  </nav>

কোডিংয়ে একটি কাজের উদাহরণ (টাস্ক লিস্ট) পাওয়া যাবে ।

— ForceOfWill
সূত্র
একটি সংক্ষিপ্ত সংক্ষিপ্তসার আপনার উত্তরের বৈধতা বিচার করতে পর্যালোচকদের (আমার মতো) সহায়তা করবে এবং কিছু পাঠককে সেই লিঙ্কটি অনুসরণ করা থেকে বাঁচাতে পারে। মাত্র একটি বা দুটি বাক্য জরিমানা হবে এবং খুব বেশি কাজ নয়।
— ইনগো কারকাত
@ ইঙ্গোকার্কাত আপনার পরামর্শের জন্য ধন্যবাদ। আমি কিছু ব্যাখ্যা যোগ। আশা করি আপনি এটি সহায়ক পেয়েছেন। এটা আমাকে অনেক সাহায্য করেছে।
— ফোর্সঅফুইল
2

আপনি এই কোড দিয়ে এটি করতে পারেন। এখানে স্বয়ংক্রিয় প্রান্ত সনাক্তকরণ সঙ্গে পূর্ণ টিউটোরিয়ালের জন্য ভিজিট করুন http://www.voidtricks.com/custom-right-click-context-menu/ 

$(document).ready(function () {
 $("html").on("contextmenu",function(e){
        //prevent default context menu for right click
        e.preventDefault();

        var menu = $(".menu"); 

        //hide menu if already shown
        menu.hide(); 

        //get x and y values of the click event
        var pageX = e.pageX;
        var pageY = e.pageY;

        //position menu div near mouse cliked area
        menu.css({top: pageY , left: pageX});

        var mwidth = menu.width();
        var mheight = menu.height();
        var screenWidth = $(window).width();
        var screenHeight = $(window).height();

        //if window is scrolled
        var scrTop = $(window).scrollTop();

        //if the menu is close to right edge of the window
        if(pageX+mwidth > screenWidth){
        menu.css({left:pageX-mwidth});
        }

        //if the menu is close to bottom edge of the window
        if(pageY+mheight > screenHeight+scrTop){
        menu.css({top:pageY-mheight});
        }

        //finally show the menu
        menu.show();
 }); 

 $("html").on("click", function(){
 $(".menu").hide();
 });
 });

`

— আনন্দ রোশন
সূত্র
1 
<script language="javascript" type="text/javascript">
  document.oncontextmenu = RightMouseDown; 
  document.onmousedown = mouseDown; 

  function mouseDown(e) {
    if (e.which==3) {//righClick
      alert("Right-click menu goes here");
    } 
  }

  function RightMouseDown() { 
    return false; 
  }
</script>
</body> 
</html>
— গ্রাহাম অ্যালেন
সূত্র
2
আপনি জানেন যে এমন একটি oncontextmenuইভেন্ট রয়েছে যা বহিস্কার হয় (সাধারণত ডান ক্লিকে)
— মেগাওয়াক
1

আপনি এটি করতে পারেন এমন একটি সহজ উপায় একটি জাভাস্ক্রিপ্ট ফাংশন ফিরিয়ে আনতে কনটেক্সটমেনু ব্যবহার করুন:

<input type="button" value="Example" onContextMenu="return RightClickFunction();">

<script>
 function RightClickFunction() {
  // Enter your code here;
  return false;
 }
</script>

এবং প্রবেশ করে return false;আপনি প্রসঙ্গ মেনু বাতিল করবেন।

আপনি যদি এখনও প্রসঙ্গ মেনু প্রদর্শন করতে চান তবে আপনি কেবল return false;লাইনটি সরাতে পারেন ।

— EpicNinjaCheese
সূত্র
1

অপেরা 12.17, ফায়ারফক্স 30, ইন্টারনেট এক্সপ্লোরার 9 এবং ক্রোমে 26.0.1410.64 পরীক্ষিত এবং কাজ করে 

document.oncontextmenu =function( evt ){
        alert("OK?");
        return false;
        }
— raphpell
সূত্র
1
প্রসঙ্গ মেনু প্রদর্শিত হবে কি সেই পাটটি সতর্কতা প্রদর্শন করবে না? এটি কীভাবে এটি অনুকূলিতকরণ করবে তা আমি দেখছি না।
— স্টিফেন অস্টেরমিলার
1 
<script>
function fun(){
document.getElementById('menu').style.display="block";
}

</script>
<div id="menu" style="display: none"> menu items</div>

<body oncontextmenu="fun();return false;">

আমি এখানে কি করছি

  1. আপনার নিজস্ব কাস্টম ডিভ মেনু তৈরি করুন এবং অবস্থান নির্ধারণ করুন: পরম এবং প্রদর্শন: কোনও ক্ষেত্রেই নয়।
  2. অনকেক্সটেমেনু ইভেন্টটিতে ক্লিক করার জন্য পৃষ্ঠা বা উপাদানটিতে যুক্ত করুন।
  3. মিথ্যা রিটার্ন সহ ডিফল্ট ব্রাউজার ক্রিয়া বাতিল করুন।

  4. ব্যবহারকারী আপনার নিজস্ব ক্রিয়াকলাপ প্রার্থনা করতে।

— ক্রিস এনিতান
সূত্র
0

আপনার মনে রাখা উচিত যে আপনি যদি ফায়ারফক্সের একমাত্র সমাধানটি ব্যবহার করতে চান তবে আপনি যদি এটি পুরো নথিতে যুক্ত করতে চান তবে contextmenu="mymenu"আপনাকে <html>ট্যাগটিতে ট্যাগটি যুক্ত করা উচিত body।
আপনার এদিকে নজর দেওয়া উচিত।

— WowOWwoW
সূত্র
0 
<html>
<head>
<style>
.rightclick {
    /* YOUR CONTEXTMENU'S CSS */
    visibility: hidden;
    background-color: white;
    border: 1px solid grey;
    width: 200px;
    height: 300px;
}
</style>
</head>
<body>
  <div class="rightclick" id="ya">
    <p onclick="alert('choc-a-late')">I like chocolate</p><br><p onclick="awe-so-me">I AM AWESOME</p>
  </div>
  <p>Right click to get sweet results!</p>
</body>
<script>
    document.onclick = noClick;
    document.oncontextmenu = rightClick;
    function rightClick(e) {
        e = e || window.event;
        e.preventDefault();
        document.getElementById("ya").style.visibility = "visible";
        console.log("Context Menu v1.3.0 by IamGuest opened.");
   }
function noClick() {
    document.getElementById("ya").style.visibility = "hidden";
    console.log("Context Menu v1.3.0 by IamGuest closed.");
}
</script>
<!-- Coded by IamGuest. Thank you for using this code! -->
</html>

আরও ভাল চেহারা, আরও দক্ষ প্রসঙ্গ তৈরি করতে আপনি এই কোডটিকে টুইঙ্ক এবং সংশোধন করতে পারেন। একটি বিদ্যমান contextmenu পরিবর্তন হিসাবে, আমি নিশ্চিত যে কিভাবে করবেন ... এই পরীক্ষা করে দেখুন নই বেহালার দেখুন একটা সংগঠিত পয়েন্টের জন্য। এছাড়াও, আমার প্রসঙ্গের আইটেমগুলিতে ক্লিক করার চেষ্টা করুন। তাদের কয়েকটি অসাধারণ বার্তা আপনাকে সতর্ক করা উচিত। যদি তারা কাজ না করে, আরও কিছু জটিল ... চেষ্টা করুন।

— Cannicide
সূত্র
0

আমি নিম্নলিখিত jsfiddle অনুরূপ কিছু ব্যবহার

function onright(el, cb) {
    //disable right click
    document.body.oncontextmenu = 'return false';
    el.addEventListener('contextmenu', function (e) { e.preventDefault(); return false });
    el.addEventListener('mousedown', function (e) {
        e = e || window.event;
        if (~~(e.button) === 2) {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
            return false;
        }
    });

    // then bind Your cb
    el.addEventListener('mousedown', function (e) {
        e = e || window.event;
        ~~(e.button) === 2 && cb.call(el, e);
    });
}

আপনি যদি পুরনো IE ব্রাউজারগুলিকে লক্ষ্য করে থাকেন তবে যাইহোক এটি 'সংযুক্তিভেস্ট' দিয়ে সম্পূর্ণ করা উচিত; কেস

— fedeghe
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.