jQueryのcontextMenuプラグインを利用したコンテキストメニュー

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのcontextMenu()プラグインを利用してコンテキスト型のメニューを表示します。サンプルの右上に表示されている「DEMO」を右クリックするとコンテキストメニューが表示されます。コンテキストメニューからアイテムを選択するダイアログにメッセージが表示されます。本番では、alert()の代わりに対応する処理を記述します。

このサンプルは、jQueryのcontextMenu()プラグインを利用してコンテキスト型のメニューを表示します。サンプルの右上に表示されている「DEMO」を右クリックするとコンテキストメニューが表示されます。コンテキストメニューからアイテムを選択するダイアログにメッセージが表示されます。本番では、alert()の代わりに対応する処理を記述します。

このサンプルで使用しているイメージです。イメージを右クリックしてダウンロードしてください。

folder.png email.png disk.png cross.png 

$(function() {
  $('span.demo').contextMenu('menu', {
    bindings: {
      'open': function(t) {
        alert('Trigger was ' + t.id + '\nAction was Open');
      },
      'email': function(t) {
        alert('Trigger was ' + t.id + '\nAction was Email');
      },
      'save': function(t) {
        alert('Trigger was ' + t.id + '\nAction was Save');
      },
      'delete': function(t) {
        alert('Trigger was ' + t.id + '\nAction was Delete');
      }
    }
  });
});

<span id="quickDemo"  class="demo">
  <b>DEMO</b> right-click me!!
</span>

<div id="menu" class="contextMenu" >
  <ul>
    <li id="open">
      <img src="jQuery/contextMenu/folder.png" />
      Open</li>
    <li id="email">
      <img src="jQuery/contextMenu/email.png" />
      Email</li>
    <li id="save">
      <img src="jQuery/contextMenu/disk.png" />
      Save</li>
    <li id="delete">
      <img src="jQuery/contextMenu/cross.png" />
      Delete</li>
  </ul>
</div>