skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

javascriptライブラリ「prototype」でコンテキストメニューを作成

｜ ｜ ｜ ｜ ｜ ｜ ｜

ブラウザ上で右クリックすると表示されるショートカットキーがあります。
これをオリジナルにしたものをコンテキストメニューと言います（多分）。
Proto.Menuではこれをprototypeで実現しています。

使用方法
Proto.MenuからProto.Menu.js、Proto.Menu.cssをprototypeからprototype.js（v1.6）をダウンロードします。
<link rel="stylesheet" href="http://yourdomain/Proto.Menu.css" type="text/css" media="screen">
<script src="http://yourdomain/prototype.js" type="text/javascript"></script>
<script src="http://yourdomain/Proto.Menu.js" type="text/javascript"></script>
上記を記入した後、さらに以下のスクリプトで表示したいメニューを作成します。
<script type="text/javascript">
document.observe('contentloaded', function(){
var externalStopFunction = function(){
alert('stop function called externally');
}
var Links = [ //ここからメニュー
{name: 'メニュータイトル', callback: function(){alert('')}},
{separator: true}, //メニュー分割
]
var menuObj = new Proto.Menu({
selector: '#id名',
menuItems: Links
});
});
</script>
javascriptライブラリ「prototype」でコンテキストメニューを作成サンプル

記事作成：2008年02月09日

前の記事：アクセッシブルなスライダーjavascript「Accessible News Slider」
次の記事：スライドするタブメニューjavascript「Perspective tabs」