右クリックのオリジナルメニューを作成するjavascript「jQuery Halo Context Menu」

ブラウザ上では右クリックをすることで、さまざまなショートカットメニューが表示されます。
jQuery Halo Context MenuはjQueryベースで、表示されるメニューをオリジナルで作成することができます。

使用方法
jQuery Halo Context Menuからjquery.halocontext.jsとjQueryからjquery.jsをダウンロードします。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.halocontext.js" type="text/javascript"></script>
<style type="text/css">
div.hct {
background-image: url(greybutton.png);
position: absolute;
width: 48px;
height: 34px;
font-size: 10px;
text-align: center;
padding-top: 14px;
display: none;
cursor: pointer;
}
div.hct:hover {
background-image: url(greyhighlight.png);
}
#hpt {
position: absolute;
width: 10px;
height: 10px;
display: none;
background: 000;
opacity: 0;
}
</style>
そしてメニューを作成します。
<script type="text/javascript">
$(document).ready(function() {
$('#id名').haloContext({ bindings : {
"メニュー1" : function() { alert('') },
"メニュー2" : function() { alert('') },
"メニュー3" : function() { alert('') },
}
});
});
</script>
最後に上で指定したid名を付与したdivを書き込めば作成できます。
右クリックのオリジナルメニューを作成するjavascript「jQuery Halo Context Menu」サンプル

2007年09月11日

前の記事：動画も対象のLightbox系javascript「Mediabox」
次の記事：ページ単位でタグクラウドを作成するjavascript「DynaCloud」

関連記事

• [jQuery]Accordion
• [jQuery]Horizontal Accordion
• [jQuery]HoverAccordion
• [jQuery]FastFind Menu
• [jQuery]idTabs

• ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」
• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」