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

右クリックのオリジナルメニューを作成する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」