【JQuery】「jquery-contextmenu」プラグインで右クリックメニューを表示する

2019年9月21日2020年10月27日Javascript,開発

おはようございます。

約2か月ぶりのJQuery記事です。

今回は「jquery-contextmenu」プラグインを利用して、右クリックメニューの表示を試してみました。

1. プログラム
2. 起動してみる
3. まとめ

プログラム

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;
}

@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:1pxsolid#ddd;

}

.table-borderd th {

border-top:1pxsolid#ddd;

border-bottom:1pxsolid#ddd;

border-right:1pxsolid#ddd;

background-color:#e6e8f4;

}

.table-borderd td {

border-top:1pxsolid#ddd;

border-bottom:1pxsolid#ddd;

border-right:1pxsolid#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>

<!DOCTYPE html>

<head>

<title>サンプルコンテキストメニュー</title>

</head>

<pre>

コンテキストメニュー（右クリックメニュー）のサンプル。

テーブルのセルを右クリックでコンテキストメニューが表示されます。

メニューを選択した際に、どこのセルのどのメニューが選択されたかをアラートします。

</pre>

</div>

<div>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

</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";
					}
			}
		}
	});
});