右クリック時にカスタムしたコンテキストメニューを出す。
このjquery.contextmenu.r2.jsは2007年のjQueryのライブラリなんだな。
2023年6月24日(土)現在、私は未だにこれを使用している。
次からjquery.contextmenu.r2.jsをダウウンロードする。
https://ja.osdn.net/frs/g_redir.php?m=jaist&f=icodeconsole%2Fconsole%2Fstatic%2Fjs%2Fjquery.contextmenu.r2.js ExternalLink
サンプルコード
jQueryを使う必要がある。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>右クリック時にカスタムしたコンテキストメニュー表示</title>
<style>
body {
margin: 0;
padding: 0;
}
#idDemo1_red {
background-color: red;
}
</style>
</head>
<body>
<h1>右クリック時にカスタムしたコンテキストメニュー表示</h1>
環境<br>
jquery-3.6.3.min.js<br>
jquery.contextmenu.r2.js<br>
<!--
class名がdemo10は任意の値
このclass名がdemo10のspanタグの領域をクリックすると、
右クリック時にカスタムしたコンテキストメニュー(class名がcontextMenuでid名がmyMenu10)を表示する。-->
<span class="demo10" id="idDemo1_red"><b>ココで右クリックする(赤いとこ)</b></span>
<!-- このclass名のcontextMenu(変更不可)。
もし、contextMenuを変更するにはjquery.contextmenu.r2.jsを変更する必要がある。
myMenu10は任意の値 -->
<div class="contextMenu" id="myMenu10">
<ul>
<li id="menu1">menu1</li>
<li id="menu2">menu2</li>
<li id="menu3">menu3</li>
<li id="menu4">menu4</li>
</ul>
</div>
<script src="js/jquery-3.6.3.min.js"></script>
<script src="js/jquery.contextmenu.r2.js"></script>
<script>
$(function() {
$('span.demo10').contextMenu('myMenu10', {
//選択したメニューによってアラートを出します。
bindings: {
'menu1': function(t) {
alert('idは' + t.id + 'です。\n menu1。');
},
'menu2': function(t) {
alert('idは' + t.id + 'です。\n menu2。');
},
'menu3': function(t) {
alert('idは' + t.id + 'です。\n menu3。');
},
'menu4': function(t) {
alert('idは' + t.id + 'です。\n menu4。');
}
}
});
});
</script>
</body>
</html>
参考
contextmenu.r2.jsを使って、右クリック（コンテキスト）メニューをカスタムする方法 DAD UNION – エンジニア同盟 (dad-union.com) ExternalLink