右クリックのオリジナルメニューを作成するjavascript「jQuery Halo Context Menu」に関するコメントはまだありません。
ご遠慮なくコメントしてください。
右クリックのオリジナルメニューを作成する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」













