Proto.Menu :: prototype based context menu

Proto.Menu is a simple and lightweight prototype-based solution for context menu functionality on your page

prototype.jsで右クリックメニューを独自に作れるJSライブラリ「Proto.Menu」。
次のような独自の右クリックメニューを簡単に作ることが出来ます。



使い方は、必要なJavaScript/CSSファイルを読み込んだ後、次のようなコードを書くだけです。

// メニューを定義
var myLinks = [
     {name: 'Back', callback: function(){alert('back function called')}},
     {name: 'Forward', callback: function(){alert('Forward function called')}},
     {separator: true},
     {name: 'Reload', callback: function(){alert('Reload function called')}},
     {name: 'Disabled option', disabled: true},
     {name: 'Toggle previous option', callback: function(){
          var item = oLinks.find(function(l){return l.name == 'Disabled option'});
          item.disabled = item.disabled == false ? true : false;
     }}
]
// メニューを初期化
new Proto.Menu({
     selector: '.contextmenu' // context menu will be shown when element with class name of "contextmenu" is clicked
     className: 'myContextMenu', // this is a class which will be attached to menu container (used for css styling)
     menuItems: myLinks // array of menu items
})

この機能を実装することで、デフォルトのブラウザメニューが使えなくなる、というデメリットもありますが、使いどころによっては威力を発揮しそうなライブラリですね。