jQuery pluginコンテキストメニュー(右クリックメニュー)
- ContextMenu plugin〔コンテキストメニュー〕
- HaloContext - jQuery plugin for right-click halo context menus〔右クリックで円形メニュー表示〕
- jContext 1.0 – The ultra-lightweight right click context menu for jQuery〔半透明のコンテキストメニュー〕
- jQuery Context Menu Plugin〔クロスブラウザ対応のコンテキストメニュー〕
HaloContext - jQuery plugin for right-click halo context menus
右クリックで円形メニュー表示
2009/3/1
HaloContext - jQuery plugin for right-click halo context menus
右クリックで、円形のメニューを表示するjQueryプラグイン。
要素をを右クリックすると、右クリックした位置を円の中心としてメニューを表示します。 メニューのラベルや各メニューをクリックした時の動作(リンク先の指定など)を指定することができます。 メニューの数に応じて、円の直径が大きくなります。

設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>jQuery Flash Plugin | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="/content/lib/jquery/jquery.halocontext.js"></script> <script type="text/javascript"> $(function() { /* 例1 */ $('#area1').haloContext({ bindings:{ "YAHOO! JAPAN":function(){window.confirm("YAHOO! JAPANを開きますか?")?location.href="http://www.yahoo.co.jp":""}, "google":function(){window.confirm("googleを開きますか?")?location.href="http://www.google.co.jp/":""}, "Live Search":function(){window.confirm("Live Searchを開きますか?")?location.href="http://www.live.com/?scope=web&mkt=ja-JP":""}, } }); /* 例2 */ $('#area2').haloContext({ bindings:{ "FC2ブログ":function(){alert('容量:1GB')}, "Seesaaブログ":function(){alert('記事投稿(テキスト容量):無制限\nディスクスペース:2GBまで');}, "livedoor Blog":function(){alert('容量:2.1GB');}, "エキサイトブログ":function(){alert('1回の投稿につき500KBまで');}, "Ameba":function(){alert('ブログの記事数:無制限\n画像フォルダ容量:1GBまで')}, "yaplog!":function(){alert('記事数:10,000記事\n画像:1TB');}, "ココログ":function(){alert('最大容量:2GB\n1アップロード辺りの最大容量:1MB\n1日辺りの最大容量:40MB');}, "はてなダイアリー":function(){alert('1日の日記に登録できる最大文字数:半角で約6万5千文字、全角で約3万2千文字まで');}, "ウェブリブログ":function(){alert('容量:3GB\n最大アップロード容量:1ファイルあたり20MB、1日あたり20MBまで)')}, "gooブログ":function(){alert('容量:3GB');}, } }); }); </script> <style type="text/css"> #area1{ float:left; margin:0; padding:10px; width:30%; height:200px; background:#ff9966; color:#fff; } #area2{ float:left; margin:0; padding:10px; width:30%; height:200px; background:#ff6699; color:#fff; } div.hct{ background:transparent url("/content/img/ajax/greybutton.png") no-repeat 0 0; position:absolute; width:48px; height:34px; font-size:10px; text-align:center; margin:0; padding:14px 0 0 0; display:none; cursor:pointer; } div.hct:hover{ background:transparent url("/content/img/ajax/greyhighlight.png") no-repeat 0 0; } #hpt{ position:absolute; width:10px; height:10px; display:none; background:000; opacity:0; } </style> </head> <body> <div id="wrap"> <h1><a href='http://jquery.lukelutman.com/plugins/flash/'>jQuery Flash Plugin</a> | 設置サンプル</h1> <p>▼下記の要素を右クリックすると、円形のメニューを表示します。</p> <!-- CODE --> <div class="cf"> <div id="area1"> <h2>例1</h2> <p>右クリックしてください。</p> </div> <div id="area2"> <h2>例2</h2> <p>右クリックしてください。</p> </div> </div> <!-- / CODE --> </div> </body> </html>
jContext 1.0 – The ultra-lightweight right click context menu for jQuery
半透明のコンテキストメニュー
2009/6/20
jContext 1.0 – The ultra-lightweight right click context menu for jQuery
jquery.js、jquery.jcontext.1.0.js
ブラウザのデフォルトの右クリックメニューを無効にして、半透明のコンテキストメニューを表示するjQueryプラグイン。
コンテキストメニューはリスト要素で指定し、そのリスト要素を含む親ブロックのid名をqueryに指定します。 opaciryには透明度を指定します。
<span>Right Click me</span> <div id='myMenu'> <ul> <li><a href='#'>Edit This Type</a></li> <li><a href='#'>Create New Type</a></li> <li><a href='#'>Book a Flight</a></li> </ul> </div>
<script type='text/javascript'> $(function() { $('span').showMenu({ opacity:0.8, query: '#myMenu' }); }); </script>

設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>jContext 1.0 | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript" src="/content/lib/jquery/jquery.jcontext.1.0.js"></script> <script type="text/javascript"> $(function() { /* 例1 */ $("span").showMenu({ opacity:0.8, query: "#myMenu" }); /* 例2 */ $("p").showMenu({ opacity:0.9, query: "#myMenu2" }); }); </script> <style type="text/css"> /* 例1 */ #myMenu { background:#fff; border:1px solid #444; display:none; width:150px; } #myMenu ul { margin:0;padding:0; list-style:none; } #myMenu li { margin:0; padding:5px; border:1px solid #444; display:block; } #myMenu ul li:hover{ background:#666; color:#fff; } #myMenu li:hover span, #myMenu li:hover a { color:#fff; } #myMenu a { color:#000; font-weight:bold; text-decoration:none; } /* 例2 */ #myMenu2 { background:#600; border:1px solid #200; color:#FFF; display:none; width:150px; } #myMenu2 ul { margin:0;padding:0; list-style:none; } #myMenu2 li { margin:0;padding:5px; list-style:none; border:1px solid #200; display:block; } #myMenu2 li:hover { background:#c22; color:#fff; } #myMenu2 li:hover span, #myMenu2 li:hover a { color:#fff; } #myMenu2 a, #myMenu2 a:hover { color:#fff; font-weight:bold; text-decoration:underline; } </style> </head> <body> <div id="wrap"> <h1><a href='http://www.gimiti.com/kltan/wordpress/?p=23'>jContext 1.0 – The ultra-lightweight right click context menu for jQuery</a> | 設置サンプル</h1> <!-- CODE --> <h2>例1</h2> <span>Right Click me</span> <div id="myMenu"> <ul> <li><a href="#">Edit This Type</a></li> <li><a href="#">Create New Type</a></li> <li><a href="#">Book a Flight</a></li> </ul> </div> <h2>例2</h2> <p>You can right Click me too </p> <div id="myMenu2"> <ul> <li><a href="#">Create New Class</a></li> <li><a href="#">Delete Class</a></li> <li><a href="#">Get a Job</a></li> </ul> </div> <!-- / CODE --> </div> </body> </html>