ブラウザ上で右クリックすると「コンテキストメニュー」と呼ばれるメニューが表示されます。
拡張機能をインストールすると項目が増えることもあります。
そんなコンテキストメニューですが、たまにブラウザのメニューではなく独自のメニューを表示しているサイトを見かけます。
デモ
黄色いエリアの内側で右クリックすると独自のメニューが表示されます。
- a
- b
- c
- d
使い方
必要なファイル
jRumbleの基本コード
$('メニューを埋め込む対象のセレクタ').contextMenu('表示するメニューのセレクタ', {パラメータ});
今回、「メニューを埋め込む対象のセレクタ」には黄色いdivタグを、表示するメニューのセレクタにはulタグを含むdivタグを指定しています。前者についてはbodyタグを指定してもよいかもしれません。
html部分は以下のような感じ。
<!-- メニューを埋め込む対象 --> <div style="border: 1px solid #000; width: 100px; height: 100px; background-color: #ff0;"> </div>
<!-- 表示するメニュー -->
<div class="contextMenu">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
ちなみに、表示するメニューのclassにcontextMenuというクラス名を指定しておくと、プラグイン側で非表示処理をしてくれます。他のクラス名だと自分で非表示にしておく必要があります。
実際は、各liタグにもidを振り、クリックされたときの処理をパラメータとして渡すことになります。今回は適当にalertを仕込みました。
なかなか汎用性のありそうなプラグインだと思います。
