該当エリアにて右クリックした際、カスタムしたコンテキストメニューを表示します。
1.読込む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>
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の記述例
<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:右クリック(コンテキスト)メニューをカスタムしたデモページ
右クリック時のメニューをカスタムした案件は、今のところまだ無いです。