2008年9月27日土曜日

jQuery Context Menu Plugin: コンテキストメニュー(右クリックメニュー)を操作するプラグイン


特定の要素の上で右クリックすると、準備しておいたメニューが現れるというjQueryのプラグイン。
方法によっては非常に強力な使い方ができそうです。

jQuery Context Menu Plugin
(http://abeautifulsite.net)
デモ

デモのコンテクストメニューは Edit, Cut, Copyなどが用意されています。
HTMLは下のような感じ。

<ul id="myMenu" class="contextMenu">
<li class="edit">
<a href="#edit">Edit</a>
</li>
<li class="cut separator">
<a href="#cut">Cut</a>
</li>
<li class="copy">
<a href="#copy">Copy</a>
</li>
<li class="paste">
<a href="#paste">Paste</a>
</li>
<li class="delete">
<a href="#delete">Delete</a>
</li>
<li class="quit separator">
<a href="#quit">Quit</a>
</li>
</ul>

Editの場合、Aタグのhref属性に #edit と指定されていますが、#をのぞいた edit がメニューの選択時にactionとして引数に渡されてきます。
Aタグにclassを指定することもできますが、class名とaction名がかぶるとうまく動かないようなので注意。


$(document).ready( function() {
$("#selector").contextMenu({
menu: 'myMenu'
},
function(action, el, pos) {
alert(
'Action: ' + action + 'nn' +
'Element ID: ' + $(el).attr('id') + 'nn' +
'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)nn' +
'X: ' + pos.docX + ' Y: ' + pos.docY+ ' (relative to document)'
);
});
});

第1引数はプラグインのオプション。
menu は使用するメニューのID名です。

ドキュメントには書かれていませんが
inSpeed, outSpeed というオプションも指定できるようです。
これはメニューの出現/消滅時の fadeIn/fadeOutの引数に渡されています。
(指定しない場合は inSpeed=150, outSpeed=75)


第2引数はコールバック関数。
メニューが選択された時に呼び出されます。
actionはメニューで指定したAタグのhref属性です。 (href="#[action]")



メソッドが5つ用意されています。

disableContextMenu() / enableContextMenu()
コンテクストメニューの解除/適用
$('#selector').disableContextMenu(); //#selectorのメニューを解除
$('#selector').enableContextMenu(); //#selectorにメニューを再適用


disableContextMenuItems(expr) / enableContextMenuItems(expr)
$('#myMenu').disableContextMenuItems('#cut,#copy'); //cutとcopyだけメニューから解除
$('#myMenu').enableContextMenuItems('#cut,#copy'); //cutとcopyを再適用


destroyContextMenu
マッチする要素をプラグインから外します。

0 件のコメント: