読者です 読者をやめる 読者になる 読者になる

右クリックコンテキストメニューの基本サンプル

jQuery

jQuery で右クリックコンテキストメニューを表示するのに気に入って使うようになったもの
 
https://github.com/swisnl/jQuery-contextMenu

https://swisnl.github.io/jQuery-contextMenu/

以前、これを使用する時のアイコンを変える方法を書いた。→
コンテキストメニューのアイコンをカスタマイズ - Oboe吹きプログラマの黙示録

改めて、基本的な使い方として、テーブル(表)の 行挿入削除、コピー&Paste をサンプルとして書いておく。

jquery.contextMenu.css
jquery.ui.position.js
jquery.contextMenu.js

GitHub から入手して

<link rel="stylesheet" type="text/css"  href="jquery.contextMenu.css"/>
<script type="text/javascript" src="jquery.ui.position.js"></script>
<script type="text/javascript" src="jquery.contextMenu.js"></script>

さらに、文字フォントなどは調整することあるので、

/*--------- 右クリックコンテキストメニュー -------------------*/
.context-menu-list {
  min-width: 120px;
  max-width: 200px;
  padding: 4px 0;
  margin: 5px;
  font-size: 14px;
}
/* 非活性の文字色  */
.contextmenu-item-disabled{ color: #cccccc !important; }

/* 右クリックした行の選択色  */
.context-menu-active td{
	background-color: #ffffc0 !important;
}

table として、以下のようにあった場合

<table id="target-table">
   <thead>
     <tr><th>ID</th><th>Name</th><th>Date</th><th>price</th><th>code</th><th>select</th><th>memo</th></tr>
   </thead>
   <tbody>
     <tr>
      <td>10</td><td>apple</td><td>2017-12-11</td><td>200</td><td>104502</td><td>on</td><td></td>
     </tr>
   </tbody>
</table>

右クリックコンテキストメニューjQuery

var initList = function(){
   // 列数
   var columnLength = $('#target-table thead tr th').length;
   // コピー
   var copyTRhtml = null;
   // tbody contextmenu → 行挿入のみ
   $.contextMenu({
      selector: '#target-table tbody',
      build: function($trigger, e){
         return {
            callback: function(key, options){
               if (key=="add"){
                  $trigger.append("<tr></tr>");
                  for(var i=0;i < columnLength;i++) $trigger.children('tr:last').append("<td></td>");
               }
            },
            items: {
               "add":{ name:"1行挿入", icon:"add", },
            },
            events: {
               show: function(){
                  console.log("-- contextmenu tbody show ---" );
               },
               hide: function(){
                  console.log("-- contextmenu tbody hide ---" );
               }
            }
         };
      },
   });
   // tr contextmenu → 行挿入/削除/コピー/貼付
   $.contextMenu({
      selector: '#target-table tbody tr',
      build: function($trigger, e){
         // コンテキスト行選択色→ ON
         $trigger.addClass("seleted-context");
         return {
            callback: function(key, options){
               if (key=="add"){
                  // 追加
                  $trigger.before("<tr></tr>");
                  for(var i=0;i < columnLength;i++) $trigger.prev().append("<td></td>");
               }else if(key=="delete"){
                  // 削除
                  $trigger.remove();
               }else if(key=="copy"){
                  // コピー
                  copyTRhtml = "<tr>";
                  $trigger.children('td').each(function(ix, td){
                     copyTRhtml = copyTRhtml + "<td>" + $(td).html() + "</td>";
                  });
                  copyTRhtml = copyTRhtml + "</tr>";
               }else if(key=="paste"){
                  // 貼付け
                  if (copyTRhtml != null){
                     $trigger.before(copyTRhtml);
                     $trigger.remove();
                     copyTRhtml = null;
                  }
               }
            },
            items:{
               "add":    { name:"1行挿入", icon:"add",    visible: true, },
               "delete": { name:"削除",     icon:"delete", visible: true, },
               "copy":   { name:"コピー",   icon: "copy",  visible: true, },
               "paste":  { name:"貼付け",   icon: "paste", visible: truem\, className: copyTRhtml==null ? 'contextmenu-item-disabled' : '' },
            },
            events: {
               show: function(){
                  console.log("-- contextmenu show ---" );
               },
               hide: function(){
                  console.log("-- contextmenu hide ---" );
                  // コンテキスト行選択色→ OFF
                  $trigger.removeClass("seleted-context");
               }
            }
         };
      }
   });
};
$(function(){
   initList();
});

tbody と td に対するコンテキストメニューを書いている。これだけ書いておけば使い回せるだろう。