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