【JQuery】「jquery-contextmenu」プラグインで右クリックメニューを動的に生成して表示する
おはようございます。
昨日に引き続き「jquery-contextmenu」プラグインのお話し。
今回はクリックされた要素によってメニューを切り替えるため、動的に生成する方法を試してみました。
プログラムは前回のものを流用しますが、
あまり変更箇所がないためそのまま全体を載せます。
【JQuery】「jquery-contextmenu」プラグインで右クリックメニューを表示する
スポンサーリンク
プログラム
css
css/style.css
@charset "UTF-8";
body
{
font-family:Helvetica, 'Helvetica Neue', 'Mplus 1p', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic' !important;
font-size:12px;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6
{
font-family:Helvetica, 'Helvetica Neue', 'Mplus 1p', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic' !important;
}
/**
* テーブル
*/
.table-borderd {
border-left: 1px solid #ddd;
}
.table-borderd th {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
background-color: #e6e8f4;
}
.table-borderd td {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
}
/**
* コンテキストメニュー
*/
.context-menu-icon.context-menu-icon--fa
{
font-family:inherit;
font-weight:200;
line-height:inherit;
}
.context-menu-list
{
font-size:16px;
}
.control-label+.label
{
margin-top:8px;
padding-top:5px;
}
テーブル、表示されるコンテキストメニュー用のスタイルを定義。
HTML
sample.html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>サンプルコンテキストメニュー</title> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body class="hold-transition fixed skin-blue-light sidebar-mini "> <div class="wrapper" > <div style="margin: 20px;"> <pre> コンテキストメニュー（右クリックメニュー）のサンプル。 テーブルのセルを右クリックでコンテキストメニューが表示されます。 メニューを選択した際に、どこのセルのどのメニューが選択されたかをアラートします。 １－２のメニューだけ他と違うものが表示されるようにしました。 </pre> </div> <div> <table class="table table-borderd table-striped"> <tbody> <tr> <th>列１</th> <th>列２</th> <th>列３</th> </tr> <tr> <td id="area1-1">１－１</td> <td id="area1-2">１－２</td> <td id="area1-3">１－３</td> </tr> <tr> <td id="area2-1">２－１</td> <td id="area2-2">２－２</td> <td id="area2-3">２－３</td> </tr> <tr> <td id="area3-1">３－１</td> <td id="area3-2">３－２</td> <td id="area3-3">３－３</td> </tr> </tbody> </table> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script> <script src="js/script.js"></script> </body> </html>
単純なテーブルを用意。
Javascript
js/script.js
var MENU = {
"menu1": {name: "メニュー１", icon: "fa-angle-right"},
"menu2": {name: "メニュー２", icon: "fa-angle-right"},
"menu3": {name: "メニュー３", icon: "fa-angle-right"},
"menu4": {name: "メニュー４", icon: "fa-angle-right"},
"sep": "---------",
"quit": {name: "閉じる", icon: function(){
return "context-menu-icon context-menu-icon-quit";
}
}
};
/**
* ページ読み込み時の処理
*/
$(function(){
var context = $.contextMenu({
selector: "table tbody tr td"
, autoHide: true
, trigger : 'right'
, animation: {
duration: 500
, show: 'fadeIn'
, hide: 'fadeOut'
}
, build: function($trigger, e) {
return createContextMenu($trigger);
}
});
});
/**
* コンテキストメニューを作成
*
* @param { DOM } trigger クリックされた要素
* @returns { Object } オプション
*/
function createContextMenu(trigger) {
var param = ["menu1", "menu2", "sep", "menu3", "sep", "quit"];
if (($(trigger).attr("id") == "area1-2")) {
param = ["menu2", "menu4", "sep", "quit"];
}
// コンテキストメニュー項目を生成
var items = (function (param) {
var result = {};
var index;
for (key in param) {
index = param[key];
if (result[param[key]]) {
index = param[key] + "_" + key;
}
result[index] = MENU[param[key]];
}
return result;
}(param));
// オプションの形式で返却
return {
callback: function(key, options) {
alert(options.$trigger.text() + " の " + options.$selected.text() + "が選択されました。");
},
items: items
}
}
「build」オプションを利用して、右クリック時に動的にメニューを生成するように変更しました。
起動してみる
１－２とそれ以外で表示されるメニューを変更することができました。
まとめ
今回は要素のIDを利用して判別しましたが、JQueryのセレクタを利用すればもっと柔軟なことができそうですね。
コンテキストメニューはひとまずここまでの予定です。
何かのお役に立てれば。
ではでは。