読者です 読者をやめる 読者になる 読者になる

独自のコンテキストメニューを表示できるjQueryプラグイン「ContextMenu plugin」

ContextMenu plugin

ブラウザ上で右クリックすると「コンテキストメニュー」と呼ばれるメニューが表示されます。

拡張機能をインストールすると項目が増えることもあります。

そんなコンテキストメニューですが、たまにブラウザのメニューではなく独自のメニューを表示しているサイトを見かけます。

調べてみたら、jQueryプラグインにもありました。

デモ

黄色いエリアの内側で右クリックすると独自のメニューが表示されます。

 
  • a
  • b
  • c
  • d

使い方

必要なファイル

jRumbleの基本コード

$('メニューを埋め込む対象のセレクタ').contextMenu('表示するメニューのセレクタ', {パラメータ});

今回、「メニューを埋め込む対象のセレクタ」には黄色いdivタグを、表示するメニューのセレクタにはulタグを含むdivタグを指定しています。前者についてはbodyタグを指定してもよいかもしれません。

html部分は以下のような感じ。

<!-- メニューを埋め込む対象 -->
<div style="border: 1px solid #000; width: 100px; height: 100px; background-color: #ff0;">&nbsp;</div>
<!-- 表示するメニュー -->
<div class="contextMenu">
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
  </ul>
</div>

ちなみに、表示するメニューのclassにcontextMenuというクラス名を指定しておくと、プラグイン側で非表示処理をしてくれます。他のクラス名だと自分で非表示にしておく必要があります。

実際は、各liタグにもidを振り、クリックされたときの処理をパラメータとして渡すことになります。今回は適当にalertを仕込みました。

 

なかなか汎用性のありそうなプラグインだと思います。