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 に対するコンテキストメニューを書いている。これだけ書いておけば使い回せるだろう。