【JQuery】「jquery-contextmenu」プラグインで右クリックメニューを表示する
おはようございます。
約2か月ぶりの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
/**
* ページ読み込み時の処理
*/
$(function(){
var context = $.contextMenu({
selector: "table tbody tr td"
, autoHide: true
, trigger : 'right'
, animation: {
duration: 500
, show: 'fadeIn'
, hide: 'fadeOut'
}
, callback: function(key, options) {
alert(options.$trigger.text() + " の " + options.$selected.text() + "が選択されました。");
}
, items: {
"menu1": {name: "メニュー１", icon: "fa-angle-right"},
"menu2": {name: "メニュー２", icon: "fa-angle-right"},
"sep1": "---------",
"menu3": {name: "メニュー３", icon: "fa-angle-right"},
"sep2": "---------",
"quit": {name: "閉じる", icon: function(){
return "context-menu-icon context-menu-icon-quit";
}
}
}
});
});
コールバックオプションにて、「key」を判別するとメニュー毎の処理を振り分けることができます。
起動してみる
無事に選択されたメニューの判別ができました。
まとめ
ひとまず、サクッとコンテキストメニューの表示、選択されたメニューの判別まで。
次回は選択された要素によって動的にメニューを切り替えるのを試してみようかと思います。
何かのお役に立てれば。
ではでは。