jQuery Context Menu Plugin

  • 投稿日:
  • by
  • カテゴリ:
  • ハッシュタグ:

今の「プランB」の作りは、Tableで一覧表を作って、各行の先頭に「更新」、「削除」というリンクを張って、更新ページや削除ページに遷移させるというものです。
確実性はあるものの、古典的で面白みに欠けるきらいがありますし、各行に「更新」、「削除」リンクがあることで画面を占有してしまっているのも気になります。

各行にチェックボックスやラジオボタンを配して、セレクトボックスでコマンドを選ばせて実行という手もありますが、現状では1クリックで済むのに3クリックとなり手間が掛かりすぎです。

現在のWindowsアプリでは、右クリックでコンテクストメニューを開いて、コマンドを選択するUIが定着しています。 jQueryにも右クリックメニューを実現するプラグインがあります。
Cory S.N. LaViska氏の「jQuery Context Menu Plugin」がそれです。 ASCII.jp にも解説記事があります。

実は同名で同様の機能を実現するプラグインがもう一つありますが、別個のプロジェクトだということです。 

使い方はデモの通りなんですが、自分はTableに適用したので tbody要素に selectableというクラスを設定し、こんな感じにしました。


$(function() {
$("tbody.selectable tr").contextMenu({
menu: 'myMenu'
},
function(action, el, pos) {
alert(
$(el).find("td:eq(2)").text()
);
});
});

「el」にイベントが発生した要素(自分の場合はtr)が入るらしいので、findメソッドで「el」の中の3番目のtd要素のテキストをアラートに表示しています。

コンテクストメニュー自体は、ページ内に記述されたリスト要素(非表示にされている)を、右クリックしたカーソルの近くに表示することで実現しています。
実際には、メニューを選んだら即削除なんて訳にもいかないので、UI Dialog などで確認の表示を出してから実行ということになるんでしょう。

このプラグインを採用するかどうかは、様々なコストとの兼ね合いでしょうね。 メニューの項目が3つ以上なら採用する価値はあるのではないでしょうか?