実行結果
▼下記の要素を右クリックすると、円形のメニューを表示します。
設置サンプルのソース
<!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>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<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>