今回は、右クリック（コンテキスト）メニューをカスタムする方法についてご紹介します。これを実現するために、contextmenu.r2.jsという便利なプラグインを使用します。この記事では、CSSの設定、JavaScriptのコード、そしてHTMLの構成について詳しく解説しますので、エンジニア初心者の方でも簡単に理解して実装できるようになります。
右クリック（コンテキスト）メニューを表示するエリアのCSSの記述
まずは、右クリックメニューを表示するエリアの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>
このCSSは、ページ全体のスタイルをリセットし、見出しやコンテキストメニューを表示するエリアのスタイルを設定しています。
contextmenu.r2.jsを使って右クリックメニューをカスタム表示するJavaScriptの記述
次に、必要なJavaScriptファイルを読み込み、右クリックメニューをカスタム表示するためのコードを記述します。まず、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>
続いて、右クリックメニューをカスタムするためのJavaScriptを記述します。
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>
このスクリプトは、span.demo1要素を右クリックした際にカスタムメニューを表示し、選択したメニューに応じてアラートメッセージを表示します。
右クリックメニューを表示するエリアの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>
このHTMLは、右クリックメニューを表示するための要素を定義しています。span.demo1要素が右クリック対象であり、div.contextMenu要素がカスタムメニューの内容を定義しています。
contextmenu.r2.js：右クリック（コンテキスト）メニューをカスタムしたデモページ
実際に動作を確認するには、以下のデモページをご覧ください。
contextmenu.r2.js：右クリック（コンテキスト）メニューをカスタムしたデモページ
このデモページでは、上記で紹介したコードがどのように動作するかを確認できます。
ソース元：jquery.contextMenu.Plus
まとめ
この記事では、contextmenu.r2.jsを使用してカスタムコンテキストメニューを作成する方法を解説しました。CSSの設定からJavaScriptの実装、そしてHTMLの構成まで、一連の手順を詳細に説明しました。これを活用すれば、WebアプリケーションやWebサイトでユーザー体験を向上させることができます。ぜひ、試してみてください。
右クリックコンテキストメニューをカスタムする案件はまだ受けたことはありませんが、今後役立つかもしれないので備忘録として紹介しました。
この記事が役に立ったと思ったら、ぜひシェアしてください。これからも有益な情報を提供していきますので、お楽しみに！
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
