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



該当エリアにて右クリックした際、カスタムしたコンテキストメニューを表示します。

1.読込むJs

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

2.JavaScript記述例

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

3.HTMLの記述例

    <p>
    <span class="demo1" id="idDemo1_yellow"><b>ココで右クリックしてみて下さい</b></span> 
    </p>
    
    <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 plugin

右クリック時のメニューをカスタムした案件は、
今のところまだ無いです。