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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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