JavaScript PR

contextmenu.r2.jsを使って、右クリック(コンテキスト)メニューをカスタムする方法

記事内に商品プロモーションを含む場合があります

contextmenu.r2.jsを使って該当タグ要素で右クリックした時にカスタムしたコンテキストメニューを表示する方法をご紹介します。

右クリック(コンテキスト)メニューを表示するエリアのCSSの記述

※必要に応じて変更して下さい。

<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>

contextmenu.r2.jsを使って右クリック(コンテキスト)メニューをカスタム表示するJavaScriptの記述

※jqueryとjquery.contextmenu.r2.jsファイルを読み込みます。

<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>

 
※span.demo1タグを右クリックするとid=”myMenu1″タグにカスタムされたコンテキストメニューを表示します。

<script type="text/javascript">
$(function(){
	$('span.demo1').contextMenu('myMenu1', {
		//選択したメニューよってアラートを出します。
		bindings: {
			'open': function(t) {
			alert('idは'+t.id+'です。\nOpenしました。');
			},
			'email': function(t) {
			alert('idは'+t.id+'です。\nEmailを起動。');
			},
			'save': function(t) {
			alert('idは'+t.id+'です。\nSave(保存)。');
			},
			'delete': function(t) {
			alert('idは'+t.id+'です。\n(閉じる)。');
			}
	  }
  });
});	
</script>

右クリック(コンテキスト)メニューを表示するエリアのHTMLの記述

※右クリック時に表示するコンテキストメニューのHTMLタグの記述です。必要に応じて変更して下さい。

<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:右クリック(コンテキスト)メニューをカスタムしたデモページ

contextmenu.r2.js:右クリック(コンテキスト)メニューをカスタムしたデモページ

ソース元:jquery.contextMenu.Plus

右クリックコンテキストメニューをカスタムする案件を受けたことは今のところまだ無いですが、今後使うかもなので備忘録としてご紹介しました。

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。