How to Customize Right-Click (Context) Menu Using contextmenu.r2.js

Here is a guide on how to display a custom context menu when right-clicking on a specific tag element using contextmenu.r2.js.

CSS for the Area Where the Right-Click (Context) Menu is Displayed

Modify as needed.

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:700px;
	margin:0 auto;
	text-align:center;
}
#idDemo1_yellow{
	background-color:#FFFF99;
	padding:10px;
}
-->
</style>

JavaScript to Customize Right-Click (Context) Menu Using contextmenu.r2.js

Load the jQuery and jquery.contextmenu.r2.js files.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.contextmenu.r2.js"></script>

　
Right-click on the span.demo1 tag to display the custom context menu defined by id=”myMenu1″.

<script type="text/javascript">
$(function(){
	$('span.demo1').contextMenu('myMenu1', {
		//Displays an alert based on the selected menu item.
		bindings: {
			'open': function(t) {
			alert('ID is '+t.id+'.\nOpen .');
			},
			'email': function(t) {
			alert('ID is '+t.id+'.\nLaunch Email.');
			},
			'save': function(t) {
			alert('ID is '+t.id+'.\nSave.');
			},
			'delete': function(t) {
			alert('ID is '+t.id+'.\nClose.');
			}
	  }
  });
});	
</script>

HTML for the Area Where the Right-Click (Context) Menu is Displayed

Modify the HTML tags for the context menu displayed upon right-clicking as needed.

<span class="demo1" id="idDemo1_yellow"><b>ココで右クリックしてみて下さい</b></span>


<div class="contextMenu" id="myMenu1">

<ul>

 	<li id="open"><img src="folder.gif"> Open</li>


 	<li id="email"><img src="email.gif"> Email</li>


 	<li id="save"><img src="disk.gif"> Save</li>


 	<li id="close"><img src="crose.gif"> Close</li>

</ul>


</div>

contextmenu.r2.js: Demo Page for Customizing the Right-Click (Context) Menu

contextmenu.r2.js: Demo Page for Customizing the Right-Click (Context) Menu

Source：jquery.contextMenu.Plus

I have not yet received any projects to customize right-click context menus, but I am sharing this as a memo for potential future use.

　
Please use at your own risk. Do not reuse the Google Analytics tags within the demo page.